Javascript Modules SyntaxError: Cannot use import statement outside a module

Question

So I am trying to learn modules from a youtube video and I'm following along with him but for some reason my code is the exact same as his and is giving me the error

SyntaxError: Cannot use import statement outside a module

I'm not sure if its because my directories are wrong? I have it under This PC > Desktop > Javascript > module > js > main.js This is the code from main.js

import{double} from './utils.js'

console.log(double(5))

I also have a index.html file located in the module folder This is my index.html code.

<!DOCTYPE html>
<head>
    <title>JavaScript Modules</title>
    <meta name="viewport" content="width=device-width, initial scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dcode.css">
    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
</head>

<body>
    <h1>JavaScript Modules</h1>
    <u1>
        <li>Split up your code into separate components</li>
        <li>Therefore easier to maintain and organize</li>
        <li>Supported in major browsers(excl. IE)</li>
    </u1>

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

I'm trying to import code from my utils.js file which is in the same folder as main.js This is my utils.js code.

export function double(n){
    return n * 2;
}

When I run the code on the main.js file is where I'm getting the error: SyntaxError: Cannot use import statement outside a module

let me guess ... you are not running a Web server while you are testing this ... if files are not served with the correct mime-type, the browser will fail at recognizing these. use npx ucdn --debug and test on that address, or use any other one-liner server side, instead of running that html page as a file. — Andrea Giammarchi
– Andrea Giammarchi, Commented Jul 16, 2020 at 17:17

Denis G. Labrecque · Accepted Answer · 2020-07-20 19:03:04Z

2

You need to run your own webserver. An easy one is to get the Web Server for Chrome. You just run it, point it to your local computer folder, and it will give you a localhost port number where your computer is serving the folder. That way you can access your local folders over HTTP.

With the following folder structure:

/exports/
   user.html
   importer.js
   exporter.js

Where user.html is the page using the importer.js script, which in turn loads exporter.js, you use the following syntax:

user.html -- the type="module" notation is necessary.

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

importer.js -- the ./ relative notation is obligatory.

import { doStuff } from './exporter.js'

doStuff()

exporter.js -- in a production environment, this is your library or module.

function doStuff() {
   console.log('Do stuff')
}

export { doStuff }

With a local server, the above setup will log Do stuff in the console.

Forgetting type="module" results in an Uncaught SyntaxError: Cannot use import statement outside a module, not having a relative URL will result in an Uncaught TypeError: Failed to resolve module specifier "exporter.js". Relative references must start with either "/", "./", or "../", and having the wrong URL results in a 404.

edited Jul 20, 2020 at 19:03

answered Jul 20, 2020 at 18:58

Denis G. Labrecque

1,31819 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reid Riddle Over a year ago

I appreciate the answer, I have actually solved the problem the day I posted this. But it's great that the post now has an official answer in case anyone else has the same problem and comes across this. I personally used http-server/http-party from github to setup my local server. This should work as well though! Thanks.

Collectives™ on Stack Overflow

Javascript Modules SyntaxError: Cannot use import statement outside a module

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related