Create React App 5 Alpha

[iansu]

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

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

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

[ryota-murakami]

I got this error on my app.

reproduction

1. npx degit laststance/create-react-app-typescript-todo-example-2021 create-react-app-typescript-todo-example-2021
2. cd create-react-app-typescript-todo-example-2021
3. open page.json and set next version at react-scrips field
4. yarn start

[mrmckeb]

Can you try deleting your lockfile and node_modules folder, and reinstalling?

[ryota-murakami]

@mrmckeb I tried it, but got same result 🤣

[raix]

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

[ryota-murakami]

@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.
Might be emitting App bundling is successful somehow.

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.

• register yarn link /react-scripts dir as a "react-scripts" package
• cd fixtures/create-react-app-typescript-todo-example-2021 && yarn link react-scripts
• yarn start
• yarn build
• yarn lint
• yarn test
• yarn typescript
• yarn cypressE2E

Off course cd fixtures/create-react-app-typescript-todo-example-2021 && yarn link react-scripts working in a local,
T think this fixture is strong option for simulate actual release and easy to detect such as fragile dependency issues.

I'll push PR several our ago from now.

[raix]

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

[raix]

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

[ryota-murakami]

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

[christopherrobin]

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

[ryota-murakami]

@raix Thank you, finally worked correctly yarn start, yarn build in local and There is no trouble at ALL CI tasks !

I would actualy suspect that running our currect test suite would also fail as the workbox-webpack-plugin 6.1.5 is now broken..

I see, let you try git commit --allow-empty in main branch and push to kick CI?

[ryanknight09]

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"
  },

[raix]

fixed on main now

[lomocc]

It cannot work with yarn start after I add a ModuleFederationPlugin in the webpack.config.js.
but its worked correctly with yarn build

new webpack.container.ModuleFederationPlugin({
  name: "external",
  filename: "remoteEntry.js",
  exposes: {
    "./App": "./src/App",
  },
};
),

https://github.com/lomocc/react-app-webpack5

[ryota-murakami]

I add a ModuleFederationPlugin in the webpack.config.js

This is not a CRA5 problem.
Please post no custom CRA5's error and bug.

[raix]

See #9510 for module federation support

[lomocc]

module federation support requires a newer version of @pmmmwh/react-refresh-webpack-plugin, solve it by upgrade it to 0.5.0-rc.4

#9510 (comment)

"resolutions": {
  "workbox-webpack-plugin": "6.2.0",
  "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.4"
}

[raix]

The broken workbox package is now fixed on main

[KrisStadler]

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"
    ]
  }
}

[ryota-murakami]

@KrisStadler This should be helpful.
eslint/eslint#13283

[KrisStadler]

Thank you, will take a look

[raix]

babel warnings should be fixed on main now

[icecream17]

Can there be another release with this fix?

[th7nder]

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.
Manged to solve it by setting:

process.env.GENERATE_SOURCEMAP = 'false';

[th7nder]

• when webpack compiles with warnings I don't have a formatted output, but raw output.

Warning:


src/MicroFrontend.tsx
  <span style="font-weight:bold;">Line 1:21:</span>  &apos;useState&apos; is defined but never used  <span style="color:#FFD080;"><u>@typescript-eslint/no-unused-vars</u></span>

[raix]

The error overlay formatting is fixed in webpack - waiting for a release of webpack-dev-server

[raix]

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)

[th7nder]

Created a PR: #11318

[nstepien]

Webpack 5 support? Might need to fix this first:
react/react#20235

[nstepien]

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.
But that won't fix the server-side side of things as there's no way to configure how node will import it afaik.
There are more details in the issue.

[raix]

Sounds like the react runtime module export should be fixed instead?

[nstepien]

It's as simple as adding the exports field.
react/react#20235 (comment)

It's present in React 18 alphas, so it could be backported.
https://github.com/facebook/react/blob/main/packages/react/package.json#L23

[raix]

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)

[nstepien]

Thanks! Much appreciated.

