Support CRA v4

[JanJakes]

CRA v4 was just released: https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md

I gave it a quick try and I'm getting the following error at the moment:

craco:  *** Cannot find ESLint loader (eslint-loader). ***

(Didn't dig further into it though.)

[patricklafrance]

I guess a few things will break since a project like this is a major hack which break easily.

I will not personally invest time to support CRA v4 since I am not using CRA anymore. We do have a few projects at GSoft using CRACO so I still hope that someone from one of these teams will jump in to support CRA 4 but as of now, no one is willing to do it.

I will gladly review a PR if anyone is interested to submit one.

Thank you,

Patrick

[pbr1111]

The eslint-loader has been deprecated in favor of eslint-webpack-plugin, so it should be able to configure the plugin via the plugins property. The error is informative and even if we do not have any eslint configuration in the craco config it is displayed because by default the eslint property is filled with these values:

eslint: {
    mode: ESLINT_MODES.extends
}

Maybe it would be necessary to remove the default configuration of eslint or apply it only if the eslint-loader exists so as not to introduce a breaking change for those who use older versions of CRA.

[iwan-uschka]

I just read the whole thread so i am aware of

I will not personally invest time to support CRA v4

but just want to put some extra bits in here. I just gave react-scripts@4.0.0 a try and ran into the following issues:

• cannot find module 'levenary' => could be solved by manually installing levenary
• cannot resolve static files like fonts => Compilation error with react-scripts 4.0.0 ( Can't resolve file ) facebook/create-react-app#9870

I didn't notice any ESLint related error. My configuration:

• react-scripts@4.0.0
• .eslintrc.js containing

module.exports = {
  extends: 'react-app',
};

• no ESLint specific config in craco.config.js

Maybe maybe maybe this helps.

[patricklafrance]

Is eslint the only thing that breaks with react-scripts@4.0.0 ?

[Thanaen]

@patricklafrance I personally get another error, with CRA v4:

`X:\xxx\node_modules\react-scripts\scripts\test.js:20
throw err;
^

Error: craco: Cannot find Jest transform entry for Babel ^.+.(js|jsx|ts|tsx)$ or ^.+.(js|jsx)$.
at configureBabel (X:\xxx\node_modules@craco\craco\lib\features\jest\merge-jest-config.js:35:27)
at mergeJestConfig (X:\xxx\node_modules@craco\craco\lib\features\jest\merge-jest-config.js:68:9)
at proxy (X:\xxx\node_modules@craco\craco\lib\features\jest\override.js:11:20)
at Object. (X:\xxx\node_modules\react-scripts\scripts\test.js:76:5)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)`

But I haven't made sure it's not an environment-related error, or a package-related error !

[pianomansam]

As there appear to be many issues with CRA v4, this bug report might be best broken out into individual reports to track the progress in fixing each.

I myself ran into the issue of changes to eslint due to the deprecation of eslint-loader. Specifically, my config disables eslint. I came up with a quick inline plugin to honor the eslint.enable: false setting.

  plugins: [
    {
      plugin: {
        overrideCracoConfig: ({ cracoConfig }) => {
          if (typeof cracoConfig.eslint.enable !== 'undefined') {
            cracoConfig.disableEslint = !cracoConfig.eslint.enable;
          }
          delete cracoConfig.eslint;
          return cracoConfig;
        },
        overrideWebpackConfig: ({ webpackConfig, cracoConfig }) => {
          if (
            typeof cracoConfig.disableEslint !== 'undefined' &&
            cracoConfig.disableEslint === true
          ) {
            webpackConfig.plugins = webpackConfig.plugins.filter(
              (instance) => instance.constructor.name !== 'ESLintWebpackPlugin',
            );
          }
          return webpackConfig;
        },
      },
    },
  ],

[justrealmilk]

I have the same issue as OP but I'm not as smart as the rest of y'all so I'm rolling back to 3.4.4 until...

[mormahr]

@patricklafrance I personally get another error, with CRA v4:

`X:\xxx\node_modules\react-scripts\scripts\test.js:20
throw err;
^

Error: craco: Cannot find Jest transform entry for Babel ^.+.(js|jsx|ts|tsx)$ or ^.+.(js|jsx)$.
at configureBabel (X:\xxx\node_modules@craco\craco\lib\features\jest\merge-jest-config.js:35:27)
at mergeJestConfig (X:\xxx\node_modules@craco\craco\lib\features\jest\merge-jest-config.js:68:9)
at proxy (X:\xxx\node_modules@craco\craco\lib\features\jest\override.js:11:20)
at Object. (X:\xxx\node_modules\react-scripts\scripts\test.js:76:5)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)`

But I haven't made sure it's not an environment-related error, or a package-related error !

I submitted a PR to fix this. (#207)

[wojtow]

1. Per the changelog on CRA v4, it may well be necessary to blow away your node_modules and let yarn/npm rebuild it all. For me, that fixed several of the issues I was experiencing.

2. Make sure you're placing the blame appropriately. Some of the issues you may be experiencing here might be the result of the CRA v4 upgrade itself and not necessarily craco having issues with it. If possible, try building with react-scripts instead of craco and see if the issues are still there. I'm only using craco for some non-essential tweaks to the config, so I could test with react-scripts and found another issue was still there. I dug through the issue reports with CRA and found a mitigation there.

The only thing that remains for me now with craco is the eslint-loader message, which is just a warning that I'm ignoring for now. My app seems to be building and working as expected otherwise at the moment.

[iwan-uschka]

I could solve my issue

cannot resolve static files like fonts => facebook/create-react-app#9870

like described in facebook/create-react-app#9870 (comment).

Can confirm craco: *** Cannot find ESLint loader (eslint-loader). *** issue but it doesn't affect the app itself.

[devinrhode2]

@patricklafrance If you aren't using CRA anymore, what are you using?