CODEWITHSUNDEEP
javascriptimportjavascript-import
Dan
Dan

Reputation: 144

Javascript Import Don't Work In Visual Studio Code

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

Upvotes: 3

Views: 11109

Answers (4)

fullstack-developer
fullstack-developer

Reputation: 15

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

Upvotes: 0

jeadonara
jeadonara

Reputation: 1311

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

Upvotes: 0

Nhan Tran Trong
Nhan Tran Trong

Reputation: 45

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:

Upvotes: 1

Elliot
Elliot

Reputation: 6136

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.

  1. Rename the file to have an .mjs extension:
mv mainJS.js mainJS.mjs
  1. 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.

Upvotes: 3

Related Questions