Once this is fixed upstream, it'll allow more people to safely enable the new JSX runtime in babel.
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
https://babeljs.io/blog/2020/03/16/7.9.0
https://babeljs.io/docs/en/babel-preset-react#runtime
https://github.com/adazzle/react-data-grid/blob/main/babel.config.json#L13
This setting could then be enabled in CRA as well if it's not already.

[JeremyGrieshop]

Has anyone been able to get this to work with Storybook? I believe storybook needs webpack 4.

[DURK]

I was able to update our storybook project with "react-scripts": "5.0.0-next.37"
I'm on the beta version of Storybook 6.4.0 though, but I'm not sure if that's required. "@storybook/react": "^6.4.0-beta.0"

[th7nder]

Do we have a date for releasing next alpha? It'd be helpful to get rid of "resolutions" and better webpack-dev-server.

[iansu]

📣 We've released a new alpha version with the following changes:

• Upgrade workbox-webpack-plugin
• Upgrade webpack-dev-server
• Upgrade @pmmmwh/react-refresh-webpack-plugin

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

[TuckerWhitehouse]

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 }

[raix]

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.

[DURK]

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:
Found out that craco just works for CRA 5 as well. This solves the issues with BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.. My craco.config.js:

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          path: require.resolve("path-browserify"),
          crypto: require.resolve("crypto-browserify"),
          stream: require.resolve("stream-browserify"),
        },
      },
    },
  },
};

[keithpickering]

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:
Found out that craco just works for CRA 5 as well. This solves the issues with BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.. My craco.config.js:

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          path: require.resolve("path-browserify"),
          crypto: require.resolve("crypto-browserify"),
          stream: require.resolve("stream-browserify"),
        },
      },
    },
  },
};

Did you have to use the alpha version?

[AndreiBehel]

I've tried to start CRA with typescript and got following error
`Compiled with problems:X

Error:

Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'sanitize.css/page.css'
Require stack:

• /home/andrei/Projects/my-ts-app/node_modules/postcss-normalize/index.cjs

(@/home/andrei/Projects/my-ts-app/src/App.css)

Error:

Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'sanitize.css/page.css'
Require stack:

• /home/andrei/Projects/my-ts-app/node_modules/postcss-normalize/index.cjs

(@/home/andrei/Projects/my-ts-app/src/index.css)`

[AndreiBehel]

postcss-normalize: "10.0.1" released and it fixes the issue

10.0.1 (September 15, 2021)
Added: sanitize.css to support 13+ (major).
This version removes support for pages.css yet is released as a patch version to resolve issues in Create React App. This is a betrayal of semantic versioning.

[krreet]

@AndreiBehel Thanks, this is now resolved in #11338

[krreet]

Hi @iansu , We need a new release in order to try out the new jest 27 in the create react app.

[SammyWhamy]

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:

• Create a new folder
• yarn set version berry
• yarn dlx create-react-app --template=typescript my-app
• yarn start
• Observe Failed to load config "react-app" to extend from. error.
• yarn add eslint-config-react-app -D
• yarn start
• Observe a correctly working react app
• Set "react-scripts": "next"
• yarn start
• Observe a lot of errors, starting with 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.

Full log of errors, truncated file paths for readability

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
yarn dlx create-react-app@next --scripts-version=@next --template=typescript@next my-app
In exactly the same way as the stable version, I get this error instead:
Usage Error: The project in \projectsFolder\package.json doesn't seem to have been installed - running an install there might help
This pretty much tells me to run an install in the root folder of my projects (Not a single project folder), obviously running the command doesn't do anything, and so this error doesn't get resolved either.

[bpyle02]

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.

[adnan-sheikh]

mine is working fine, forgot to mention that i'm using tailwind cli and not postcss for installation

[adnan-sheikh]

I'm new to tailwind, followed this Tailwind CLI Installation
I added a script in package.json:

