Using 'externals' in Webpack gives error "failed to resolve module specifier"

user_12947970 0
Viewed 173

I'm testing a library that is exported as a module (by Webpack) with something like

// myLib.js
const a = 1;
export { a as myVal };

My script for the page is

// index.js
import { myVal } from 'my-lib'

console.log (myVal)

In webpack.config.js I have externals: { myLib: 'myLib' }. In my index.html, I would have

...
  <script type="module" src="https://unpkg.com/myLib"></script>
  <script type="module" src="index.js"></script>
...

This leads to run time error of Uncaught TypeError: Failed to resolve module specifier "myLib". Relative references must start with either "/", "./", or "../".

This is because despite the library has been loaded onto the page, it is not referenced by the name myLib.

What's the proper way to set up Webpack so that when I import 'myLib' in index.js, it knows I mean import from 'http://unpkg.com/myLib'?

webpack javascript
1 Answers

One workaround is to import the whole module and the make it a global variable, like so in index.html

...
  <script type="module">
    import * as myLib from 'https://unpkg.com/myLib'
    window.myLib = myLib
  </script>
  <script type="module" src="index.js"></script>
...

Another solution seems to be to generate modules as outputs

externals: { myLib: 'https://unpkg.com/myLib' }
experiments: { outputModule: true },

This gives you .mjs files. You'll see the first line in the output file with something like

import * as __WEBPACK_EXTERNAL_MODULE_https_unpkg_com_myLib_9592ca0f__ from "https://unpkg.com/myL";

This allows you to continue to use import { myVal } from 'myLib' in your code, while the compiled file substitutes myLib for the URL.

Note: This externals setting will generate an error if you do not output as modules. The generated file will have the line module.exports = https://unpkg.com/myLib, which is invalid JS syntax. If you put `` around the URL, syntax becomes valid, but what should be your module is just a string, i.e. module.export has a string value.

Note: This approach doesn't work well with HttpWebpackPlugin yet, as the injected script tags does not add type="module" for your module output files. You'll need to do this manually by specifying scriptLoading: 'module' (v5.5.0)

Results from webpack 5.72.1

user_129479700
Related