Create-react-app: Update webpack to fix dynamic imports

[cinnamonkale]

In v3.0.1, using [email protected], dynamic imports fail. See the issue here. The issue's been fixed since 4.30.0, with the latest current version at 4.35.0

When will react-scripts be updated with the fixed version of webpack? I imagine it's a simple dependency update, but I don't know how the latest version will affect CRA

[iansu]

I didn't realize this issue had been fixed in webpack. Thanks for pointing that out. We'll try and get a new version released in the next few days, provided the webpack upgrade doesn't introduce any other issues.

[mrmckeb]

In case anyone comes across this issue, this won't affect new installs.

If you have an existing install you can try removing node_modules and your lock file, then reinstalling. This will give you the latest Webpack version.

[lucamartini]

In case anyone comes across this issue, this won't affect new installs.

If you have an existing install you can try removing node_modules and your lock file, then reinstalling. This will give you the latest Webpack version.

This does not work for our project, the problem is till there.
Downgrading to "react-scripts": "^2.1.8" works,
So we are waiting there, until the next CRA release.

[mrmckeb]

This should work @lucamartini, did you check what Webpack version you had installed?

[lucamartini]

it works with yarn, but not with npm.
@mrmckeb this is webpack after a new install:
[email protected]
└── [email protected]

[mrmckeb]

That's interesting. And not what I would have expected... it's not ideal, but you could also update package-lock.json to point to the latest version. We're working on the next version now.

@iansu, this might warrant a quick patch-release.

[markerikson]

I created a new CRA+TS project a couple days ago. I got [email protected], and it also explicitly points to [email protected], using Yarn 1.16.

Any news on getting this out as an update?

[bugzpodder]

@markerikson it should be next week.

[Tobbe]

Warning: Dirty dirty solution below

This is what I did to temporarily solve this issue

In the root of my CRA project:

$ npm install webpack # This gave me [email protected]
$ rm -fr node_modules/react-scripts/node_modules/webpack/*
$ cp -r node_modules/webpack/* node_modules/react-scripts/node_modules/webpack/
$ vim node_modules/react-scripts/package.json # Change  "webpack": "4.29.6",  ->  "webpack": "4.38.0",

The last step is needed for CRA's preflight check to pass

[markerikson]

Or use Yarn's "resolutions" to force the use of an updated Webpack version:

https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

[Tobbe]

Had to automate this step for our CI setup. Added a "postinstall" script to package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "rm -fr node_modules/react-scripts/node_modules/webpack/* && cp -r node_modules/webpack/* node_modules/react-scripts/node_modules/webpack/ && sed -i -e 's/\"webpack\": \"4.29.6\"/\"webpack\": \"4.39.0\"/' ./node_modules/react-scripts/package.json"
  },

[mrmckeb]

@Tobbe, you shouldn't need to do that. Are you in npm or Yarn?

[Tobbe]

@mrmckeb I'm using npm

$ node -v
v12.7.0
$ npm -v
6.10.0

[iansu]

This is fixed and will be released in 3.1 so I'm going to close this issue.