...
"scripts": {
    "dev:css": "tailwindcss -i ./src/index.css -o ./src/app.css --watch",
...

it seems to work fine.

[raix]

just fyi: we are looking into getting #11717 ready and merged

[bpyle02]

Switched out craco for react-scripts, now my site has no CSS. Did I miss something?

Same thing happened when I switched craco with react-scripts

[bpyle02]

Switched out craco for react-scripts, now my site has no CSS. Did I miss something?

Same thing happened when I switched craco with react-scripts

I was able to get it working by creating a new react application and starting from scratch, but that's not an ideal fix

[talmax1124]

It says next not found. Is there a package I need for the new alpha?

[JeremyGrieshop]

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:

• I first removed any package dependencies that relied on react-scripts being a specific version, or webpack being a specific version. This meant temporarily removing any storybook packages for me, as well as customize-cra and react-app-rewired. After your npm install verify you don't have webpack 4 in there using npm ls webpack.
• webpack 5 doesn't include some node polyfills anymore. For example, I had some code that imported from util. I now have to npm install util to get that included.
• One of my apps was built with create-react-app like 4 years ago. Somewhere along the line, I had an old .eslintrc.js and .eslintrc.json in there, which caused problems when it tried to resolve babel-eslint. Funny enough, I simply removed them and now my project is picking up errors that I had no idea I had before! It may be helpful to create a brand new react project with instructions at the top of this thread and examine the files it creates. If you have stuff it no longer has, you may be able to get rid of them.

Some weird things that I still have to figure out:

• My bundle sizes seem off. I have one bundle that is at least 100k larger than previous builds.
• react-scripts start produces a bunch of webpack otuput that didn't before. Including huge globs of base64 images out to my console.

[SimonDamberg]

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.

[raix]

Anytime soon 🎁

[yeion7]

https://github.com/facebook/create-react-app/releases/tag/v5.0.0

[dons20]

Wow, didn't think I'd see the day. 🥳 👏🏿

[OriAmir]

Anytime soon 🎁

Wow ,5.0 is officially out ?
I thought should be another alpha and then beta , really surprised.

Thanks for your really great job !!

[thjxs]

So glad to see it released

[wangcode]

Thank you all for your contribution.
And There have some weird things

• react-scripts start print assets info on my console
• "No issues found." in my console

[obsius]

Was the removal of the runtime error overlay intentional? It was a nice feature.

[yann-combarnous]

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

[raix]

We could try, dont remember if it still works that way in wp5 - but lets see if it could be fixed

[JeremyGrieshop]

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.

[GraxMonzo]

Temporary solution using craco:

module.exports = {
  webpack: {
    configure: (config, { env }) => {
      if (env === 'production') {
        config.optimization['splitChunks'] = {
          chunks: 'all',
        };
      }

      return config;
    },
  },
};

[yann-combarnous]

We could try, dont remember if it still works that way in wp5 - but lets see if it could be fixed

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.

[JeremyGrieshop]

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.

[mryechkin]

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!

[yuvrajgupta036]

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)
$ npm start

my-newapp@0.1.0 start
react-scripts start

Starting the development server...

Compiled successfully!

You can now view my-newapp in the browser.

Local: http://lotcalhost:3000
On Your Network: http://192.168.255.149:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

assets by path static/ 1.52 MiB
asset static/js/bundle.js 1.51 MiB [emitted] (name: main) 1 related asset
asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.88 KiB [emitted] 1 related asset
asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 546 bytes [emitted]
runtime modules 31.4 KiB 16 modules
modules by path ./node_modules/ 1.38 MiB 95 modules
modules by path ./src/ 18.1 KiB
modules by path ./src/.css 8.82 KiB
./src/index.css 2.72 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./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.37 KiB [built] [code generated]
./src/App.css 2.72 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./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 KiB [built] [code generated]
modules by path ./src/.js 5.65 KiB
./src/index.js 1.78 KiB [built] [code generated]
./src/App.js 2.49 KiB [built] [code generated]
./src/reportWebVitals.js 1.38 KiB [built] [code generated]
./src/logo.svg 3.61 KiB [built] [code generated]
webpack 5.65.0 compiled successfully in 65040 ms

