CRACO updates (latest news here)

[dilanx]

Hey!

This project has been pretty inactive for a while, but we've decided to continue the update to CRA 5 and attempt to address any other issues that arise. Hopefully, we can regularly release alpha builds over the next few weeks. We'll do our best to test the updates, but developers relying on CRACO can help by creating an issue for each problem they experience.

If you're a developer that uses CRACO, here's how you can help!

1. Note the issue you're experiencing with the latest version of your dependencies.
2. Attempt to recreate the issue on a previous version of the dependency in question (react-scripts, Webpack, etc).
3. Create a new issue and detail the steps taken to reproduce the problem and what versions of the dependencies you're using (and whether or not it works on other versions). Also, share your CRACO config (along with any other relevant files, errors, or images).

We'll reference #378 for some unresolved issues, but now, it would be helpful if you create a separate issue for each problem you experience regardless of whether it's related to CRA 5 or not (provided that someone else didn't already make one). This will help us organize our tasks and mark what we've completed.

You can view our progress on the project board.

We look forward to continuing this project! Hopefully, we can get something out soon.

[dilanx]

v7.0.0-alpha.5 is out. It should function the same as alpha 3 (sorry I accidentally published a version without all of the files LOL that's where alpha 4 went) but now the package has been rewritten in TypeScript and should have built-in TypeScript declarations.

We'll be testing this to make sure nothing broke after the rewrite. Please create an issue if you experience any problems! Should have a big chunk of CRA 5 support out by this weekend (primarily webpack 5 support).

$ npm i @craco/craco@alpha

[gauravshah27]

Hey @dilanx - just wanted to say a big thank you for picking up the work to release CRA 5 support for craco. Just wanted to know whether you are planning to maintain this project long-term or is this a more short-term thing? The reason I ask is that we are talking about whether or not we should start moving away from craco and the CRA eco-system at large and look at other skaffolding eco-systems like vite?

[dilanx]

Hi @gauravshah27. I plan on maintaining craco for as long as it makes sense. My goal is to make sure it always supports the latest version of CRA in the long term. I'm not sure exactly where the future of CRA lies though. At least for right now, Vite's advantages make it seem like it's the future of frontend tooling (at least in my opinion) and honestly I plan to use it in many of my future personal projects over CRA. However, CRA is obviously still super popular and my goal is to make sure that craco can always supplement CRA for as long as people use it!

[gauravshah27]

Really appreciate the quick response @dilanx. It gives me a lot of confidence to keep using the CRA eco-system in the near future as I know folks are committed to maintaining this package. However, when it comes to performance, bundle-size, server-side rendering definitely feel that Vite has an advantage there and seems more in line with what a production eco-system should look like. I definitely agree with you that Vite may be the future but it needs work on things like usability, esbuild for production builds (still using rollup) . Thanks once again for picking this up and giving us hope and belief in this eco-system.

[SandeepThomas]

Vite may be the future, but Webpack is the present, so thank you for maintaining CRACO @dilanx.

[vish30]

@dilanx Vite uses Rollup as a bundler and Rollup doesn't support module federation. Webpack supports it, which is used in CRA. I am trying to use CRA 5 with module federation and turns out CRACO is the best way to extend CRA's configuration. Can we please add support for CRA 5 in CRACO?

Really looking forward to it.

[dilanx]

Thanks @vish30. I've been busy with some other projects lately but I hope to have a stable release supporting CRA 5 (at least initial support, other improvement-related features will come later) out within the next couple of weeks. For now, the alpha version should be sufficient ($ npm i @craco/craco@alpha), but please let me know of bugs I miss if anyone catches any.

[TimRChen]

ERROR in ./node_modules/.pnpm/react-dnd-html5-backend@9.3.2/node_modules/react-dnd-html5-backend/dist/esm/index.js 1:0-42

Module not found: Error: Can't resolve './HTML5Backend' in '/Users/tim/xxx/node_modules/.pnpm/react-dnd-html5-backend@9.3.2/node_modules/react-dnd-html5-backend/dist/esm'
Did you mean 'HTML5Backend.js'?
BREAKING CHANGE: The request './HTML5Backend' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Hey everyone, after upgrade to @craco/craco@alpha, my item just meet this problem. i try use fallback: { './HTML5Backend': 'HTML5Backend.js', }, but it not work. so i don't know how it deal. anyone could tell me how this solve?

[dilanx]

@TimRChen if you could make a separate issue for your problem, I can try to help you there.

[TimRChen]

@TimRChen if you could make a separate issue for your problem, I can try to help you there.

ok, i will. thanks.

[emmannweb]

How can i use craco, craco-less with autoprefixer (any autoprefixer) in React without Tailwind? I have searched through the internet, i can't get it work. If craco can work with Sass and autoprefixer also, that will be great also. I want to see the configuration plz.

[bhargavavarma]

@dilanx

After updating the react-scripts from v4.0.3 to v5.0.1, we got a issue in craco as shown in the below image.

So, we have updated craco version from v6.2.0 to v7.0.0-alpha.7 and started the server by running command craco start.

Before updating the craco version, to start development server it took 2 to 3 minutes. But after updating craco version to 7.0.0-alpha.7 development server is not getting started.

[Meligy]

I have been using 7.0.0-alpha.7 for over a month now with CRA 5 and latest React etc.

Everything seems good so far.

[curtvict]

Trying out v7.0.0-alpha.8 and documenting as I go.

Starting with a practically empty config file:

module.exports = {
  babel: {
    plugins: [],
  },
};

The first thing I noticed were these warnings when running yarn start:

Cannot find ESLint plugin (ESLintWebpackPlugin).
(node:326613) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:326613) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(node:326613) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(node:326613) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
	Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
	Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

But the app spun up with no issue.

When running yarn build I received the following warning:

(node:327584) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:327584) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

