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

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!

Solution 1:^[1]

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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Michael Martell

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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]