且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

警告:为非布尔值属性"jsx"收到"true".Zeit风格的Jsx

更新时间:2023-09-03 14:57:10

确定.由于我本人花了几个小时才解决此问题,所以希望我能为同样有此问题的人们提供帮助.

OK. Since I myself spent a few hours before solving this, I hope I can help you guys who also have this problem.

要将styled-jsx与create-react-app一起使用,您需要:

To use styled-jsx with create-react-app, you need:

  1. 纱线添加react-app-rewired custom-cra
  2. 替换为package.json

    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",

使用

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",

  1. 创建(在根目录中, package.json 旁边)文件 config-overrides.js
  1. create (in root directory, next to package.json) file config-overrides.js

{ override, addBabelPlugin, addBabelPreset } = require('customize-cra');
module.exports = override(
    addBabelPlugin('styled-jsx/babel')
);

  1. 在根目录文件中创建 .babelrc (仅在运行 jest test 时使用)
  1. create in root directory file .babelrc (it is only used when you run jest test)

{
    "plugins": ["styled-jsx/babel"]
}

  1. 在您的 index.js 中(或将React装入DOM的位置),在调用ReactDOM.render(....)之前,插入以下代码,取自 https://github.com/vercel/styled-jsx/issues/560#issuecomment-599371026
  1. in your index.js (or where it is you mount React into DOM), before calling ReactDOM.render(....), insert the following bit of code, taken from https://github.com/vercel/styled-jsx/issues/560#issuecomment-599371026


const _JSXStyle = require('styled-jsx/style').default;
if (typeof global !== 'undefined') {
    Object.assign(global, { _JSXStyle });
}

这是不幸的,但是没有它,这种复杂的配置会有些变幻.

It is unfortunate, but this complex configuration is a bit fickle without it.

仅当将 yarn build yarn test 与create-react-app一起使用时,才需要执行步骤4和5.

You need steps 4 and 5 only if you use yarn build or yarn test with create-react-app.