Importing javascript modules

Question

I wrote a Javascript module called module.js that does the following

export default function myModule() {
    return new Promise((resolve) => {
        // do a bunch of stuff
    });
};

I have the following Javascript code, test.js, that uses myModule() in module.js

import {myModule} from "module";
myModule().then((retVal) => {
    console.log(retVal);
});

Unfortunately, my browser console is telling me I have the following syntax error:

Uncaught SyntaxError: Unexpected identifier

The console says the syntax error on line 1 of test.js but I can't see what's wrong with it. Any insight is much appreciated.

Are you setting `babel` or `webpack` properly? maybe you browser doesn't know `import` — MBehtemam, May 23 '18 at 19:09

score 3 · Answer 1 · answered May 23 '18 at 19:10

3

Since you are only importing a single function, you should remove the {} from the import. Also, you should change from, to a "path syntax". You should end up with this:

import myModule from "./module";

answered May 23 '18 at 19:10

Leffe

126
1
6

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

When exporting with default you don't use the braces `. Try this instead:

import myModule from "module"

See here: When should I use curly braces for ES6 import?

Edit

As mentioned, if you are importing this from a file in your project rather than a node module then you will to specify the path to the file you are exporting from. I have tested the below code in my project and do receive the expected result test resolve in the console. Let me know if this still doesn't work for you.

module.js

export default function myModule() {
    return new Promise((resolve) => {
        // do a bunch of stuff
        resolve('test resolve');
    });
};

index.js

import myModule from "./module"; // Notice there are no braces (as we are exporting default) and that we are specifying the path
myModule().then((retVal) => {
    console.log(retVal);
});

Specifying the path

./ will search in the current directory of the file you are importing with.

../ will search the directory one level up from the file you are importing with

../../ will search the directory two levels up from the file you are importing with

edited Jun 20 '20 at 09:12

Community

1
1

answered May 23 '18 at 19:15

TPHughes

1,437
11
13

Now I'm getting: Uncaught SyntaxError: Unexpected identifier – Brinley May 23 '18 at 19:17
and again, the source of the error is line 1 of test.js – Brinley May 23 '18 at 19:17
test.js is the second code chunk in my original post – Brinley May 24 '18 at 11:52
And that is what I was asking you to change. Also note that you need to use path syntax as mentioned by MBehemam, I didn't include this in case may have been importing directly from a node module. See the updated code with `./` in the import path. – TPHughes May 24 '18 at 13:05

score 0 · Answer 3 · answered Aug 29 '23 at 00:21

This is about importing a JavaScript module in browser JavaScript.

If test.js is in the same directory as your file, ./module is used; else, you might have ../module or ../src/module or some other path to module.js from current directory of test.js. Has to be a comolete path, the ./ and ../ chaining is preferred. If you have a tests directory, say your test.js is in tests/test.js you are importing ../module.js if it is in root, or ../src/module.js if it is in src/module.js.

Assuming test.js is in the same directory as index.html and module.js, in test.js you can use:

import myModule from "./module";

This way in HTML, index.html you should have:

<HTML>
<HEADER>

<script src='./test.js'>
// inside the script you would need to fix your import paths.
</script>

</HEADER>
<body>
</body>
</HTML>

The keyword here is browser, question asks about Uncaught SyntaxError: Unexpected identifier in browser, means import is unexpected.

Node.JS with Gatsby.JS, Next.JS or Vue.JS might work your way, package.json might need or might have an entry if your module installs into node_modules.

Importing javascript modules

3 Answers3

Edit