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?

[patricklafrance]

@devinrhode2 nothing, in the last year, I have been working full time on a UI component library. The projects I was working on are still using CRACO and will hopefully still use CRACO in the future!

Sorry for the confusion.

[devuxer]

I am using TypeScript@4 and started having problems with react-scripts@3.4.4. I traced the problem to react-scripts depending on very old versions of @typescript-eslint/*, which were choking on some of the newer TypeScript features, so I tried upgrading to react-scripts@4.0, and now I find I'm not able to use CRACO (due to same error as OP). I need CRACO for Ant Design. So, all I can say is, I'm definitely hoping CRACO continues to be supported 🙏.

[gloomygentleman]

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

The eslint-loader has been deleted from create-react-app

facebook/create-react-app@d07b7d0

Now eslint is being delivered through eslint-webpack-plugin, not eslint-loader.

[iwan-uschka]

@kkulbae Thanks for the information, wasn't aware.. I researched how to solve this issue and i could find this plugin https://www.npmjs.com/package/craco-eslint-webpack-plugin but wasn't able to make it work. It somehow broke my whole craco configuration. What did you do?

[david29832]

it may be not the best syntax but i got it working with this:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const CracoAntDesignPlugin = require('craco-antd')
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const WebpackBar = require('webpackbar')

module.exports = {
  eslint: false,
  webpack: {
    plugins: [
      new WebpackBar({ profile: true }),
      ...(process.env.NODE_ENV === 'development'
        ? [new BundleAnalyzerPlugin({ openAnalyzer: false })]
        : [])
    ]
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
      }
    },
    {
      plugin: {
        overrideWebpackConfig: ({webpackConfig, pluginOptions }) => {
          webpackConfig.plugins.map((plugin)=> {
            if(plugin instanceof ESLintWebpackPlugin) {
              plugin.options.quiet = true
              plugin.options.emitWarning = true
            }
          })
          return webpackConfig
        }
      },
      options: {}
    }  ]
}

[JanJakes]

Everything works for me with Craco 5.8.0 and CRA 4.0.1 (including custom path aliases).
There is only the eslint warning (doing no harm).
Should I close this issue already?

[threepointone]

Yeah it's all working pretty well! But imho we should look to remove the eslint warning before closing this issue.

[threepointone]

I'll try to investigate this myself over the christmas break if no one else has a crack at it before then.

[Rocinante89]

Anyone using craco workbox plugin? Mine seems to have stopped generating a service worker after the update to 5.8.0 & CRA 4.0.1?

[JanJakes]

So I run into an issue – the eslint config seems to no longer work:

eslint: {
  loaderOptions: {
    emitWarning: true,
  },
},

I achieved the same using an inline plugin as follows:

{
  plugin: {
    overrideWebpackConfig: ({ webpackConfig }) => {
      const plugin = webpackConfig.plugins.find((plugin) => plugin.constructor.name === 'ESLintWebpackPlugin');
      plugin.options.emitWarning = true;
      return webpackConfig;
    }
  },
},

(EDIT: Now I see this was mentioned before in this thread.)

[patricklafrance]

Merged this PR #219 from @alexasselin008 which fix CRACO ESLint feature for CR4 🥳

It's released with https://github.com/gsoft-inc/craco/releases/tag/v6.0.0

While discussing this PR, we decided it was best if CRACO only support the latest MAJOR version of CRA to simplify the maintenance of CRACO and it's api.

@alexasselin008 added a validation which run when CRACO start to ensure it's using a supported version of react-script otherwise an alternate version of CRACO is recommended depending on which version of react-script is installed. More info available here.

With this PR, I believe it covers all the changes required to support CRA 4. It's been a great community achievement, thank you to everyone who participated in making this happen!

[patricklafrance]

I'll close this issue, feel free to re-open if we forgot something!

[stephanoshadjipetrou]

Anyone using craco workbox plugin? Mine seems to have stopped generating a service worker after the update to 5.8.0 & CRA 4.0.1?

same here. any updates on this?

[Meligy]

Funny I only started seeing Cannot find ESLint loader (eslint-loader) AFTER I migrated to craco v6!

Update:

Sorry, it was my fault. I edited package.json to bump the version, and maybe the formatters in VSCode took forever to save or something, that when I ran npm install it didn't have it yet. I ran npm install @craco/craco again and now it works.