How to load a javascript module in html - Stack Overflow

admin管理员组

文章数量:1404772

I receive an error whenever I import a library in my index.js file and try to use it in index.html file.

script tag in index.html: <script src="index.js" type="module"></script>

import statement in index.js: import axios from './node_modules/axios';

The error I receive:

*I am running the app on a local server, not on the file system.

I receive an error whenever I import a library in my index.js file and try to use it in index.html file.

script tag in index.html: <script src="index.js" type="module"></script>

import statement in index.js: import axios from './node_modules/axios';

The error I receive:

*I am running the app on a local server, not on the file system.

• javascript
• html
• ecmascript-6

Share Improve this question Follow asked Feb 5, 2020 at 16:34 DavidDavid 17922 silver badges1515 bronze badges 7

• You don't need to give path for files node_modules i think – Maheer Ali Commented Feb 5, 2020 at 16:35
• It doesn't work otherwise. – David Commented Feb 5, 2020 at 16:36
• setting up you localhost server to set a correct MIME type ? – Pierre Commented Feb 5, 2020 at 16:36
• How do I do that? – David Commented Feb 5, 2020 at 16:37
• It seems your server is returning a MIME type of text/html. Possibly check your server to make sure it is accessing the correct return/endpoint? – omoshiroiii Commented Feb 5, 2020 at 16:37

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

if you use just vanilla JavaScript and you want to use module you have to add in script tag type module for index.js by this way you tell browser you have to support module in index.js, and after you use module normally with exception you have to add extension name like ".js" for each import Good Luck

<script type="module" src="main.js"></script>

You need to provide the URL to an ES6 module file, not the URL to an automatically generated HTML document showing an index of files in the axios directory.

The Axios distribution includes:

node_modules/axios/dist/axios.min.js

… but that appears to be a hybrid "Load with a regular script tag in the browser" and CommonJS module — not an ES6 module, so you can't import it.

Consider using a tool like Webpack instead.

You can use CDN instead of that.

<script src="https://cdnjs.cloudflare./ajax/libs/axios/0.19.2/axios.min.js"></script>

Thank you

本文标签： How to load a javascript module in htmlStack Overflow