admin管理员组

文章数量:1289582

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

sdk-ponents
    --- 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-ponents/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!

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

sdk-ponents
    --- 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-ponents/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!

Share Improve this question edited Jul 17, 2021 at 8:00 user2028856 asked Jul 17, 2021 at 7:15 user2028856user2028856 3,2039 gold badges51 silver badges77 bronze badges 1
  • did you ever find a solution to this? – Patronics Commented Dec 13, 2021 at 6:19
Add a ment  | 

3 Answers 3

Reset to default 4

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

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!

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.

本文标签: