ES6 modules via script tag has the error “The requested module does not provide an export named 'default' ”

问题

I tried to import a module via script tag,

<script type="module">
        import phonebar from "https://unpkg.com/jssip-emicnet/dist/phonebar.js"

I got the error

The requested module 'https://unpkg.com/jssip-emicnet/dist/phonebar.js' does not provide an export named 'default'

I changed it to so-called "Import a module for its side effects only" and it worked as expected.

 <script type="module">
        import "https://unpkg.com/jssip-emicnet/dist/phonebar.js"

MDN said import '/modules/my-module.js'; is to

Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.

Those words did not make sense to me. Beside, if I use npm+webpack to set up a simple project. npm i jssip-emicnet then I can import phonebar correctly in my js code.

import phonebar from 'jssip-emicnet/dist/phonebar';

So why can't I import it via <script> tag in browser?

I am actually the author of jssip-emicnet. The phone.js is like this

class Phone {
  ...
}
export default Phone

And my webpack output setting is this

entry: {
    phonebar: './src/ui/phone.js'
},
output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
    libraryTarget: 'umd',
    libraryExport: 'default',
    umdNamedDefine: true,
    library: '[name]'
},

So I am not sure if it is because I miss something about my webpack setting.

----- update -----

With the comments I got I found this Output an ES module using webpack

The question was about webpack 2 and I am using webpack 4 but since this issue is still open https://github.com/webpack/webpack/issues/2933 maybe webpack has not supported that yet.

UMD is not compatible with JavaScript modules also helps to explain umd and es6 module.

回答1:

At first I thought your import was incorrect

The name of your default export is Phone.

class Phone {
  ...
}
export default Phone

In your code you are requesting the phonebar variable from your module, which is not the default export value. This will throw an error. Try changing the phonebar import value to the name of the default class.

See example below.

import Phone from "https://unpkg.com/jssip-emicnet/dist/phonebar.js"

But then I took a look at your phonebar.js file

It seems that the code you import from the URL has been transpiled, meaning that it no longer works with import and export like you try to do. Click here to see the raw representation of your code and search for export default and see, there is no such thing. And that causes the errors.

I would recommend that, if possible, you would import the src or development version of your phonebar.js script.

Or don't use a module and load in the script the standard way.

<script src="https://unpkg.com/jssip-emicnet/dist/phonebar.js"></script>

来源：https://stackoverflow.com/questions/57542684/es6-modules-via-script-tag-has-the-error-the-requested-module-does-not-provide

标签

npm

Webpack

ecmascript-6

es6-modules

umd