I am trying to import a (typescript) package into a (typescript) React project. This modules uses the exports property in the package.json file to control what can be imported from it. But, in my React project, I can not get the paths exported in exports to work. Instead, I can import anything from the module. So for example, I export a path ./certificate using exports in package.json. But instead of importing like:
import {test} from "certificationtypes/certificate"
I need to import like:
import {test} from "certificationtypes/src/certificate"
(It also exposes all other files not exported using the exports directive).
This is the package.json of the module:
{
"name": "inputsvalidator",
"version": "1.0.0",
"description": "",
"main": "./build/src/index.js",
"exports": {
"./certificate": "./build/src/certificate.js"
},
"scripts": {
"build": "tsc",
"prepare": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"devDependencies": {
"typescript": "^4.9.4"
},
"dependencies": {
"#types/validator": "^13.7.10",
"certificationtypes": "file:../certificationTypes",
"countries": "file:../../../../../lib/shared/countries",
"types": "file:../../../../../lib/shared/types",
"validator": "^13.7.0"
}
}
The strange thing is that this does work in Node.js projects! So is there something extra I should do to also make this work in my React project? I did read that this should be supported using webpack.
My package.json for my React project:
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.18.11",
"#types/react": "^18.0.26",
"#types/react-dom": "^18.0.10",
"certificationtypes": "file:../../lib/shared/certificationTypes",
"countries": "file:../../../../lib/shared/countries",
"inputsvalidator": "file:../../lib/shared/inputsValidator",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-spinners": "^0.13.7",
"styled-components": "^5.3.6",
"typescript": "^4.9.4",
"validator": "^13.7.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"
]
},
"devDependencies": {
"#types/styled-components": "^5.1.26"
},
"proxy": "http://localhost:3003"
}
By default, TypeScript does not regard "exports" fields in package.json files when importing packages.
In TypeScript 4.7 or later, this feature can be enabled explicitly in the compiler options by setting moduleResolution to "node16" or "nodeNext" in the current project (there is nothing the imported package can do to enforce this setting), e.g.
// tsconfig.json
{
...
"compilerOptions": {
...
"moduleResolution": "node16",
...
},
...
}
Just be careful that doing so may unexpectedly break other parts of your applications, because then other settings in package.json start to play a role as well.
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"
}
}
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.
I am trying to use the reactstrap dependency in my web application but all imports cannot be recognized.
I have tried re-installing and checked the source folder for the dependencies and they seemed alright. I'm using the MERN stack and am running both servers from the client(react, port 3000) and server side (port 5000).
import React, { Component } from "react";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Container
} from "reactstrap";
The import {...,...,...} from "reactstrap" has become light colored in the editor and I got a message saying that all imports in the declaration are unused.
Below is the information from the package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"react-transition-group": "^4.1.0",
"reactstrap": "^8.0.0",
"typescript": "^3.5.1",
"uuid": "^3.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
That is just your editor telling you that the components you've imported aren't actually being used in the file. Try using them in your code and the warning will go away.