It seems to have built and looks properly after checking it out with yarn dlx serve build/.

I then added a simple Babel transform (babel-plugin-add-react-displayname) to my config:

module.exports = {
  babel: {
    plugins: ['add-react-displayname'],
  },
};

And reran yarn build and started getting display names added to the compiled output.

I then added and configured babel-plugin-styled-components which seemed to work well also:

module.exports = {
  babel: {
    plugins: [
      'add-react-displayname',
      ['babel-plugin-styled-components', { ssr: false, fileName: false, pure: true }],
    ],
  },
};

Confirmed again after another yarn build.

This seems to be working for me, at least for my limited use cases. Excellent job @dilanx and team!

[chrisgervang]

I'm using alpha.8 and running yarn start and immediately receive an error Error: Cannot find module 'ts-node'. When installing craco I saw these messages:

➤ YN0002: │ @craco/craco@npm:7.0.0-alpha.8 [4de0e] doesn't provide ts-node (p53963), requested by cosmiconfig-typescript-loader
➤ YN0002: │ @craco/craco@npm:7.0.0-alpha.8 [4de0e] doesn't provide typescript (p3e813), requested by cosmiconfig-typescript-loader

Maybe these are peer dependencies I should install, however, I'm not using typescript so it seems unnecessary.

[curtvict]

It looks like dependencies yarn expects craco to depend on.

[dilanx]

@chrisgervang that's an issue with cosmiconfig-typescript-loader and yarn. See #447.

[tobyscott25]

Hey @dilanx, roughly when will v7 (supporting react scripts v5) will become the main version?

[dilanx]

@tobyscott25 in just a couple of days! Sorry about such a long delay but things are almost done.

[dilanx]

CRACO 7 has been released and supports CRA 5!

npm i -D @craco/craco

[tobyscott25]

Great work @dilanx, thanks!

[kaneruan]

postcss not working
#460

[dhanraj-chaintech]

C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules@craco\craco\dist\lib\plugin-utils.js:26
throw new Error("".concat(message, "\n\n") +
^

Error: Can't find file-loader in the development webpack config!

This error probably occurred because you updated react-scripts or craco. Please try updating craco-less to the latest version:

$ yarn upgrade craco-less

Or:

$ npm update craco-less

If that doesn't work, craco-less needs to be fixed to support the latest version.
Please check to see if there's already an issue in the DocSpring/craco-less repo:

• https://github.com/DocSpring/craco-less/issues?q=is%3Aissue+webpack+file-loader

If not, please open an issue and we'll take a look. (Or you can send a PR!)

You might also want to look for related issues in the craco and create-react-app repos:

• https://github.com/dilanx/craco/issues?q=is%3Aissue+webpack+file-loader
• https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack+file-loader

at throwUnexpectedConfigError (C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules\@craco\craco\dist\lib\plugin-utils.js:26:11)
at throwError (C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules\craco-less\lib\craco-less.js:14:5)
at Object.overrideWebpackConfig (C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules\craco-less\lib\craco-less.js:165:5)
at overrideWebpack (C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules\@craco\craco\dist\lib\features\plugins.js:36:38)
at C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules\@craco\craco\dist\lib\features\plugins.js:53:29
at Array.forEach (<anonymous>)
at applyWebpackConfigPlugins (C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules\@craco\craco\dist\lib\features\plugins.js:52:29)
at mergeWebpackConfig (C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules\@craco\craco\dist\lib\features\webpack\merge-webpack-config.js:119:70)
at overrideWebpackDev (C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules\@craco\craco\dist\lib\features\webpack\override.js:8:80)
at C:\Users\HP5CD\OneDrive\Desktop\app\mern-admin\frontend\node_modules\@craco\craco\dist\scripts\start.js:23:39

[curtvict]

@dhanraj-chaintech You might want to peep this issue: DocSpring/craco-less#86