Search code examples
reactjsimportabsolute

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 :

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