{{title}}
|
I got this error on my app.
reproduction
|
{{title}}
|
Can you try deleting your lockfile and node_modules folder, and reinstalling? |
{{title}}
|
@mrmckeb I tried it, but got same result 🤣 |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
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 workbox-webpack-plugin to 6.2.0 #11293 |
{{title}}
|
@raix thanks guiding me. First try only apply "resolutions": {
"workbox-build": "6.1.5"
},
And then worked yarn start, yarn build but terminal console full filled below message. to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Second try with both resolution lock by "resolutions": {
"workbox-build": "6.1.5",
"workbox-webpack-plugin": "6.2.0"
},
After that yarn start working without any waring message, but yarn build process finished with bellow message. ryota.murakami@MacBook-Pro ~/laststalce/create-react-app-typescript-todo-example-2021 (master) [SIGINT]> yarn build yarn run v1.22.10 $ react-scripts build Creating an optimized production build... Compiled with the following type errors (you may want to check these before deploying your app): ✨ Done in 8.64s. 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 cd fixtures/create-react-app-typescript-todo-example-2021 && yarn link react-scripts working in a local, I'll push PR several our ago from now. |
{{title}}
|
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 rm -rf node_modules/.cache I would expect the message to appear again) 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 :) |
{{title}}
|
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.. |
{{title}}
|
@raix I'm sorry I said create version up regression test and push PR, but my yarn link not working correctly so I couldn't made it finally. 😭 |
{{title}}
|
@raix This seems to work with yarn install && yarn start but from what I can tell there's still an issue when using npm install && npm start. Using yarn exclusively with the resolutions set is a good workaround for me temporarily. In my app I'm actually seeing the yarn start command fail when it previously succeeded simply because I ran the npm install command which created a lock file for package.json so the lock file seems to bork it. Maybe it's my local but also maybe something to look into. |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
@raix Thank you, finally worked correctly yarn start, yarn build in local and There is no trouble at ALL CI tasks !
I see, let you try git commit --allow-empty in main branch and push to kick CI? |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
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"
}, |
{{title}}
|
fixed on main now |
{{title}}
|
It cannot work with yarn start after I add a ModuleFederationPlugin in the webpack.config.js. new webpack.container.ModuleFederationPlugin({
name: "external",
filename: "remoteEntry.js",
exposes: {
"./App": "./src/App",
},
};
), |
{{title}}
This is not a CRA5 problem. |
{{title}}
|
See #9510 for module federation support |
{{title}}
|
module federation support requires a newer version of @pmmmwh/react-refresh-webpack-plugin, solve it by upgrade it to 0.5.0-rc.4 "resolutions": {
"workbox-webpack-plugin": "6.2.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.4"
}
|
{{title}}
|
The broken workbox package is now fixed on main |
{{title}}
|
Tried using CRA@next this morning. Seems to be experiencing some ESLinting issues currently eslint-config-react-app. $ react-scripts start
Starting the development server...
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel
/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can sile
nce this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel
/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can sile
nce this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel
/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can sile
nce this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Failed to compile.
Failed to load plugin 'import' declared in 'package.json » eslint-config-react-app': Cannot find module 'D:\Projects\FireFly Monorepo\my-js-app\node_modules\eslint-plugin-import\lib\index.js'. Please verify that
the package.json has a valid "main" entry
Require stack:
- D:\Projects\FireFly Monorepo\my-js-app\node_modules\eslint-config-react-app\index.js
assets by path static/ 1.5 MiB
asset static/js/bundle.js 1.49 MiB [emitted] (name: main) 1 related asset
asset static/js/node_modules_web-vitals_dist_web-vitals_es5_min_js.chunk.js 5.35 KiB [emitted] 1 related asset
asset static/media/logo.103b5fa18196d5665a7e12318285c916.svg 2.61 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 578 bytes [emitted]
runtime modules 30.7 KiB 16 modules
modules by path ./node_modules/ 1.37 MiB 88 modules
modules by path ./src/ 24 KiB
modules by path ./src/*.css 9.83 KiB
./src/index.css 3.22 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/react-scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-
loader/dist/cjs.js!./src/index.css 1.39 KiB [built] [code generated]
./src/App.css 3.21 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/react-scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-
loader/dist/cjs.js!./src/App.css 2.02 KiB [built] [code generated]
modules by path ./src/*.js 10.6 KiB
./src/index.js 3.44 KiB [built] [code generated]
./src/App.js 4.15 KiB [built] [code generated]
./src/reportWebVitals.js 3 KiB [built] [code generated]
./src/logo.svg 3.59 KiB [built] [code generated]
ERROR in Failed to load plugin 'import' declared in 'package.json » eslint-config-react-app': Cannot find module 'D:\Projects\FireFly Monorepo\my-js-app\node_modules\eslint-plugin-import\lib\index.js'. Please ve
rify that the package.json has a valid "main" entry
Require stack:
- D:\Projects\FireFly Monorepo\my-js-app\node_modules\eslint-config-react-app\index.js
webpack 5.41.1 compiled with 1 error in 7194 ms
Package.json {
"name": "my-js-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0-next.31",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
|
{{title}}
|
@KrisStadler This should be helpful. |
{{title}}
|
Thank you, will take a look |
{{title}}
|
babel warnings should be fixed on main now |
{{title}}
|
Can there be another release with this fix? |
{{title}}
|
Hello! Great work! I got it working, however with some issues and workarounds. Like you said before: "resolutions": {
"workbox-webpack-plugin": "6.2.0"
}
The major issue I have right know is with sourcemaps: Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/XXX/src/FrontendModule/node_modules/src/wizard/wizard-navigation.tsx' file: Error: ENOENT: no such file or directory, open '/XXX/src/FrontendModule/node_modules/src/wizard/wizard-navigation.tsx'
@ ./node_modules/@company/components-react/xxxx/wizard/index.js 11:0-51 90:25-41
Looks like it doesn't take into account that the path is relative or something like that. process.env.GENERATE_SOURCEMAP = 'false'; |
{{title}}
Warning:
src/MicroFrontend.tsx
<span style="font-weight:bold;">Line 1:21:</span> 'useState' is defined but never used <span style="color:#FFD080;"><u>@typescript-eslint/no-unused-vars</u></span>
|
{{title}}
|
The error overlay formatting is fixed in webpack - waiting for a release of webpack-dev-server |
{{title}}
|
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) |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
Created a PR: #11318 |
{{title}}
|
Webpack 5 support? Might need to fix this first: |
{{title}}
|
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 resolve.alias. |
{{title}}
|
Sounds like the react runtime module export should be fixed instead? |
{{title}}
|
It's as simple as adding the exports field. It's present in React 18 alphas, so it could be backported. |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
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) |
{{title}}
|
Thanks! Much appreciated. Once this is fixed upstream, it'll allow more people to safely enable the new JSX runtime in babel. |
{{title}}
|
Has anyone been able to get this to work with Storybook? I believe storybook needs webpack 4. |
{{title}}
|
I was able to update our storybook project with "react-scripts": "5.0.0-next.37" |
{{title}}
|
Do we have a date for releasing next alpha? It'd be helpful to get rid of "resolutions" and better webpack-dev-server. |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
📣 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 create-react-app and use the corresponding package manager. 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 |
{{title}}
|
Is there (or will there be) a way to configure fallbacks for node builtins without needing to eject? BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
|
{{title}}
|
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. |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
Can anyone point to a solution to this? Any project using capacitor, rxdb or crypto-js will encounter this issue. The proposed solution error message requires adding lines to webpack.config.js. Does that mean you'd have to eject and use something like craco (which as far as I can tell, is not compatible with CRA 5)? EDIT: module.exports = {
webpack: {
configure: {
resolve: {
fallback: {
path: require.resolve("path-browserify"),
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
},
},
},
},
};
|
{{title}}
Did you have to use the alpha version? |
{{title}}
|
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)` |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
postcss-normalize: "10.0.1" released and it fixes the issue
|
{{title}}
|
@AndreiBehel Thanks, this is now resolved in #11338 |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
Hi @iansu , We need a new release in order to try out the new jest 27 in the create react app. |
{{title}}
|
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:
Starting the development server...
Failed to compile.
Error: [BABEL] \my-app\src\index.tsx: babel-preset-react-app tried to access @babel/plugin-proposal-private-property-in-object, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: @babel/plugin-proposal-private-property-in-object (via "@babel\plugin-proposal-private-property-in-object")
Required by: babel-preset-react-app@npm:11.0.0-next.102 (via \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\)
Require stack:
- \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\create.js
- \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\index.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\module-types.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\configuration.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\index.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\index.js
- \my-app\.yarn\__virtual__\@rollup-plugin-babel-virtual-a4dbb1aebf\0\cache\@rollup-plugin-babel-npm-5.3.0-944843ffd9-6cfd741790.zip\node_modules\@rollup\plugin-babel\dist\index.js
- \my-app\.yarn\cache\workbox-build-npm-6.4.2-83cd657f6a-3c8d45899b.zip\node_modules\workbox-build\build\lib\bundle.js
- \my-app\.yarn\__virtual__\workbox-webpack-plugin-virtual-2e47b79a2e\0\cache\workbox-webpack-plugin-npm-6.4.2-249a27d315-86af4791ba.zip\node_modules\workbox-webpack-plugin\build\generate-sw.js
- \my-app\.yarn\__virtual__\workbox-webpack-plugin-virtual-2e47b79a2e\0\cache\workbox-webpack-plugin-npm-6.4.2-249a27d315-86af4791ba.zip\node_modules\workbox-webpack-plugin\build\index.js
- \my-app\.yarn\__virtual__\react-scripts-virtual-d67c5a3934\0\cache\react-scripts-npm-5.0.0-next.58-7129443d32-888b77d2a3.zip\node_modules\react-scripts\config\webpack.config.js
- \my-app\.yarn\__virtual__\react-scripts-virtual-d67c5a3934\0\cache\react-scripts-npm-5.0.0-next.58-7129443d32-888b77d2a3.zip\node_modules\react-scripts\scripts\start.js (While processing: "C:\\Programming\\JS\\React\\chatbox-website\\.yarn\\cache\\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\\node_modules\\babel-preset-react-app\\index.js")
at Generator.next (<anonymous>)
asset static/js/bundle.js 407 KiB [emitted] (name: main) 1 related asset
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 190 bytes [emitted]
runtime modules 28.3 KiB 14 modules
modules by path ./.yarn/unplugged/core-js-pure-npm-3.19.3-59164e0a0b/node_modules/core-js-pure/ 22.6 KiB
modules by path ./.yarn/unplugged/core-js-pure-npm-3.19.3-59164e0a0b/node_modules/core-js-pure/internals/*.js 22.1 KiB 45 modules
modules by path ./.yarn/unplugged/core-js-pure-npm-3.19.3-59164e0a0b/node_modules/core-js-pure/modules/*.js 272 bytes 2 modules
3 modules
modules by path ./.yarn/__virtual__/ 63.3 KiB
modules by path ./.yarn/__virtual__/webpack-dev-server-virtual-aa3c65c020/0/cache/webpack-dev-server-npm-4.6.0-cc0bd1a814-941ecdc7bf.zip/node_modules/webpack-dev-server/client/ 58.1 KiB 12 modules
modules by path ./.yarn/__virtual__/webpack-virtual-95137c5b4c/0/cache/webpack-npm-5.65.0-da658c1b49-221ab8ccd4.zip/node_modules/webpack/hot/*.js 4.4 KiB 4 modules
./.yarn/__virtual__/@pmmmwh-react-refresh-webpack-plugin-virtual-46b4d4008e/0/cache/@pmmmwh-react-refresh-webpack-plugin-npm-0.5.3-5e89afeba9-0422329886.zip/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js 849 bytes [built] [code generated]
modules by path ./.yarn/cache/ 199 KiB 14 modules
./src/index.tsx 39 bytes [built] [code generated] [1 error]
ERROR in ./src/index.tsx
Module build failed (from ./.yarn/__virtual__/babel-loader-virtual-03427e87ce/0/cache/babel-loader-npm-8.2.3-855681b984-78e1e1a919.zip/node_modules/babel-loader/lib/index.js):
Error: [BABEL] \my-app\src\index.tsx: babel-preset-react-app tried to access @babel/plugin-proposal-private-property-in-object, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: @babel/plugin-proposal-private-property-in-object (via "@babel\plugin-proposal-private-property-in-object")
Required by: babel-preset-react-app@npm:11.0.0-next.102 (via \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\)
Require stack:
- \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\create.js
- \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\index.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\module-types.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\configuration.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\index.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\index.js
- \my-app\.yarn\__virtual__\@rollup-plugin-babel-virtual-a4dbb1aebf\0\cache\@rollup-plugin-babel-npm-5.3.0-944843ffd9-6cfd741790.zip\node_modules\@rollup\plugin-babel\dist\index.js
- \my-app\.yarn\cache\workbox-build-npm-6.4.2-83cd657f6a-3c8d45899b.zip\node_modules\workbox-build\build\lib\bundle.js
- \my-app\.yarn\__virtual__\workbox-webpack-plugin-virtual-2e47b79a2e\0\cache\workbox-webpack-plugin-npm-6.4.2-249a27d315-86af4791ba.zip\node_modules\workbox-webpack-plugin\build\generate-sw.js
- \my-app\.yarn\__virtual__\workbox-webpack-plugin-virtual-2e47b79a2e\0\cache\workbox-webpack-plugin-npm-6.4.2-249a27d315-86af4791ba.zip\node_modules\workbox-webpack-plugin\build\index.js
- \my-app\.yarn\__virtual__\react-scripts-virtual-d67c5a3934\0\cache\react-scripts-npm-5.0.0-next.58-7129443d32-888b77d2a3.zip\node_modules\react-scripts\config\webpack.config.js
- \my-app\.yarn\__virtual__\react-scripts-virtual-d67c5a3934\0\cache\react-scripts-npm-5.0.0-next.58-7129443d32-888b77d2a3.zip\node_modules\react-scripts\scripts\start.js (While processing: "C:\\Programming\\JS\\React\\chatbox-website\\.yarn\\cache\\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\\node_modules\\babel-preset-react-app\\index.js")
at Function.external_module_.Module._resolveFilename (\my-app\.pnp.cjs:28462:55)
at Function.external_module_.Module._load (\my-app\.pnp.cjs:28261:48)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at module.exports (\my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\create.js:168:9)
at module.exports (\my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\index.js:19:10)
at async (\my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\gensync-utils\async.js:44:33)
at async (\my-app\.yarn\cache\gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip\node_modules\gensync\index.js:186:15)
at \my-app\.yarn\cache\gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip\node_modules\gensync\index.js:216:13
at Generator.next (<anonymous>)
ERROR in package.json » eslint-config-react-app/jest#overrides[0]:
Environment key "jest/globals" is unknown
webpack 5.65.0 compiled with 2 errors in 6811 ms
ERROR in src/App.test.tsx:8:23
TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
6 | render(<App />);
7 | const linkElement = screen.getByText(/learn react/i);
> 8 | expect(linkElement).toBeInTheDocument();
| ^^^^^^^^^^^^^^^^^
9 | });
10 |
Failed to compile.
Error: [BABEL] \my-app\src\index.tsx: babel-preset-react-app tried to access @babel/plugin-proposal-private-property-in-object, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: @babel/plugin-proposal-private-property-in-object (via "@babel\plugin-proposal-private-property-in-object")
Required by: babel-preset-react-app@npm:11.0.0-next.102 (via \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\)
Require stack:
- \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\create.js
- \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\index.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\module-types.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\configuration.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\index.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\index.js
- \my-app\.yarn\__virtual__\@rollup-plugin-babel-virtual-a4dbb1aebf\0\cache\@rollup-plugin-babel-npm-5.3.0-944843ffd9-6cfd741790.zip\node_modules\@rollup\plugin-babel\dist\index.js
- \my-app\.yarn\cache\workbox-build-npm-6.4.2-83cd657f6a-3c8d45899b.zip\node_modules\workbox-build\build\lib\bundle.js
- \my-app\.yarn\__virtual__\workbox-webpack-plugin-virtual-2e47b79a2e\0\cache\workbox-webpack-plugin-npm-6.4.2-249a27d315-86af4791ba.zip\node_modules\workbox-webpack-plugin\build\generate-sw.js
- \my-app\.yarn\__virtual__\workbox-webpack-plugin-virtual-2e47b79a2e\0\cache\workbox-webpack-plugin-npm-6.4.2-249a27d315-86af4791ba.zip\node_modules\workbox-webpack-plugin\build\index.js
- \my-app\.yarn\__virtual__\react-scripts-virtual-d67c5a3934\0\cache\react-scripts-npm-5.0.0-next.58-7129443d32-888b77d2a3.zip\node_modules\react-scripts\config\webpack.config.js
- \my-app\.yarn\__virtual__\react-scripts-virtual-d67c5a3934\0\cache\react-scripts-npm-5.0.0-next.58-7129443d32-888b77d2a3.zip\node_modules\react-scripts\scripts\start.js (While processing: "C:\\Programming\\JS\\React\\chatbox-website\\.yarn\\cache\\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\\node_modules\\babel-preset-react-app\\index.js")
at Generator.next (<anonymous>)
assets by chunk 407 KiB (name: main)
asset static/js/bundle.js 407 KiB [emitted] (name: main) 1 related asset
asset main.99d0eb3a83bf91e3fdc3.hot-update.js 366 bytes [emitted] [immutable] [hmr] (name: main) 1 related asset
assets by path *.json 343 bytes
asset asset-manifest.json 315 bytes [emitted]
asset main.99d0eb3a83bf91e3fdc3.hot-update.json 28 bytes [emitted] [immutable] [hmr]
asset index.html 1.67 KiB [emitted]
Entrypoint main 407 KiB (370 KiB) = static/js/bundle.js 407 KiB main.99d0eb3a83bf91e3fdc3.hot-update.js 366 bytes 2 auxiliary assets
cached modules 285 KiB [cached] 81 modules
runtime modules 28.3 KiB 14 modules
./src/index.tsx 39 bytes [built] [1 error]
ERROR in ./src/index.tsx
Module build failed (from ./.yarn/__virtual__/babel-loader-virtual-03427e87ce/0/cache/babel-loader-npm-8.2.3-855681b984-78e1e1a919.zip/node_modules/babel-loader/lib/index.js):
Error: [BABEL] \my-app\src\index.tsx: babel-preset-react-app tried to access @babel/plugin-proposal-private-property-in-object, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: @babel/plugin-proposal-private-property-in-object (via "@babel\plugin-proposal-private-property-in-object")
Required by: babel-preset-react-app@npm:11.0.0-next.102 (via \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\)
Require stack:
- \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\create.js
- \my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\index.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\module-types.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\configuration.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\config\files\index.js
- \my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\index.js
- \my-app\.yarn\__virtual__\@rollup-plugin-babel-virtual-a4dbb1aebf\0\cache\@rollup-plugin-babel-npm-5.3.0-944843ffd9-6cfd741790.zip\node_modules\@rollup\plugin-babel\dist\index.js
- \my-app\.yarn\cache\workbox-build-npm-6.4.2-83cd657f6a-3c8d45899b.zip\node_modules\workbox-build\build\lib\bundle.js
- \my-app\.yarn\__virtual__\workbox-webpack-plugin-virtual-2e47b79a2e\0\cache\workbox-webpack-plugin-npm-6.4.2-249a27d315-86af4791ba.zip\node_modules\workbox-webpack-plugin\build\generate-sw.js
- \my-app\.yarn\__virtual__\workbox-webpack-plugin-virtual-2e47b79a2e\0\cache\workbox-webpack-plugin-npm-6.4.2-249a27d315-86af4791ba.zip\node_modules\workbox-webpack-plugin\build\index.js
- \my-app\.yarn\__virtual__\react-scripts-virtual-d67c5a3934\0\cache\react-scripts-npm-5.0.0-next.58-7129443d32-888b77d2a3.zip\node_modules\react-scripts\config\webpack.config.js
- \my-app\.yarn\__virtual__\react-scripts-virtual-d67c5a3934\0\cache\react-scripts-npm-5.0.0-next.58-7129443d32-888b77d2a3.zip\node_modules\react-scripts\scripts\start.js (While processing: "C:\\Programming\\JS\\React\\chatbox-website\\.yarn\\cache\\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\\node_modules\\babel-preset-react-app\\index.js")
at Function.external_module_.Module._resolveFilename (\my-app\.pnp.cjs:28462:55)
at Function.external_module_.Module._load (\my-app\.pnp.cjs:28261:48)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at module.exports (\my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\create.js:168:9)
at module.exports (\my-app\.yarn\cache\babel-preset-react-app-npm-11.0.0-next.102-7df67c31cc-9bea185718.zip\node_modules\babel-preset-react-app\index.js:19:10)
at async (\my-app\.yarn\cache\@babel-core-npm-7.16.0-5612f0ce31-a140f669da.zip\node_modules\@babel\core\lib\gensync-utils\async.js:44:33)
at async (\my-app\.yarn\cache\gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip\node_modules\gensync\index.js:186:15)
at \my-app\.yarn\cache\gensync-npm-1.0.0-beta.2-224666d72f-a7437e58c6.zip\node_modules\gensync\index.js:216:13
at Generator.next (<anonymous>)
ERROR in Failed to load plugin 'jest' declared in 'package.json » eslint-config-react-app/jest': eslint-config-react-app tried to access eslint-plugin-jest (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.
Required package: eslint-plugin-jest
Required by: eslint-config-react-app@virtual:6553b70c68080267e60c036443857345284750221e47adda77f64ec65140342d17bf9416ba131a8a7a9d2c130fe1c98f9b780f525ab70a9468fb27248f34ac4c#npm:6.0.0 (via \my-app\.yarn\__virtual__\eslint-config-react-app-virtual-103c002d64\0\cache\eslint-config-react-app-npm-6.0.0-c5908e735c-b265852455.zip\node_modules\eslint-config-react-app\)
Ancestor breaking the chain: chatbox-website@workspace:.
Require stack:
- \my-app\.yarn\__virtual__\eslint-config-react-app-virtual-103c002d64\0\cache\eslint-config-react-app-npm-6.0.0-c5908e735c-b265852455.zip\node_modules\eslint-config-react-app\jest.js
webpack 5.65.0 compiled with 2 errors in 161 ms
ERROR in src/App.test.tsx:8:23
TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
6 | render(<App />);
7 | const linkElement = screen.getByText(/learn react/i);
> 8 | expect(linkElement).toBeInTheDocument();
| ^^^^^^^^^^^^^^^^^
9 | });
10 |
I don't know if the first 8 steps are necessary, but when I try running |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
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: {
"name": "portfolio",
"version": "0.1.0",
"private": true,
"homepage": "https://bpyle02.github.io/portfolio",
"dependencies": {
"@craco/craco": "^6.4.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"add": "^2.0.6",
"aos": "^3.0.0-beta.6",
"autoprefixer": "9",
"postcss": "^8.4.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icon": "^1.0.0",
"react-icons": "^4.3.1",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "^5.0.0-next.58",
"react-scroll-into-view": "^1.10.1",
"scroll-into-view": "^1.16.0",
"tailwindcss": "^3.0.0-alpha.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.2.3"
},
"resolutions": {
"workbox-webpack-plugin": "6.2.0"
}
}
but when I try to run yarn start, I get this error: yarn run v1.22.10$
craco start
(node:21476) UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function
at extendsPostcss (C:\Users\Mail4\OneDrive\Documents\Programming\ReactJS Projects\portfolio\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:54:51)
at overrideLoader (C:\Users\Mail4\OneDrive\Documents\Programming\ReactJS Projects\portfolio\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:97:9)
at C:\Users\Mail4\OneDrive\Documents\Programming\ReactJS Projects\portfolio\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:118:13
at Array.forEach (<anonymous>)
at overridePostcss (C:\Users\Mail4\OneDrive\Documents\Programming\ReactJS Projects\portfolio\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:117:17)
at overrideStyle (C:\Users\Mail4\OneDrive\Documents\Programming\ReactJS Projects\portfolio\node_modules\@craco\craco\lib\features\webpack\style\style.js:9:25)
at mergeWebpackConfig (C:\Users\Mail4\OneDrive\Documents\Programming\ReactJS Projects\portfolio\node_modules\@craco\craco\lib\features\webpack\merge-webpack-config.js:77:30)
at overrideWebpackDev (C:\Users\Mail4\OneDrive\Documents\Programming\ReactJS Projects\portfolio\node_modules\@craco\craco\lib\features\webpack\override.js:11:36)
at C:\Users\Mail4\OneDrive\Documents\Programming\ReactJS Projects\portfolio\node_modules\@craco\craco\scripts\start.js:27:5
(Use `node --trace-warnings ...` to show where the warning was created)
(node:21476) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:21476) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Done in 4.06s.
|
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
mine is working fine, forgot to mention that i'm using tailwind cli and not postcss for installation |
{{title}}
|
I'm new to tailwind, followed this Tailwind CLI Installation ...
"scripts": {
"dev:css": "tailwindcss -i ./src/index.css -o ./src/app.css --watch",
...
it seems to work fine. |
{{title}}
|
just fyi: we are looking into getting #11717 ready and merged |
{{title}}
Same thing happened when I switched craco with react-scripts |
{{title}}
I was able to get it working by creating a new react application and starting from scratch, but that's not an ideal fix |
{{title}}
|
It says next not found. Is there a package I need for the new alpha? |
{{title}}
|
I managed to get my entire project working with react-scripts@5.0.0-next.58+657739fb and wanted to try and document my journey in case anyone else runs into these types of things. My project is a rather complex monorepo with lots of component libraries and apps that have evolved a ton over the last 4 years:
Some weird things that I still have to figure out:
|
{{title}}
|
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. |
{{title}}
|
Anytime soon 🎁 |
{{title}}
{{title}}
|
Wow, didn't think I'd see the day. 🥳 👏🏿 |
{{title}}
Wow ,5.0 is officially out ? Thanks for your really great job !! |
{{title}}
|
So glad to see it released |
{{title}}
|
Thank you all for your contribution.
|
{{title}}
|
Was the removal of the runtime error overlay intentional? It was a nice feature. |
{{title}}
|
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/ . |
{{title}}
|
We could try, dont remember if it still works that way in wp5 - but lets see if it could be fixed |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
I can also confirm that this fixed my chunk problem, too. My main chunk shrunk by 100k with this configuration fix applied to node_modules/react-scripts/config/webpack.config.js. |
{{title}}
|
Temporary solution using craco: module.exports = {
webpack: {
configure: (config, { env }) => {
if (env === 'production') {
config.optimization['splitChunks'] = {
chunks: 'all',
};
}
return config;
},
},
}; |
{{title}}
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. |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
There may be more experimenting needed, though. It could just be my system, but after adding the splitChunks option, the react-scripts start dev server gets stuck in "Starting the development server". Removing splitChunks instantly fixes it. Edit: I fixed this problem by making the splitChunks conditional: splitChunks: isEnvDevelopment ? undefined : {
chunks: 'all'
},
Edit: Edit: Which is what @GraxMonzo did above, lol. |
{{title}}
|
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! |
{{title}}
|
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) my-newapp@0.1.0 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) my-newapp@0.1.0 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. . |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
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. |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
@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. |
{{title}}
|
thanks @coreyleelarson . That's what I also thinking. |
{{title}}
|
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/ |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
@ludofischer I am aware of the configurations and have used Webpack for years. The issue here is that these messages appear when you run react-scripts start with CRA 5. 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. |
{{title}}
|
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). |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
|
@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: ignoreWarnings: [/Failed to parse source map/],
optimization: {
...
splitChunks: isEnvDevelopment ? undefined : {
chunks: 'all',
name: false,
},
}
|
{{title}}
|
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) |
{{title}}
{{editor}}'s edit
{{editor}}'s edit
Looks like ‘false’ is the default value in webpack 5, so we should be good |
{{title}}
|
ignoreWarnings: [/Failed to parse source map/], helped a lot, thanks! |
{{title}}
|
Hi All, I have updated my package in the React Application to react-script@5.0.0 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? |
{{title}}
|
@shubhdwiv12 Are you using CSS modules? Could be related to #11775 |
{{title}}
|
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. |
{{title}}
|
sure, SVG: #11753 |
{{title}}
|
@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 React.lazy. No other special config for code splitting (in particular, I didn't need to add anything to craco as per the comments above). |
{{title}}
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. |
{{title}}
Hi, I couldnt see where is that ? Thanks |
{{title}}
|
@gunaygultekin you can just search for craco on this page. |
{{title}}
|
{{title}}
|
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 |
Uh oh!
There was an error while loading. Please reload this page.
{{title}}
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
{{editor}}'s edit
{{editor}}'s edit
Uh oh!
There was an error while loading. Please reload this page.
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-scripts version in package.json to next and then run yarn or npm install
Changes
You can see a list of all the changes in this release here: https://github.com/facebook/create-react-app/milestone/81?closed=1