Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack 5 support. ESM strict mode

See original GitHub issue

See: https://github.com/babel/babel/issues/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

Issue Analytics

State:
Created 3 years ago
Reactions:13
Comments:11

Top GitHub Comments

3reactions

Methuselah96commented, Feb 4, 2021

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

2reactions

Slapboxcommented, Feb 4, 2021

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/runtime@7.12.13", "@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==

Top Results From Across the Web

ECMAScript Modules - webpack

Requests to packages e.g. import "lodash" are still supported. Only the "default" export can be imported from non-ESM. Named exports are not available....

Webpack 5 and ESM - Stack Overflow

Webpack does not have native support for ESM config files, as the other answer states, but it does support automatically transpiling them.

Vote - webpack

[WEBPACK 5] Persistent cache ... [webpack 5] Take care of enhanced-resolve, tapable, watchpack and other dependencies ... Strict mode for native ESM compat....

Strict mode - JavaScript - MDN Web Docs

Browsers not supporting strict mode will run strict mode code ... "use strict"; // Assignment to a non-writable global var undefined = 5; ......

Node Modules at War: Why CommonJS and ES ... - Code Red

ESM scripts use Strict Mode by default ( use strict ), their this ... There is explicitly no support for scripts or for...