CODEWITHSUNDEEP
javascriptes6-modules
Brinley
Brinley

Reputation: 721

Importing javascript modules

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.

Upvotes: 1

Views: 1959

Answers (3)

Yevgeny Streltsov
Yevgeny Streltsov

Reputation: 56

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.

Upvotes: 0

TPHughes
TPHughes

Reputation: 1627

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

Upvotes: 1

Leffe
Leffe

Reputation: 126

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";

Upvotes: 3

Related Questions