Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Absolute import not finding the module. / React

I have an component which I want to import ‘homeSlice’

Home slice (which is located in the ‘pages’ folder) :

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


const initialState = [
{ id: 1, name: "Andy" },
{ id: 2, name: "Nathan" },
{ id: 3, name: "Andrei" },
];

const homeSlice = createSlice({
name: "users",
 initialState,
reducers: {},
});

export const selectHomeUsers = (state) => state.home;

export const homeReducer = homeSlice.reducer;

And then I have another component in which I make the next import :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

import {homeReducer} from 'pages';

And I have the next jsconfig.json file :

{
"compilerOptions": {
"baseUrl": "src",
"paths": {
  "*": ["src/*"]
}
}
}

But when I try to run the app, I get the error that there is no module found ‘pages’.

>Solution :

  1. Where is the "pages" file located?

  2. You didn’t export homeSlice

  3. When importing a non-default, you must wrap the imported items in curly braces, like so :

    import { homeSlice } from 'pages'

Edit: I realized now that "pages" is a folder and not a file. You have to import the file where your variables are located, not the folder. If you wish to import from a folder you have to create an "index.js" file. See this article for more info

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading