I found this error :
"Module not found: Can't resolve '../http-common'" when a start the react project
I already try to removing package-lock.json and the node-modules folder, run npm install and then npm start again
But it's doesn't work and it failed to compile
import React from 'react';
import http from "../http-common";
class PersonnageDataService{
getAll(){
return http.get("/personnages");
}
get(id){
return http.get(`/personnages/${id}`);
}
create(data){
return http.post("/personnages", data);
}
update(id, data){
return http.put(`/personnages/${id}`, data);
}
delete(id){
return http.delete(`/personnages/${id}`);
}
deleteAll(){
return http.delete(`/personnages`);
}
}
export default new PersonnageDataService();
and this is my package.json file
{
"name": "mearnclient",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Do you have any solutions ?
If http-common is a module defined outside of your project you should reference it as 'http-common' and declare it in dependencies inside package.json.
If http-common is a js file inside your project, it should be available in the parent folder of PersonnageDataService. Example: if PersonnageDataService is in src/services/ then you need a http-common.js inside src.
Related
When I deploy a React app using Cloudflare Pages, the Building application step fails with the error:
error react-scripts#5.0.0: The engine "node" is incompatible with this module. Expected version ">=14.0.0". Got "12.18.0"
error Found incompatible module.
There is no such error when running yarn build or yarn run start on my local machine.
How can this error be fixed?
My package.json:
{
"name": "foobar",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#emotion/react": "^11",
"#emotion/styled": "^11",
"#supabase/supabase-js": "^1.33.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"framer-motion": "^5",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Thank you for all your help!
I once encountered this problem and I was able to fix it by specifying the NODE_VERSION environment variable.
In your case, set the environment variable as shown below:
NODE_VERSION = 14.0.0
I'm running a react app using a yarn package manager. I'm getting the aforementioned ESLint error. I have tried the following to fix it:
Deleted package-lock.json and node modules and installed yarn and ran yarn init
Modified the eslint-plugin.js file to include the following at the top of the file:
I used both of these at different times to no avail:
this.CliEngineCtor = require(this.basicPath).CLIEngine;
this.CliEngineCtor = require(this.basicPath).CLIEngineCtor;
Pertinent package.json entry:
{
"name": "react-millionaire-quiz",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.0",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.7.0"
},
I tried changing the eslint to lower versions, but that just created other problems breaking other dependencies and creating other errors.
How can this be fixed, or do I have to disable ESLint?
I found that I can not make to work named import with css modules in create-reat-app.
The following code fires an error:
import * as styles from './PriceTable.module.css';
and the error is:
export 'table' (imported as 'styles') was not found in './PriceTable.module.css' (possible exports: default)
I know that I can just use import styles from './PriceTable.module.css'; but this is not what I need as I am using parcel and it requires named imports for tree shaking.
I would appreciate it if anyone has any thoughts about this how to fix it?
Here is the code:
import React from 'react';
import * as styles from './PriceTable.module.css';
const PriceTable = (props) => {
console.log(styles)
return (
<div className={styles.table}>This is a price table {props.widget} and the hex color is: {props.color} !</div>
)
}
export default PriceTable;
package.json
{
"name": "react-widgets",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"serve-build": "serve -s build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:widget": "parcel build src/index.js --no-source-maps --dist-dir docs"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"parcel": "^2.0.1",
"postcss": "^8.4.5",
"react-app-rewired": "^2.1.8"
}
}
npm start command not progressing after below point -
Application is not getting loaded due to this.
Below is package.json -
{
"name": "reacttest",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.1",
"#material-ui/data-grid": "^4.0.0-alpha.33",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.2.2",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"redux": "^4.1.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "set HTTPS=true&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Windows (cmd.exe)
set HTTPS=true&&npm start
Windows (Powershell)
($env:HTTPS = "true") -and (npm start)
Linux, macOS (Bash)
HTTPS=true npm start
add variable in .env
REACT_APP_HTTPS = true
and in script
"scripts": {
"start": "react-scripts start",
....
}
then run npm start and see.
i'm getting this error Attempted import error: 'Outlet' is not exported from 'react-router-dom
if i comment Outlet it throws Attempted import error: 'Switch' is not exported from 'react-router-dom
my package.json is
{
"name": "react-shoe-store-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "4.0.1",
"react-slick": "^0.27.13",
"slick-carousel": "^1.8.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
i have installed react-router-dom v6 but i can't configure this error
I can't find any info about Outlet, but Switch is exported from react-router and not react-router-dom, see here
import { Switch } from "react-router";