1.I'm building a react project and try to use Babel to simplified the import. Here is the code for babel.config.js file.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
alias: {
"pages": "./src/Page",
},
},
],
],
};
This is the code for jsonconfig,json file
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"pages/*": [
"./src/Page/*"
]
}
}
}
Then I try to import the Login component from pages module in App.js file
import React, { useState, useEffect } from "react";
import ReactDOM from 'react-dom';
import "./Boostrap/bootstrap5.css";
import "./Boostrap/style-main.css";
import axios from "axios";
// import Login from "./Page/Login";
import Login from "pages/Login";
But I got this error \frontend\node_modules\pages doesn't exist
@ ./src/index.js 7:0-24 12:38-41
ERROR in ./src/App.js 12:0-32
Module not found: Error: Can't resolve 'pages/Login' in 'C:\Users\jason\Desktop\demoApp\frontend\src'`
:
The folder structure would be like :
These are another error message
ERROR in ./src/App.js 11:0-32
Module not found: Error: Can't resolve 'pages/Login' in 'C:\Users\jason\Desktop\demoApp\frontend\src'
resolve 'pages/Login' in 'C:\Users\jason\Desktop\demoApp\frontend\src'
Parsed request is a module
using description file: C:\Users\jason\Desktop\demoApp\frontend\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
C:\Users\jason\Desktop\demoApp\frontend\src\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\jason\Desktop\demoApp\frontend\node_modules
C:\Users\jason\Desktop\demoApp\frontend\node_modules\pages doesn't exist
C:\Users\jason\Desktop\demoApp\node_modules doesn't exist or is not a directory
C:\Users\jason\Desktop\node_modules doesn't exist or is not a directory
C:\Users\jason\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\jason\Desktop\demoApp\frontend\node_modules
C:\Users\jason\Desktop\demoApp\frontend\node_modules\pages doesn't exist
@ ./src/index.js 7:0-24 12:38-41
The folder structure: So the Page folder structure would be like
├───Component
│ ├───AddPopUp
│ ├───Buttons
│ ├───FacilityForms
│ ├───Filters
│ ├───Footers
│ ├───InputTexts
│ ├───InspectionFilter
│ ├───Labels
│ ├───Navigation
│ ├───NavTab
│ ├───PageHeading
│ ├───SearchBox
│ ├───Table
│ └───TableRow
└───Page
├───ClientManagement
└───ClientSetting` ``