0

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.

Qiulang
  • 10,295
  • 11
  • 80
  • 129
  • 1
    `libraryTarget: 'umd'` means that you are no longer generating an ES6 module. It doesn't have any `export` declarations that can be imported using module syntax. – Bergi Aug 18 '19 at 09:56
  • If you use webpack, it generates a compatibility wrapper around imports so that you can also import scripts with other module formats, not just ES6 modules. – Bergi Aug 18 '19 at 09:57
  • So how do I generate an ES6 module ? – Qiulang Aug 18 '19 at 11:26
  • 1
    Dunno, `libraryTarget: 'es6'` would be my guess, but I haven't checked the docs? If webpack doesn't work for you, use rollup, which definitely supports ES6 modules. – Bergi Aug 18 '19 at 16:39

2 Answers2

2

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>
Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
  • Thanks, but you did not answer my question. Besides if it "meaning that it no longer works with import and export like you try to do." See my word about "import phonebar from 'jssip-emicnet/dist/phonebar';" – Qiulang Aug 18 '19 at 09:36
  • check my updated question about why it was called phonebar – Qiulang Aug 18 '19 at 09:42
  • I've installed your package and compared it to the `unpkg.com` file. There seem to be differences in the code. So maybe that's why it is working when you install it, but not when you download it. – Emiel Zuurbier Aug 18 '19 at 10:36
  • @EmielZuurbier actually, Qiulang's code does work with es modules, it just defines the esModule property to export. See this page: https://webpack.js.org/guides/author-libraries/ – Ben Gubler Aug 20 '19 at 01:54
  • Awesome. "export default foo" - this line helped me. I was getting the same error because of "module.exports = foo" – Fahim Rahman Jun 28 '21 at 18:57
0

It's far from obvious for a first time ts/js npm library developer that webpack uses series of optimizations by default that remove a lot of code that it determines unused.

When creating a library, wepack needs to be told explicitly so it does not remove your exports: https://webpack.js.org/guides/author-libraries/

Ivelin Ivanov
  • 71
  • 1
  • 5