Webpack 5 support. ESM strict mode

[thomaswelton]

See: babel/babel#12058

Webpack 5 has enabled strict mode on the ESM modules imports.
As a result when using react-select in our project and compiling with Webpack 5 produces errors such as

Module not found: Error: Can't resolve './iterableToArray' in '/Users/thomaswelton/Projects/justpark-web/node_modules/react-select/node_modules/@babel/runtime/helpers/esm'nDid you mean 'iterableToArray.js'?nBREAKING CHANGE: The request './iterableToArray' failed to resolve only because it was resolved as fully specifiedn(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').nThe extension in the request is mandatory for it to be fully specified.nAdd the extension to the request.

This has been fixed in babel 7.12.0
I will submit a PR to bump @babel/runtime to 7.12.0

[justincorrigible]

Anyone still experiencing issues with this: hoisting @babel/runtime@^7.12.5 through the manifest 'resolutions' seems to do the trick, while a new version here is released.

[cmonteiro128]

@caravinci What manifest are you talking about? trying to figure out a workaround

Also, hoping this gets fixed soon

[justincorrigible]

@caravinci What manifest are you talking about? trying to figure out a workaround

@cmonteiro128 I'm referring to this https://yarnpkg.com/configuration/manifest/#resolutions
If you're using NPM instead, you can try something like https://www.npmjs.com/package/npm-force-resolutions, which is a workaround to accomplish the same.

Side note, forgive me if I'm stating something you already know, but just in case someone else who doesn't stumbles upon my previous comment: "Manifest" is the technical term for the file package.json. In hindsight, I should've been clearer 👍

[cmonteiro128]

@caravinci I ended up figuring out what you meant afterward, and saw it was only available in yarn. I'll give that NPM package a try though, thanks!

[ebonow]

@thomaswelton sorry for the lack of replies about this issue or your previous PR.

If you would kindly create another PR, I can have this added as a part of the discussion for the next milestone release.

[Methuselah96]

Note that this issue shouldn't be blocking anyone because the current range for @babel/runtime (i.e., ^7.4.4) allows for the version with the fix 7.12.0, but it would still be nice to bump the dependency anyway.

[Nantris]

@Methuselah96 surprisingly this is blocking for us.

We're using React-Select in a monorepo and so far have not found any way to proceed with using React-Select.

I tried using package.json's resolutions just now, but that didn't work at all, I'm guessing because @babel/register already has a slash in it.

"resolutions": {
  "react-select/@babel/runtime": "^7.12.13"
}

When we used resolutions for the whole project without scoping to react-select that led to other issues.

Looking into possible alternate syntax now.

---

Update: Doesn't look promising yarnpkg/yarn#4874

[Methuselah96]

Have you tried removing all @babel/runtime entries from your yarn.lock and then re-running yarn install? If that doesn't work, I would be interested in seeing your yarn.lock.

[Methuselah96]

(Note I'm also working on getting the PR through in order to avoid the situation altogether. Hopefully we can include the fix in the next release.)

[Nantris]

Thanks @Methuselah96, that's a good idea; giving that a shot now.

Also deleted our entire node_modules again before reinstalling to make sure Yarn installs what we want. I'll be back with an update, but that PR sounds great!

[Nantris]

That worked out, and I can confirm the entries for @babel/runtime are now consolidated. Thanks very much for your help, that's a great generalizable tip.

Before:

-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0", "@babel/runtim
-  version "7.7.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a
-  integrity sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
-"@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2":
-  version "7.11.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0
-  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.12.1":
-  version "7.12.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b9858
-  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.4.4", "@babel/runtime@^7.8.4":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b499632
-  integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.8.7":
-  version "7.9.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db
-  integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==

After:

+"@babel/[email protected]", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runti
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.13.tgz#0a21452352b02542db0ffb928ac2d3ca7cb6
+  integrity sha512-8+3UMPBrjFa/6TtKi/7sehPKqfAm4g6K+YQjyyFOLUTxzOngcRZTlAVY8sc2CORJYqdHQY8gRPHmn+qo15rCBw==