Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CRACO updates (latest news here) #426

Closed
dilanx opened this issue Jun 15, 2022 · 24 comments
Closed

CRACO updates (latest news here) #426

dilanx opened this issue Jun 15, 2022 · 24 comments

Comments

@dilanx
Copy link
Owner

dilanx commented Jun 15, 2022

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 dilanx pinned this issue Jun 15, 2022
@dilanx dilanx changed the title CRACO updates CRACO updates (latest news here) Jun 26, 2022
@dilanx
Copy link
Owner Author

dilanx commented Jun 29, 2022

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
Copy link

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
Copy link
Owner Author

dilanx commented Jun 29, 2022

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
Copy link

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
Copy link

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

@vish30
Copy link

vish30 commented Jul 21, 2022

@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
Copy link
Owner Author

dilanx commented Jul 27, 2022

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
Copy link

TimRChen commented Aug 2, 2022

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/[email protected]/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
Copy link
Owner Author

dilanx commented Aug 3, 2022

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

@TimRChen
Copy link

TimRChen commented Aug 3, 2022

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

ok, i will. thanks.

@emmannweb
Copy link

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
Copy link

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

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
Copy link

Meligy commented Sep 16, 2022

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.

NiGhTTraX added a commit to NiGhTTraX/ts-monorepo that referenced this issue Oct 4, 2022
This version is alpha, check dilanx/craco#426
for updates.
@curtvict
Copy link
Contributor

curtvict commented Oct 6, 2022

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
Copy link

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
Copy link
Contributor

curtvict commented Oct 19, 2022

It looks like dependencies yarn expects craco to depend on.

@dilanx
Copy link
Owner Author

dilanx commented Oct 20, 2022

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

@tobyscott25
Copy link

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

@dilanx
Copy link
Owner Author

dilanx commented Nov 4, 2022

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

@dilanx
Copy link
Owner Author

dilanx commented Nov 8, 2022

CRACO 7 has been released and supports CRA 5!

npm i -D @craco/craco

@tobyscott25
Copy link

Great work @dilanx, thanks!

@kaneruan
Copy link

kaneruan commented May 4, 2023

postcss not working
#460

@dhanraj-chaintech
Copy link

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:

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:

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests