why ES6 import does not work in plain js files

Question

I have a problem with importing into plain JavaScript files from libs for example,currently i am trying to learn Redux and i found that i should learn redux toolkit. but when i am trying to import configureStore it shows me an error importing code:

import { configureStore } from "@reduxjs/toolkit";

error output:

Uncaught TypeError: Failed to resolve module specifier "@reduxjs/toolkit". Relative references must start with either "/", "./", or "../".

this error occured to me first time when i tried to learn "Chart.js" but couldn't find a solution for it. that's why i decided to ask you, hoping to find the answer or the final solution to this problem.

...........................................

Answer 1

Browsers don't have access to npm or even know what it is. So import statements like "@company/package" won't work in the browser. You would need a build tool to grab those things out of /node_modules/ and bundle it with your app.

Alternately, you can copy the relevant parts out of node_modules itself, paste it into a folder that you know is part of your app, and import it from that location via relative path.