Replies: 51 comments 127 replies
-
|
I got this error on my app.
reproduction
|
Beta Was this translation helpful? Give feedback.
-
|
Can you try deleting your lockfile and |
Beta Was this translation helpful? Give feedback.
-
|
@mrmckeb I tried it, but got same result 🤣 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @ryota-murakami try adding the following to your package.json: "resolutions": {
"workbox-build": "6.1.5"
},or "resolutions": {
"workbox-webpack-plugin": "6.2.0"
},They broke workbox-webpack-plugin v6.1.5 20 hours ago... Reading https://github.com/GoogleChrome/workbox/releases it seems like 6.2.0 that changed the build of files that the workbox-webpack-plugin depends on - workbox-webpack-plugin depends on workbox-build "^6.1.5" - Seems a bit fragile... Let's bump |
Beta Was this translation helpful? Give feedback.
-
|
@raix thanks guiding me. First try only apply And then worked Second try with both resolution lock by After that For testing this iteration in the CRA repository, I'll submit 100% no mock E2E test PR, that add this my app(using v4.0.3 react-scripts) source code as fixture, and make Github action process following tasks.
Off course I'll push PR several our ago from now. |
Beta Was this translation helpful? Give feedback.
-
|
This alone should also work: (testing a version bump) "resolutions": {
"workbox-webpack-plugin": "6.2.0"
},The babel issues should have been resolved in https://github.com/facebook/create-react-app/blob/main/packages/babel-preset-react-app/create.js#L150 - babel will complain until cached (if you The production output seem broken as it detects some error but fail to print it... Thanks for testing @ryota-murakami seems like we have things to fix :) |
Beta Was this translation helpful? Give feedback.
-
|
Regarding fixtures - I would actualy suspect that running our currect test suite would also fail as the workbox-webpack-plugin 6.1.5 is now broken.. |
Beta Was this translation helpful? Give feedback.
-
|
@raix I'm sorry I said create version up regression test and push PR, but my |
Beta Was this translation helpful? Give feedback.
-
|
@raix This seems to work with In my app I'm actually seeing the |
Beta Was this translation helpful? Give feedback.
-
|
@raix Thank you, finally worked correctly
I see, let you try |
Beta Was this translation helpful? Give feedback.
-
|
I got the same issue with workbox-webpack-plugin failing. I can also confirm this worked for me as well: "resolutions": {
"workbox-webpack-plugin": "6.2.0"
}, |
Beta Was this translation helpful? Give feedback.
-
|
fixed on main now |
Beta Was this translation helpful? Give feedback.
-
|
It cannot work with new webpack.container.ModuleFederationPlugin({
name: "external",
filename: "remoteEntry.js",
exposes: {
"./App": "./src/App",
},
};
), |
Beta Was this translation helpful? Give feedback.
-
This is not a CRA5 problem. |
Beta Was this translation helpful? Give feedback.
-
|
See #9510 for module federation support |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
The broken workbox package is now fixed on main |
Beta Was this translation helpful? Give feedback.
-
|
Tried using CRA@next this morning. Seems to be experiencing some ESLinting issues currently Package.json |
Beta Was this translation helpful? Give feedback.
-
|
@KrisStadler This should be helpful. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, will take a look |
Beta Was this translation helpful? Give feedback.
-
|
babel warnings should be fixed on main now |
Beta Was this translation helpful? Give feedback.
-
|
Can there be another release with this fix? |
Beta Was this translation helpful? Give feedback.
-
|
Hello! Great work! I got it working, however with some issues and workarounds. Like you said before: The major issue I have right know is with sourcemaps: Looks like it doesn't take into account that the path is relative or something like that. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
The error overlay formatting is fixed in webpack - waiting for a release of webpack-dev-server |
Beta Was this translation helpful? Give feedback.
-
|
Actually webpack-dev-server was just released 16h ago - we should bump the version to 4.0.0-rc.1 (feel free to make a pr) |
Beta Was this translation helpful? Give feedback.
-
|
Created a PR: #11318 |
Beta Was this translation helpful? Give feedback.
-
|
Webpack 5 support? Might need to fix this first: |
Beta Was this translation helpful? Give feedback.
-
|
It's an issue with node esm import semantics. import * as jsx from 'react/jsx-runtime';
console.log(jsx);☝️ This doesn't work in node, even though babel's output uses this import path. Webpack 5 respects these semantics so it fails to import it. It can be alleviated by tweaking |
Beta Was this translation helpful? Give feedback.
-
|
Sounds like the react runtime module export should be fixed instead? |
Beta Was this translation helpful? Give feedback.
-
|
It's as simple as adding the It's present in React 18 alphas, so it could be backported. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @nstepien I get a bit more of the issue/root cause Imho a backport would solve the problem community wide - I'm a bit hesitant in regards to add a temp workaround in CRA - would prefer to use the engery to push for fixing the root cause. (I've asked in the maintainer group on how to best help solve this) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! Much appreciated. Once this is fixed upstream, it'll allow more people to safely enable the new JSX runtime in babel. |
Beta Was this translation helpful? Give feedback.
-
|
Has anyone been able to get this to work with Storybook? I believe storybook needs webpack 4. |
Beta Was this translation helpful? Give feedback.
-
|
I was able to update our storybook project with |
Beta Was this translation helpful? Give feedback.
-
|
Do we have a date for releasing next alpha? It'd be helpful to get rid of "resolutions" and better webpack-dev-server. |
Beta Was this translation helpful? Give feedback.
-
|
📣 We've released a new alpha version with the following changes:
In addition to these upgrades we've also changed the way we determine if we should use npm or Yarn when creating a new app. Previously this behaviour was non-deterministic. If someone had Yarn installed we would use Yarn and if they didn't we would use npm. Now we detect how you've invoked For example: # this will use npm
npx create-react-app my-app# both of these will use Yarn (depending which version you have installed)
yarn dlx create-react-app my-app
yarn create react-app my-app |
Beta Was this translation helpful? Give feedback.
-
|
Is there (or will there be) a way to configure fallbacks for node builtins without needing to eject? |
Beta Was this translation helpful? Give feedback.
-
|
For now there are no efforts to support nodejs shims - imho it should be considered bad practice as mixing frontend and backend code/packages is confusing to newcommers to js. |
Beta Was this translation helpful? Give feedback.
-
|
Can anyone point to a solution to this? Any project using EDIT: |
Beta Was this translation helpful? Give feedback.
-
Did you have to use the alpha version? |
Beta Was this translation helpful? Give feedback.
-
|
I've tried to start CRA with typescript and got following error Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
(@/home/andrei/Projects/my-ts-app/src/App.css) Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
(@/home/andrei/Projects/my-ts-app/src/index.css)` |
Beta Was this translation helpful? Give feedback.
-
|
postcss-normalize: "10.0.1" released and it fixes the issue
|
Beta Was this translation helpful? Give feedback.
-
|
@AndreiBehel Thanks, this is now resolved in #11338 |
Beta Was this translation helpful? Give feedback.
-
|
I'm completely unable to run an app with this new version. I've tried a myriad of installation steps, but the cleanest reproduction I got is this:
Full log of errors, truncated file paths for readabilityI don't know if the first 8 steps are necessary, but when I try running |
Beta Was this translation helpful? Give feedback.
-
|
I'm trying to upgrade my current react project so I can use the new Tailwind CSS 3.0 and PostCSS 8.0 because I want to try Tailwind's new colored shadows, but I've run into a lot of errors. I've managed to install Tailwind CSS 3.0 and PostCSS 8.0 as well as react-scripts 5.0.0. Here's my package.json: but when I try to run yarn start, I get this error: |
Beta Was this translation helpful? Give feedback.
-
|
mine is working fine, forgot to mention that i'm using tailwind cli and not postcss for installation |
Beta Was this translation helpful? Give feedback.
-
|
I'm new to tailwind, followed this Tailwind CLI Installation it seems to work fine. |
Beta Was this translation helpful? Give feedback.
-
|
just fyi: we are looking into getting #11717 ready and merged |
Beta Was this translation helpful? Give feedback.
-
Same thing happened when I switched craco with react-scripts |
Beta Was this translation helpful? Give feedback.
-
I was able to get it working by creating a new react application and starting from scratch, but that's not an ideal fix |
Beta Was this translation helpful? Give feedback.
-
|
It says next not found. Is there a package I need for the new alpha? |
Beta Was this translation helpful? Give feedback.
-
|
I managed to get my entire project working with
Some weird things that I still have to figure out:
|
Beta Was this translation helpful? Give feedback.
-
|
This looks very promising! Is there an ETA for an official release? Long time since last official update and there are a lot of deprecated/vulnerable package dependencies in the current official version. |
Beta Was this translation helpful? Give feedback.
-
|
Anytime soon 🎁 |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/facebook/create-react-app/releases/tag/v5.0.0 |
Beta Was this translation helpful? Give feedback.
-
|
Wow, didn't think I'd see the day. 🥳 👏🏿 |
Beta Was this translation helpful? Give feedback.
-
Wow ,5.0 is officially out ? Thanks for your really great job !! |
Beta Was this translation helpful? Give feedback.
-
|
So glad to see it released |
Beta Was this translation helpful? Give feedback.
-
|
Thank you all for your contribution.
|
Beta Was this translation helpful? Give feedback.
-
|
Was the removal of the runtime error overlay intentional? It was a nice feature. |
Beta Was this translation helpful? Give feedback.
-
|
splitChunks config was removed as part of the upgrade from webpack v4 to v5, it seems. See https://webpack.js.org/plugins/split-chunks-plugin/ . |
Beta Was this translation helpful? Give feedback.
-
|
We could try, dont remember if it still works that way in wp5 - but lets see if it could be fixed |
Beta Was this translation helpful? Give feedback.
-
|
I can also confirm that this fixed my chunk problem, too. My |
Beta Was this translation helpful? Give feedback.
-
|
Temporary solution using craco: module.exports = {
webpack: {
configure: (config, { env }) => {
if (env === 'production') {
config.optimization['splitChunks'] = {
chunks: 'all',
};
}
return config;
},
},
}; |
Beta Was this translation helpful? Give feedback.
-
Thanks, I modified node_modules/react-scripts/config/webpack.config.js, and it worked fine for me, just as for @JeremyGrieshop . I also checked webpack 5 documentation, and option is still supported as well as associated parameters. |
Beta Was this translation helpful? Give feedback.
-
|
There may be more experimenting needed, though. It could just be my system, but after adding the Edit: I fixed this problem by making the Edit: Edit: Which is what @GraxMonzo did above, lol. |
Beta Was this translation helpful? Give feedback.
-
|
Just ran the upgrade on a couple of my projects and everything worked like a charm 👌 Thank you for all the efforts in getting this released! |
Beta Was this translation helpful? Give feedback.
-
|
How because when i create new React Project and run 'npm start' it show these blow Asset lines . Please Help... "react-scripts": "5.0.0" yuvra@LAPTOP-5GI5GIT2 MINGW64 ~/Desktop/my-app (master) [email protected] start Starting the development server... Compiled successfully! You can now view my-newapp in the browser. Local: http://lotcalhost:3000 Note that the development build is not optimized. assets by path static/ 1.52 MiB older "react-scripts": "4.0.3" yuvra@LAPTOP-5GI5GIT2 MINGW64 ~/Desktop/my-newapp (master) [email protected] start i ｢wds｣: Project is running at http://192.168.255.149/ Compiled successfully! You can now view my-newapp in the browser. Local: http://localhost:3000 Note that the development build is not optimized. . |
Beta Was this translation helpful? Give feedback.
-
|
After installing latest version of React.js . I get hese assets line(see below). But when I change current react-scripts version 5.0.0 -> 4.0.3 , then run 'npm start' it work without showing assets lines. How I fix it........?????? .Please help, as a Fresher I have limited community support. "react-scripts": "5.0.0" yuvra@LAPTOP-5GI5GIT2 MINGW64 ~/Desktop/my-app (master)
Starting the development server... Compiled successfully! You can now view my-newapp in the browser. Local: http://lotcalhost:3000 Note that the development build is not optimized. assets by path static/ 1.52 MiB older "react-scripts": "4.0.3" yuvra@LAPTOP-5GI5GIT2 MINGW64 ~/Desktop/my-newapp (master)
i ｢wds｣: Project is running at http://192.168.255.149/ Compiled successfully! You can now view my-newapp in the browser. Local: http://localhost:3000 Note that the development build is not optimized. |
Beta Was this translation helpful? Give feedback.
-
|
@ludofischer - Personally, I don't feel like these logs add any value for me during development, and would love for them to be suppressed somehow. Part of the reason I use CRA is so I don't have to deal with Webpack. I have always loved the clean CRA development output. If I see noise like this, my brain immediately thinks there's an error. |
Beta Was this translation helpful? Give feedback.
-
|
thanks @coreyleelarson . That's what I also thinking. |
Beta Was this translation helpful? Give feedback.
-
|
I am writing a book about JavaScript build tools, so I am interested in the issues that people encounter when running webpack. I guess I need to tell how to reduce the webpack output messages! There are more than 30 options documented on the webpack website: https://webpack.js.org/configuration/stats/ |
Beta Was this translation helpful? Give feedback.
-
|
@ludofischer I am aware of the configurations and have used Webpack for years. The issue here is that these messages appear when you run In this case, there is currently no way to disable these output messages since you can't modify the Webpack config out of the box with CRA. The configuration changes would have to be made somewhere within CRA, since it maintains the Webpack config under the hood. |
Beta Was this translation helpful? Give feedback.
-
|
I've opened a pull request to change the stats configuration: #11820 Feel free to chime in with suggestions. Unfortunately CI fails with an error that looks completely unrelated (it cannot download react-overlay). |
Beta Was this translation helpful? Give feedback.
-
|
@raix So testing on a pretty large project, apart from splitChunks (blocker) and ignoreWarnings (for source maps, hundreds of warning, annoyance), things look pretty good to me. Kudos for the work! My 2 changes to webpack.config.js: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback @yann-combarnous we have two pull-requests adressing those issues #11763 #11752 (don't see name: false in the pr though) |
Beta Was this translation helpful? Give feedback.
-
Looks like ‘false’ is the default value in webpack 5, so we should be good |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Hi All, I have updated my package in the React Application to [email protected] On npm start, the application is working but while creating the build, it is throwing the following error. Output:- static/css/main.c713e34d.css from Css Minimizer plugin Any ways to resolve this issue? |
Beta Was this translation helpful? Give feedback.
-
|
@shubhdwiv12 Are you using CSS modules? Could be related to #11775 |
Beta Was this translation helpful? Give feedback.
-
|
are those issues being addressed? it's been 3 months since v5 was released and it seems issues are just accumulating waiting triage. I can't upgrade to tailwindcss v3 because CRA5 seems pretty broken right now. |
Beta Was this translation helpful? Give feedback.
-
|
sure, SVG: #11753 |
Beta Was this translation helpful? Give feedback.
-
|
@wmitsuda thanks for the info. I checked and I don't see anything much different in the code splitting behaviour between CRA 4 and 5 in my app - I had ~24 chunks with CRA 4 and now have ~25 with CRA5 (comparing a late 2021 build with today's), and largest chunk size has decreased. I'm using |
Beta Was this translation helpful? Give feedback.
-
I have a largish project, too., splitting chunks on routes and dynamic imports. My main chunk increased in size from ~120k to ~370k going from CRA4 to CRA5. The splitChunks PR resolves this. |
Beta Was this translation helpful? Give feedback.
-
Hi, I couldnt see where is that ? Thanks |
Beta Was this translation helpful? Give feedback.
-
|
@gunaygultekin you can just search for |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
I have this issue: WARNING in ./node_modules/typescript/lib/typescript.js and this also: WARNING in ./node_modules/typescript/lib/typescript.js 3714:17-38 |
Beta Was this translation helpful? Give feedback.
and others
-
We've just published the first alpha release of Create React App 5 with webpack 5 support. Thanks to @raix for all his work on the webpack 5 upgrade as well as all the other contributors. 🙌
Please test this alpha release and report any issues. This is an early alpha so expect further changes in future releases.
To try the alpha follow these instructions:
JavaScript Template
TypeScript Template
Update Existing App
To update an existing app you can change the
react-scriptsversion inpackage.jsontonextand then runyarnornpm installChanges
You can see a list of all the changes in this release here: https://github.com/facebook/create-react-app/milestone/81?closed=1
Beta Was this translation helpful? Give feedback.
All reactions