问题
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