yarn build failed with a fresh created react ts app

[mielune]

Describe the bug

After creating a fresh new app using yarn create react-app my-app --template typescript the build process failed with an error from my_project/node_modules/react-scripts/config/webpack.config.js:664

Based on last releases of all componants inside node 16.13.0

Error is:

yarn build
yarn run v1.22.17
$ react-scripts build
/workspace/my_app/node_modules/react-scripts/config/webpack.config.js:664
        new MiniCssExtractPlugin({
        ^

TypeError: MiniCssExtractPlugin is not a constructor
    at module.exports (/workspace/my_app//node_modules/react-scripts/config/webpack.config.js:664:9)
    at Object.<anonymous> (/workspace/my_app/node_modules/react-scripts/scripts/build.js:58:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Did you try recovering your dependencies?

Yes, getting de fresh project from git or from scratch, see "Steps to reproduce"

Environment

• Gitpod
• Node 16.13.0

Steps to reproduce

Easy to reproduce craete a fresh new project like this :

yarn create react-app my-app --template typescript
cd my-app
yarn install
yarn build

Using yarn start, the dev mode is working fine.

Expected behavior

A built app.

Actual behavior

Build failed and the app is not ready for production.

[yasinosman]

I had the same error using npm.

Here is my package.json

{
  "name": "personal-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
  "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"
    ]
  }
}

And here is the error:

> react-scripts build

/Users/yasinosman/Desktop/personal-website/node_modules/react-scripts/config/webpack.config.js:664
        new MiniCssExtractPlugin({
        ^

TypeError: MiniCssExtractPlugin is not a constructor
    at module.exports (/Users/yasinosman/Desktop/personal-website/node_modules/react-scripts/config/webpack.config.js:664:9)
    at Object.<anonymous> (/Users/yasinosman/Desktop/personal-website/node_modules/react-scripts/scripts/build.js:58:16)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! personal-website@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the personal-website@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yasinosman/.npm/_logs/2022-01-14T18_40_00_572Z-debug.log

[szisz1982]

Same error with npm run build command:

` new MiniCssExtractPlugin({
^

TypeError: MiniCssExtractPlugin is not a constructor
at module.exports (/Users/szisz/Documents/worx/rntools/test/node_modules/react-scripts/config/webpack.config.js:664:9)
at Object. (/Users/szisz/Documents/worx/rntools/test/node_modules/react-scripts/scripts/build.js:58:16)
at Module._compile (node:internal/modules/cjs/loader:1097:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47

Node.js v17.2.0`

[DavidIAm]

Problem is a change in the api coming from mini-css-extract-plugin which is versioned at ^2.4.5 in the react-scripts package. It resolves to 2.5.0 at react-scripts install time which isn't good. You can patch around this with this in your package.json temporarily.

{ "resolutions": { "mini-css-extract-plugin": "2.4.5" } }

I suspect mini-css-extract-plugin should have major-version-bumped if they're going to change their api that much.

[ptb]

Related: webpack/mini-css-extract-plugin#896

[yasinosman]

Problem is a change in the api coming from mini-css-extract-plugin which is versioned at ^2.4.5 in the react-scripts package. It resolves to 2.5.0 at react-scripts install time which isn't good. You can patch around this with this in your package.json temporarily.

{ "resolutions": { "mini-css-extract-plugin": "2.4.5" } }

I suspect mini-css-extract-plugin should have major-version-bumped if they're going to change their api that much.

that didn't fix the error for me

[DavidIAm]

Problem is a change in the api coming from mini-css-extract-plugin which is versioned at ^2.4.5 in the react-scripts package. It resolves to 2.5.0 at react-scripts install time which isn't good. You can patch around this with this in your package.json temporarily.
{ "resolutions": { "mini-css-extract-plugin": "2.4.5" } }
I suspect mini-css-extract-plugin should have major-version-bumped if they're going to change their api that much.

that didn't fix the error for me

... you do need to do a 'yarn install' or the like to re-resolve and make sure that the current jq .version < node_modules/mini-css-extract-plugin/package.json is 2.4.5 before the error will disappear.

[szisz1982]

Problem is a change in the api coming from mini-css-extract-plugin which is versioned at ^2.4.5 in the react-scripts package. It resolves to 2.5.0 at react-scripts install time which isn't good. You can patch around this with this in your package.json temporarily.
{ "resolutions": { "mini-css-extract-plugin": "2.4.5" } }
I suspect mini-css-extract-plugin should have major-version-bumped if they're going to change their api that much.

that didn't fix the error for me

Just try to edit /node_modules/react-scripts/config/webpack.config.js in line 19:
const MiniCssExtractPlugin = require('mini-css-extract-plugin').default;

It works for me :)

[szisz1982]

Related: webpack-contrib/mini-css-extract-plugin#896

Thanks, It works!

[DavidIAm]

Problem is a change in the api coming from mini-css-extract-plugin which is versioned at ^2.4.5 in the react-scripts package. It resolves to 2.5.0 at react-scripts install time which isn't good. You can patch around this with this in your package.json temporarily.
{ "resolutions": { "mini-css-extract-plugin": "2.4.5" } }
I suspect mini-css-extract-plugin should have major-version-bumped if they're going to change their api that much.

that didn't fix the error for me

Just try to edit /node_modules/react-scripts/config/webpack.config.js in line 19: const MiniCssExtractPlugin = require('mini-css-extract-plugin').default;

It works for me :)

You're not wrong, but you're also hacking edits into node_modules which is not a sustainable path for deployable software.

[Etzix]

Problem is a change in the api coming from mini-css-extract-plugin which is versioned at ^2.4.5 in the react-scripts package. It resolves to 2.5.0 at react-scripts install time which isn't good. You can patch around this with this in your package.json temporarily.
{ "resolutions": { "mini-css-extract-plugin": "2.4.5" } }
I suspect mini-css-extract-plugin should have major-version-bumped if they're going to change their api that much.

that didn't fix the error for me

... you do need to do a 'yarn install' or the like to re-resolve and make sure that the current jq .version < node_modules/mini-css-extract-plugin/package.json is 2.4.5 before the error will disappear.

Easy fix if you are a new developer, or just not very good with node_modules or if you're like me and just don't get the lango the others are speaking:

Delete "mini-css-extract-plugin" from your node_modules folder.
Run the command: npm install mini-css-extract-plugin@2.4.5
Try building again and it should work.

[cgen01]

Problem is a change in the api coming from mini-css-extract-plugin which is versioned at ^2.4.5 in the react-scripts package. It resolves to 2.5.0 at react-scripts install time which isn't good. You can patch around this with this in your package.json temporarily.

{ "resolutions": { "mini-css-extract-plugin": "2.4.5" } }

I suspect mini-css-extract-plugin should have major-version-bumped if they're going to change their api that much.

This seems to be the best fix right now. Thanks, guys!

[mielune]

Problem is a change in the api coming from mini-css-extract-plugin which is versioned at ^2.4.5 in the react-scripts package. It resolves to 2.5.0 at react-scripts install time which isn't good. You can patch around this with this in your package.json temporarily.

{ "resolutions": { "mini-css-extract-plugin": "2.4.5" } }

I suspect mini-css-extract-plugin should have major-version-bumped if they're going to change their api that much.

Thank's it is working for me (I tried with 2.4.7 too).

Good workaround, waiting for a fix.

It may be good thing to temporary lock the release of mini-css between 2.4.5 and 2.5 in the react-scripts package.json.