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? :man_shrugging:

[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...