Reputation: 3193
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
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
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
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