---

older "react-scripts": "4.0.3"

yuvra@LAPTOP-5GI5GIT2 MINGW64 ~/Desktop/my-newapp (master)
$ npm start

my-newapp@0.1.0 start
react-scripts start

i ｢wds｣: Project is running at http://192.168.255.149/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\yuvra\Desktop\my-newapp\public
i ｢wds｣: 404s will fallback to /
Starting the development server...

Compiled successfully!

You can now view my-newapp in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.255.149:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

.

[yuvrajgupta036]

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)
$ npm start

my-newapp@0.1.0 start
react-scripts start

Starting the development server...

Compiled successfully!

You can now view my-newapp in the browser.

Local: http://lotcalhost:3000
On Your Network: http://192.168.255.149:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

assets by path static/ 1.52 MiB
asset static/js/bundle.js 1.51 MiB [emitted] (name: main) 1 related asset
asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.88 KiB [emitted] 1 related asset
asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 546 bytes [emitted]
runtime modules 31.4 KiB 16 modules
modules by path ./node_modules/ 1.38 MiB 95 modules
modules by path ./src/ 18.1 KiB
modules by path ./src/.css 8.82 KiB
./src/index.css 2.72 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./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.37 KiB [built] [code generated]
./src/App.css 2.72 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./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 KiB [built] [code generated]
modules by path ./src/.js 5.65 KiB
./src/index.js 1.78 KiB [built] [code generated]
./src/App.js 2.49 KiB [built] [code generated]
./src/reportWebVitals.js 1.38 KiB [built] [code generated]
./src/logo.svg 3.61 KiB [built] [code generated]
webpack 5.65.0 compiled successfully in 65040 ms

---

older "react-scripts": "4.0.3"

yuvra@LAPTOP-5GI5GIT2 MINGW64 ~/Desktop/my-newapp (master)
$ npm start

my-newapp@0.1.0 start
react-scripts start

i ｢wds｣: Project is running at http://192.168.255.149/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\yuvra\Desktop\my-newapp\public
i ｢wds｣: 404s will fallback to /
Starting the development server...

Compiled successfully!

You can now view my-newapp in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.255.149:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

---

[coreyleelarson]

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

[yuvrajgupta036]

thanks @coreyleelarson . That's what I also thinking.

[ludofischer]

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/

[coreyleelarson]

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

[ludofischer]

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

[yann-combarnous]

@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,
      },
   }

[raix]

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)

[yann-combarnous]

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)

Looks like ‘false’ is the default value in webpack 5, so we should be good

[kirill-konshin]

ignoreWarnings: [/Failed to parse source map/], helped a lot, thanks!

[shubhdwiv12]

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:-
Creating an optimized production build...
Failed to compile.

static/css/main.c713e34d.css from Css Minimizer plugin
Error: Unexpected '/'. Escaping special characters with \ may help.

Any ways to resolve this issue?

[pstrh]

@shubhdwiv12 Are you using CSS modules? Could be related to #11775

[wmitsuda]

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.

[wmitsuda]

sure,

SVG: #11753
Code splitting: I don't remember if there is a specific issue for that, but you can see mentions of "splitChunks" here on this thread above.

[stephent]

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

[JeremyGrieshop]

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

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.

[gunaygultekin]

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.

I was able to upgrade to v5 in an app using Tailwind 3 without too much trouble using craco as described in comments above.

I don't think CRA5 is broken, per se.

Hi, I couldnt see where is that ? Thanks

[stephent]

@gunaygultekin you can just search for craco on this page.

[Microcom88]

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

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

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

[HudhaifaGburi2]

I have this issue:

WARNING in ./node_modules/typescript/lib/typescript.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'typescript.js.map': SyntaxError: Unexpected end of JSON input

and this also:

WARNING in ./node_modules/typescript/lib/typescript.js 3714:17-38
Module not found: Error: Can't resolve 'perf_hooks' in '.....\resume\node_modules\typescript\lib'