Node JS "Importing binding name 'default' cannot be resolved by star export entries" for HLS.js

user_2028856 0
Viewed 2380

Currently I have the following folder layouts in node JS and installed express js

sdk-components
    --- HlsLoader.js

node_modules
    --- hls.js
        --- src
            --- index.html 
            --- index.js 
        --- dist
            --- hls.js
            --- other files

When I load index.html in localhost like this:

http://localhost:8000/src/index.html

It calls index.js which contains:

import { hlsLoaderType, makeHlsLoader } from '../sdk-components/HlsLoader.js';

The first line of HlsLoader.js contains:

import Hls from 'hls.js';

However when I run index.html I get this error in console:

TypeError: Module specifier, 'hls.js' does not start with "/", "./", or "../"

But when I modify the import to:

import Hls from '../node_modules/hls.js/dist/hls.js';

I get this error instead:

SyntaxError: Importing binding name 'default' cannot be resolved by star export entries.

So my question is, how can I resolve this import issue for the hls.js file?

Thanks!

hls.js webpack express node.js javascript
1 Answers

I just got this message myself using vanilla JS. (How I found this thread).

The 1st issue that your having: "TypeError: Module specifier," means that when you import the file, it needs to be specified as a module.

when I import the files into my html doc, I've specified that the file has a type of module:

<head>
    ...
    <link rel="stylesheet" href="./styles.css">
    <script src="./data.js" type="module" defer></script>
    <script src="./index.js" type="module" defer></script>
    <title>Module List</title>
</head>

That should clear that error...

Next onto the import: 2 things I always check with ES6 module imports / exports:

1st (also irrelevant to your Question): check that the extension .js is included in the import. (For some reason I see in demos that others get away without including it but for me it always seems the extension is important.

2nd: is checking that what your trying to bring in is being brought in in the right format. (forgive me if I'm not using the correct lingo rn. I'm a student too.

The solution to my issue was that it was an object and I was bringing it in as an function - without curly brackets. I just needed to place brackets around it and the same error disappeared and the data came in as expected:

// data.js file

export const inverterManData = [
    { manufacturer: 'enphase', value: 'enphase' },
    { manufacturer: 'SMA', value: 'SMA' }
]

// index.js file

import {inverterManData} from './data.js'

console.log(inverterManData)

Result:

console: [{manufacturer: "enphase", value: "enphase"}, {manufacturer: "SMA", value: "SMA"}] (2)

...and if you remove the curly brackets notice it will cause that error again.

Hope this helps!

user_164416930
Related