Not working with create-react-app

[Irfanbsse2060]

I am using create-react-app . I have ejected create-react-app using npm run eject.Now i have all the webpack config files. As mentioned in docs i have added this line "plugins": ["jsx-control-statements"] But it doesn't trans pile jsx-control-statement. I am using babel version 7. Is it related to babel version ?

[AlexGilleran]

It should definitely work with Babel 7. What does your .babelrc look like? 🤷‍♂️

[Irfanbsse2060]

Here is my .babelrc
`{
"presets": [
"react-app"
],
"plugins": [ "jsx-control-statements","@babel/plugin-proposal-export-default-from"]

}
`

Here is babel configuration in webpack config file .
`
{
test: /.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: 'babel-loader',
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),

            plugins: [
              require('babel-plugin-jsx-control-statements'),
              require('@babel/plugin-proposal-export-default-from'),
              [require('@babel/plugin-proposal-decorators'), { legacy: true }],



              [
                require.resolve('babel-plugin-named-asset-import'),
                {
                  loaderMap: {
                    svg: {
                      ReactComponent:
                        '@svgr/webpack?-prettier,-svgo![path]',
                    },
                  },
                },
              ],

            ],
            // This is a feature of `babel-loader` for webpack (not Babel itself).
            // It enables caching results in ./node_modules/.cache/babel-loader/
            // directory for faster rebuilds.
            cacheDirectory: true,
            cacheCompression: isEnvProduction,
            compact: isEnvProduction,
          },
        },`

Here is the error

[AlexGilleran]

Oh right, those look like eslint errors - you'll have to either use https://github.com/vkbansal/eslint-plugin-jsx-control-statements or turn it off.

[zhanghaojincheng]

I have solved my problem. because eslintconfig

[lousongtao]

could you explain how to config the "eslintConfig" node in package.json after I do eject in a create-react-app project?
I read the introduction of https://github.com/vkbansal/eslint-plugin-jsx-control-statements and add all of the information into the node of "eslintConfig", but it always reports "react/jsx-no-undef". Here is my node of "eslintConfig"

"eslintConfig": {
"plugins": [
"jsx-control-statements"
],
"extends": ["react-app","plugin:jsx-control-statements/recommended"],
"rules": {
"react/jsx-no-undef": [2, { "allowGlobals": true }],
"jsx-control-statements/jsx-choose-not-empty": 1,
"jsx-control-statements/jsx-for-require-each": 1,
"jsx-control-statements/jsx-for-require-of": 1,
"jsx-control-statements/jsx-if-require-condition": 1,
"jsx-control-statements/jsx-otherwise-once-last": 1,
"jsx-control-statements/jsx-use-if-tag": 1,
"jsx-control-statements/jsx-when-require-condition": 1,
"jsx-control-statements/jsx-jcs-no-undef": 1,
"no-undef": 0
},
"ecmaFeatures": {
"jsx": true
},
"env": {
"jsx-control-statements/jsx-control-statements": true
}
},

[misaeldossantos]

@lousongtao I deleted node_modules and I re-install all packages, and it worked with that same configuration

[texttechne]

Looks like a configuration issue which has been solved. Closing...