Javascript Import Don't Work In Visual Studio Code

Question

I can't import anything in my javascript files of my website, I've tried many things but it doesn't work.

So I want to import a .json file to a .js file using the import key word but it doesn't work. Another problem is that Visual Studio Code doesn't show me an error but the console does...

main.js import part

import dropDownList from "./navigationList.json"; //This is line number 1

console.log(dropDownList.shop.kits);

navigationList.json file

{
    "shop": {
        "kits": "DIY Physics Kits",
        "merch": "Merchendise"
    },

    "learn": {
        "first-sub": "Mechanics",
        "second-sub": "Miscellaneous"
    }
}

Error the console is showing:

mainJS.js:1 Uncaught SyntaxError: Unexpected identifier

The console says there is an Uncaught SyntaxError with my import and this causing me to make my code long and without import which sucks. Please help me

import keyword doesnt work with importing json data, it can only import defined modules from js file. See documentation - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… and workaround - stackoverflow.com/questions/34944099/… — Kanwal Sarwara
– Kanwal Sarwara, Commented May 28, 2019 at 18:46
@Sarwara - this: import keyword doesn't work with importing json data is not accurate. One can import JSON data as long as it is exported. But, one cannot import from a MIME type other than JS (i.e navigationList.json) — Randy Casburn
– Randy Casburn, Commented May 28, 2019 at 19:05

Elliot · Accepted Answer · 2019-05-28 19:13:33Z

3

The import syntax is part of ES6 modules. It looks like you are using Node.js, which does not include support for ES6 modules by default. However, Node.js has experimental support for ES6 modules.

Rename the file to have an .mjs extension:

mv mainJS.js mainJS.mjs

Run it with the --experimental-modules flag:

node --experimental-modules mainJS.mjs

I tested this with your code, and it works:

% node --experimental-modules main.mjs
(node:73044) ExperimentalWarning: The ESM module loader is experimental.
DIY Physics Kits

At the time of this writing, I am using Node.js v12.3.1:

% node --version
v12.3.1

Alternatively, you can transpile your code with a tool like Babel, which changes imports to requires.

answered May 28, 2019 at 19:13

Elliot

6,16611 gold badges48 silver badges57 bronze badges

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

2 Comments

Dan Over a year ago

Hey Elliot you really helped me altough I am not using Node.js, this scripts are connected to my web page with the <script> tag, However I will try to transpile my code in order to use require() and I will see if it works. Note: Currently when I am trying to use the word require() in my code the console says that require is not defined.

Dan Over a year ago

By the way: This article says that without a server I can't use the import keyword, and currently I am running my website on my computer with the protocol file:// so I guess that was the main problem...

Nhan Tran Trong · Accepted Answer · 2019-05-28 20:11:03Z

1

navigation_list.json

{
    "shop": {
        "kits": "DIY Physics Kits",
        "merch": "Merchendise"
    },

    "learn": {
        "first-sub": "Mechanics",
        "second-sub": "Miscellaneous"
    }
}

main.js

var navigation_list = require('./navigation_list.json');
console.log(`>>>> Returned JSON data: ${navigation_list.shop.kits}`);

End the output here:

answered May 28, 2019 at 20:11

Nhan Tran Trong

451 silver badge7 bronze badges

Comments

jeadonara · Accepted Answer · 2023-10-23 12:32:59Z

0

Set "type": "commonjs" in package.json

answered Oct 23, 2023 at 12:32

jeadonara

1,43113 silver badges10 bronze badges

Comments

fullstack-developer · Accepted Answer · 2024-08-21 10:55:28Z

0

This usually happens when we copy paste some components from other directory into our project. I got this working by saving the components one by one once pasted and immediately I was able to see them getting auto imported without installing any extensions

answered Aug 21, 2024 at 10:55

fullstack-developer

154 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Javascript Import Don't Work In Visual Studio Code

main.js import part

navigationList.json file

Error the console is showing:

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

main.js import part

navigationList.json file

Error the console is showing:

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related