yarn build failed with a fresh created react ts app

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.

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

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