user2028856
user2028856

Reputation: 3193

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!

Upvotes: 6

Views: 15390

Answers (3)

robinhood
robinhood

Reputation: 1

I ran into the same issue while using react-three-fiber

I was importing tilt using import Tilt from "react-tilt";

Changing it to import { Tilt } from "react-tilt"; fixed the issue for me.

I know this is an old thread but I could not find any solution for me when I was looking for one. This thread was the most relevant one so my answer might help or direct anyone else facing a similar error.

Upvotes: 0

Michael Martell
Michael Martell

Reputation: 360

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

The 1st issue that you're 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 you're trying to bring in is being brought in the right format. (forgive me if I'm not using the correct lingo right now. I'm a student too.

The solution to my issue was that it was an object and I was bringing it in as a 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!

Upvotes: 0

Semyon
Semyon

Reputation: 705

The error basically means that the stuff from 'hls.js' was supposed to be imported as import * as Hls from 'hls.js'

Upvotes: 4

Related Questions