import not working in Chrome

I am creating an single page app in vanilla JavaScript. I want to organize my code in different files to make it modular, which means I should be able to access functions defined in one file in another file. I am using ES6 native import export for this:

file-1.js:

export function func1() {}
export function func2() {}

file-2.js:

import { func1, func2 } from './file-1';

index.html:

<script src="file-1.js"></script>

When I run index.html in Chrome (version 65), I get the following error: Uncaught SyntaxError: Unexpected token {.

What's wrong in my code? Chrome 65 fully supports ES6 module system.

标签： javascript google-chrome ecmascript-6

2条回答

再贱就再见

2楼-- · 2020-02-10 03:38

Chrome (v70) has some kind of issues when working with import syntax on the local files served using file protocol. It is probably CORS blocking that can happen using file protocol according to some articles. But Chrome also does not show CORS warning in the console in this case - which is strange. Therefore some kind of HTTP server is needed so the files are served via HTTP protocol (as Vu showed in his answer). Firefox v63 (probably >v60) doesn't have these issues and you can compose html with js modules using file:// protocol without a special server.

Also make sure to:

use file type extensions when importing (import { func1, func2 } from './file-B.js';).
use type="module" in html script element (<script type="module" src="file-A.js"></script>)

0人赞添加讨论(0) 举报

We Are One

3楼-- · 2020-02-10 03:57

Here is a working example

file1.mjs

function log1() {
  console.log('log1');
}
function log2() {
  console.log('log2');
}
export { log1, log2 };

file2.mjs you must explicitly write .mjs extension

import { log1, log2 } from './file1.mjs';

log1();
log2();

index.html Notice attribute type="module"

<body>
    <script type="module" src="file2.mjs"></script>
</body>

Then you need a static server to get rid of CORS block.

$ yarn global add serve
$ serve ./

Finally go to http://localhost:5000 and it will work

Update: It is recommended to use .mjs file extension for modules instead of .js

0人赞添加讨论(0) 举报

import not working in Chrome

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间