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 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import and workaround - https://stackoverflow.com/questions/34944099/how-to-import-a-json-file-in-ecmascript-6/39855320 — Kanwal Sarwara, May 28 '19 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, May 28 '19 at 19:05

score 3 · Accepted Answer · answered May 28 '19 at 19:13

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 '19 at 19:13

Elliot

6,086
11
45
57

Hey Elliot you really helped me altough I am not using Node.js, this scripts are connected to my web page with the ``` – Dan May 29 '19 at 09:03
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... – Dan May 29 '19 at 09:06

score 1 · Answer 2 · answered May 28 '19 at 20:11

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:

Javascript Import Don't Work In Visual Studio Code

main.js import part

navigationList.json file

Error the console is showing:

2 Answers2