Redux failed to resolve module specifier

JavaScript
1

Hi guys!
So I am learning redux and at the very beginning, I am having trouble with even running it in plain javascript. I have the right dependencies installed:

  "dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "express": "^4.17.1",
    "nodemon": "^2.0.7",
    "redux": "^4.0.5"
  }

I am importing it as specified in docs:

import  { createStore } from "redux";

But I am getting this error:

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

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./app.js" type="module"></script>
</body>
</html>

And javascript:


import  { createStore } from "redux";

const counter = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state.value + 1;
    case "DECREMENT":
      return state.value - 1;
    default:
      return state;
  }
}
let store = createStore(counter);
const render = () => {
  window.document.body.innerText = store.getState();
};
store.subscribe(render);
render();
window.document.addEventListener("click", () => {
  store.dispatch({ type: "INCREMENT" });
});

console.log(store.getState());

Any help would be much appreciated :sweat_smile:

2

If you’re looking at the redux toolkit docs, I think you’re looking at the example of not using redux toolkit (ie the “this is how you used to do it, read on to see how you do it now” bit). If you’re looking at the redux docs, then you’ve installed redux toolkit, you don’t need to install redux again, just use that:

Minor now I’ve realised what you’re doing, but you’ve already installed redux toolkit, that’s redux with some extras that are commonly used with it. You don’t need to install redux again. Also, redux toolkit [massively] simplifies things and you don’t need most of the boilerplate you’re writing there. See:

I assume something is wrong with your installation here for it not to find the package; it’s assuming that it’s a local JS file so it can’t find it.

Edit: you need to explain a bit more about your setup here: you have installed two backend dependencies (express and nodemon) then two front-end dependencies (redux toolkit and then redux), how are you trying to use redux?

Edit edit: are you just trying to use ES6 modules in the browser? Because that’s not how JavaScript modules work: they have to be fully qualified, eg import { func } from "./path/to/the/file.js";

import { createStore } from "redux" isn’t valid JS if that’s what you’re trying to do. There are widely used tools called module bundlers (Webpack is an example) that let you write imports like that, and writing it that way tells the bundler to look in your node_modules folder. Most JS documentation assumes you are using a module bundler (eg the redux docs). If you aren’t, then that won’t work, as I say, it’s not valid JS.

If this is what you’re trying to do, then you don’t nornally install the frontend dependencies in Node modules, you import it, eg:

If you do install in node modules, then you a. need to ensure the package supports ES6 modules, and b. specify the path to the module entry point.

Bear in mind that if you try to use (eg) React as an ES6 module, and you want to use JSX, it just isn’t really going to work (React assumes you are compiling your code). At this point in time, it is very difficult to build JS applications using ES6 modules, almost the entire ecosystem assumes you are not doing that.

1 Like
3

Fair enough, I am still very inexperienced and don’t know all this stuff :slight_smile:
I was simply watching this:

I was watching this and wanted to recreate it on my local machine as a practice. I did suspect that there something wrong with the import though. Also I was trying to do it in pure JS, as I will be using in Angular, not in React. Thought it’s gonna be easier to just do it for now in JS then introduce it slowly to Angular. Anyway I will have a proper look at it tomorrow. Thank you very much for the answer :slight_smile:

4

There’s no problem doing it – use Skypack and search redux if you just want to use redux, or use the link I posted for redux toolkit of you want to use that, it’ll work fine – if it’s just to learn redux, then there’ll not be an issue, bit you might need to do a bit of googling re. translating between what the docs use and using JS modules

1 Like
5

Fair enough, it would be good to know how it all works together so will have a read today.
Thanks for that, I appreciate it :slight_smile:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.