I have a react app , I packaged it using npm pack and I want to use it inside the main.ts in an electron app ,
I'm trying to import it like this import App from 'mypackage' but it keeps giving me this error
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\node_modules\mypackage\src\index.js from C:\src\main\main.ts not supported.
Instead change the require of index.js in C:\src\main\main.ts to a dynamic import() which is available in all CommonJS modules.
in my json file
{
"name": "mypackage",
"version": "0.1.0",
"main":"src/index.js",
"private": true,
"dependencies": {
"#blueprintjs/core": "^3.52.0",
"#blueprintjs/popover2": "^0.12.9",
"#rimbu/core": "^0.8.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.37",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "4.0.3",
"react-table": "^7.7.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"type" : "module",
"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/react-table": "^7.7.9",
"sass": "^1.45.1"
}
}
Related
I've developed UI using create-react-app. UI is working fine with the normal npm start command, but when I build the UI with npm run build it's throwing the error `Conversion from 'BigInt' to 'number' is not allowed
I didn't get many related solutions to my problem on google. Can someone help please ?
My Package.json
{
"name": "erp-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.15",
"#popperjs/core": "^2.10.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"bootstrap": "^5.0.1",
"font-awesome": "^4.7.0",
"jsontokens": "^3.1.1",
"react": "^17.0.2",
"react-datepicker": "^4.8.0",
"react-dom": "^17.0.2",
"react-hook-form": "^7.17.0",
"react-paginate": "^7.1.3",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"react-toastify": "^8.0.3",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
Error screenshot which is point in browser
I used react as frontend and firebase as backend.
And it succeeded in deploying to vercel.
But it just shows a blank screen.
And when I go to the console, this error code appears.
Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)
my repo: https://github.com/kagrin97/fireBase-twitter
package.json
{
"name": "firebase-twitter",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.43",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"firebase": "^9.8.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"uuid": "^8.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"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/uuid": "^8.3.4",
"autoprefixer": "^10.4.7",
"gh-pages": "^4.0.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.5"
},
"homepage": "."
}
I add in my package.json proxy for making request to server runing on other port.
after that, my module css styles stop working, in the devTools i found that the styles are loading well, but classnames for DOM elements are not loading at all.
How it looks now:
How it should be:
some page code:
import styles from "./LoginPage.module.css";
export default function LoginPage() {
return (
<div className={styles.LoginPage}>
</div>
);
}
Here is my package.json:
{
"name": "job-bot-admin-panel",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000/",
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"http-proxy-middleware": "^2.0.4",
"multiselect-react-dropdown": "^2.0.21",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^7.2.8",
"react-router-dom": "^6.3.0",
"react-scripts": "^0.9.5",
"react-select": "^5.2.2",
"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"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
your filename is incorrect. for css modules you don't need to add .module to the filename, just name it LoginPage.css and import it with that same name and your styles should be fine. React is getting confused with your module filename.
{
"name": "furniture",
"version": "0.1.0",
"private": true,
**"type": "module"**,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#mui/icons-material": "^5.2.5",
"#mui/material": "^5.2.6",
"#mui/styles": "^5.2.3",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"dot-env": "^0.0.1",
"mongoose": "^6.1.6",
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-swipeable-views": "^0.14.0",
"web-vitals": "^2.1.2"
},
"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"
]
}
}
Compiled with problems:X
ERROR in ./src/index.js 9:0-58
Module not found: Error: Can't resolve 'react/jsx-dev-runtime' in '/home/reddragon/Documents/Projects/furniture/src'
Did you mean 'jsx-dev-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-dev-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
When I do babel configuration it will create a mess.
I can't clear this error. I've installed and reinstalled webpack types but can't figure out how to make this work. Is there a way to clear or bypass this error?
Error
TypeScript error in /app/src/components/MoviePage/MoviePage.tsx(9,11):
Property 'context' does not exist on type 'NodeRequire'. TS2339
Code with error
const movieThumbImages = importAll(
require.context("../../assets/moviePosterImages", false, /\.(png|jpe?g|svg)$/)
);
Function
export const importAll = (r: any) => {
return r.keys().map(r);
};
package.json
{
"name": "movie-hunt",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "^26.0.24",
"#types/node": "^12.20.20",
"#types/react": "^17.0.19",
"#types/react-dom": "^17.0.9",
"#types/react-router": "^5.1.16",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.3.5",
"web-vitals": "^1.1.2"
},
"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": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/react-router-dom": "^5.1.8",
"#types/webpack-env": "^1.16.2",
"webpack-env": "^0.8.0"
}
}