Related
So I'm using Vite with React, and working fine until this morning. When I run npm run dev local server starts normally, and there is no error/warning in the console. However in the browser console, I see this warning,
Something has shimmed the React DevTools global hook (__REACT_DEVTOOLS_GLOBAL_HOOK__). Fast Refresh is not compatible with this shim and will be disabled.
and hot reload is not working. Whenever I change something I have to manually refresh the browser window to see the changes. Any help?
my package.json file:
{
"name": "test",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#capacitor/android": "^4.6.3",
"#capacitor/browser": "^4.1.1",
"#capacitor/core": "^4.6.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1"
},
"devDependencies": {
"#capacitor/cli": "^4.6.3",
"#types/react": "^18.0.27",
"#types/react-dom": "^18.0.10",
"#vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.6",
"vite": "^4.1.0"
}
}
I have been browsing the web to find an answer to my problem. I made a fresh react app, and if I make changes to app.js file - nothing happens. I have to run the 'npm start' command to see any changes in App.js and index.js files ( index.html updates changes after refresh ).
Anyways, I tried a few things such as adding a start script to package.json
FAST_REFRESH=fast npm start
as well as making a .env file with
FAST_REFRESH=fast
and even installing custom npm/webpack react refresh packages, or making a new project in a different directory. But it refuses to comply!
I'm on Windows.
I'm looking for any other ideas on how to fix this problem.
EDIT:
Package.json
{
"name": "practice-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "FAST_REFRESH=false vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"typescript": "^4.6.4",
"vite": "^3.1.0"
}
}
Package-lock.json
"name": "practice-project",
"version": "0.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "practice-project",
"version": "0.0.0",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"typescript": "^4.6.4",
"vite": "^3.1.0"
}
},
EDIT2:
Ok, I got it to work on my WSL/Ubuntu. No idea why it didn't want to work on windows though.
This post relates to a rapidly changing event.
After running 'npm update' on my app, I am suddenly getting the following error:
Compiled with problems:
ERROR in ./node_modules/pako/lib/zlib/trees.js 257:106
Module parse failed: Unexpected token (257:106)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| * not null.
| */
> function gen_bitlen(s, desc) /* deflate_state *s;*/ /* tree_desc *desc; /* the tree descriptor */*/{
| var tree = desc.dyn_tree;
| var max_code = desc.max_code;
Strange. So I compared it to the same app running on a different workstation with the same code, but where I did not run 'npm update'. The app works, no surprise.
I've seen other posts with this error, but their solutions do not seem to apply to my environment.
I cannot figure out why it's not working on my main workstation. If I copy over node_modules from the working station, the app starts fine. But as soon as I remove node_modules and package-lock.json and reinstall, the app will not start. I've removed node_modules/package-lock.json/clear npm cache. Doesn't help.
I'm comparing the module versions via 'npm ls', and they are identical on both workstations.
Both are running NodeJS 8.12.0 and npm 8.19.2
I looked at the file that it's erroring out on (pako/lib/zlib/trees.js), and it's identical on both systems.
I have no idea what 'pako' is, but using 'npm explain pako' it appears to have something to do with pdf-lib, which was never updated.
My app was built with create-react-app.
I'm at a complete loss. Here is my package.json:
{
"name": "foo",
"version": "0.1.0",
"description": "Foo",
"contributors": [],
"license": "UNLICENSED",
"private": true,
"dependencies": {
"#coreui/chartjs": "^2.0.0",
"#coreui/coreui-pro": "^3.4.2",
"#coreui/icons": "^2.1.0",
"#coreui/icons-pro": "^2.0.3",
"#coreui/icons-react": "^1.1.0",
"#coreui/react": "^3.4.6",
"#coreui/react-chartjs": "^1.1.0",
"#coreui/utils": "^1.3.1",
"#fortawesome/fontawesome-free-solid": "^5.0.13",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#nadavshaar/react-grid-table": "^1.0.0",
"#pdf-lib/fontkit": "^1.1.1",
"#react-firebase/auth": "^0.2.10",
"ag-grid-community": "^25.3.0",
"ag-grid-react": "^25.3.0",
"arithmetic": "^1.0.1",
"bootstrap": "^5.2.0",
"classnames": "^2.3.1",
"codemirror": "^5.63.3",
"core-js": "^3.19.1",
"downloadjs": "^1.4.7",
"firebase": "^9.12.1",
"firebase-admin": "^11.0.1",
"firebaseui": "^6.0.1",
"formik": "^2.2.9",
"mobx": "^6.3.3",
"mobx-react": "^7.1.0",
"pdf-lib": "^1.17.1",
"prop-types": "^15.7.2",
"random-id": "^1.0.4",
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-awesome-button": "^6.5.1",
"react-big-calendar": "^0.33.6",
"react-bootstrap": "^2.4.0",
"react-collapsible": "^2.10.0",
"react-cookie-consent": "^8.0.1",
"react-dom": "^17.0.2",
"react-firebase-hooks": "^5.0.3",
"react-firebaseui": "^6.0.0",
"react-grid-layout": "^1.3.0",
"react-range": "^1.8.12",
"react-redux": "7.2.4",
"react-router-dom": "^5.3.0",
"react-select": "^4.3.1",
"react-text-mask-hoc": "^0.11.0",
"react-toastify": "^9.0.8",
"reactstrap": "^8.10.0",
"redux": "4.1.0",
"rpg-dice-roller": "1.6.0",
"sass": "^1.55.0",
"sillyname": "^0.1.0",
"spinkit": "2.0.1",
"string-math": "^1.2.2",
"styled-components": "^5.3.3",
"yup": "^0.32.11"
},
"devDependencies": {
"mutationobserver-shim": "^0.3.7",
"react-scripts": "^5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:cov": "npm test -- --coverage --watchAll=false",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"eject": "react-scripts eject",
"zip": "git archive -o coreui-pro-react-admin-template-v$npm_package_version.zip -9 HEAD"
},
"bugs": {
"url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/*index.js",
"!src/serviceWorker.js",
"!src/polyfill.js"
]
},
"engines": {
"node": ">=8.16",
"npm": ">=6"
}
}
I made a workaround. I compared my old and new package-lock.json of my projects and I saw some #babel lib version changed to v7.20.2 (on Nov 4th, 2022). I overwrote the new package-lock.json with old one and my react app built and ran successfully again.
I then changed (downgrade) some of #babel package in my package.json and it is solved the problem:
Put this lines into your package.json file:
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin":"7.19.0",
"#babel/helper-module-transforms":"7.19.6",
https://github.com/babel/babel/issues/15132
Babel fixed their issue. you can use the latest version and it should work now. (I verified it)
extending #Attila Szombathelyi's answer,
If you are using CRA, you can make use of resolutions in your package.json
{
"name": "app-name",
"version": "1.0.0",
"dependencies": {
...
},
...
"resolutions": {
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin": "7.19.0",
"#babel/helper-module-transforms": "7.19.6",
"babel-loader": "8.2.5"
}
}
Solution in my case was to disable babel dependencies transpilation (which was enabled in our project).
How I did it? In my project vue-cli is used. So I have disabed transpileDependecies option in vue.config.js
If you are using a bare webpack you may also find appropriate solution for it or any other build system.
Workaround: As of npm 8.3.0, you can also use npm's
overrides in package.json. Delete package-lock.json and node_modules folder (recommended).
"overrides": {
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin": "7.19.0",
"#babel/helper-module-transforms": "7.19.6"
}
I have created an alias for react and react-dom in my next.config.js. This is my next.config.js:
var path = require("path");
module.exports = (phase) => {
return {
// typescript: {
// ignoreBuildErrors: false,
// },
webpack5: true,
webpack(config, options) {
// const { isServer } = options;
// if (!isServer) {
// config.resolve.fallback.fs = false;
// }
config.module.rules.push({
test: /\.svg$/,
loader: "#svgr/webpack",
});
config.resolve.alias["react"] = path.resolve(
__dirname,
"shared-js/node_modules/react"
);
config.resolve.alias["react-dom"] = path.resolve(
__dirname,
"shared-js/node_modules/react-dom"
);
console.log(path.resolve(__dirname, "shared-js/node_modules/react-dom"));
return config;
},
};
};
Why am I doing this?
I have a component library, which is based on material ui. This is imported to my nextjs app via a submodule (shared-js). This is the package.json for my component library:
{
"name": "my-component-library",
"version": "1.0.0",
"description": "",
"author": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd": "dist/index.min.js",
"source": "src/index.js",
"scripts": {
"start": "rollup -c -w",
"build": "NODE_ENV=production rollup -c",
"build-dev": "NODE_ENV=develop rollup -c --minifyInternalExports=false",
"prettier": "prettier --write ./src"
},
"peerDependencies": {
"eslint": "^8.15.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"license": "ISC",
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.4.2",
"#mui/material": "^5.4.1",
"#mui/styles": "^5.4.2",
"#mui/x-data-grid": "^5.7.0",
"#rollup/plugin-node-resolve": "^13.3.0",
"prop-types": "^15.8.1",
"react-beautiful-dnd": "^13.1.0",
"react-grid-layout": "^1.3.4",
"react-resizable": "^3.0.4",
"recharts": "^2.1.9",
"rollup-plugin-import-css": "^3.0.3",
"styled-components": "^5.3.3",
"use-react-screenshot": "^3.0.0"
},
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.17.10",
"#babel/plugin-transform-runtime": "^7.17.10",
"#babel/preset-env": "^7.17.10",
"#babel/preset-react": "^7.16.7",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^21.0.2",
"#svgr/rollup": "^6.2.1",
"babel-eslint": "^10.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-standard": "^5.0.0",
"prettier": "^2.6.2",
"rollup": "^2.72.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-filesize": "^9.1.2",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-visualizer": "^5.6.0"
},
"files": [
"dist"
]
}
Here is my package.json for my nextjs app:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"repository": "",
"author": "",
"license": "MIT",
"dependencies": {
"next": "^12.1.5",
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}
And my folder structure for the project:
-.next
-node_modules
-pages
-shared-js
--node_modules
--package.json
package.json
next.config.js
The problem is, that I have two conflicting versions of react and react-dom (I guess) in my shared-js/node_modules and the other ones in the node_modules folder of my nextjs app. This caused the error "Invalid hook call" whenever I tried to import a component to my nextjs app. I looked into the documentation and saw that this might be because of two conflicting react / react-dom versions, which is indeed the case. So I tried to avoid this by defining this alias in my next.config.js.
Which led me here. Whenever I run npm run dev or npm run build for my nextjs app, I get this error, telling me that react-dom is apparently missing:
wait - compiling /_error (client and server)...
wait - compiling...
error - ./node_modules/next/dist/client/index.js:513:35
Module not found: Can't resolve 'react-dom/client'
Why is that? The path is correct, the dependency is there but still I get this error. Is there anything I am missing? Or something I am doing wrong?
What I already tried: Deleting node_mdoules and package-lock.json from both nextjs and my component library and reinstall them. Deleting .next and restart via npm run dev
that's how I solved the problem with the conflicting versions.
Good description of the problem: https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link/
My next.config.js
var path = require("path");
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.resolve.alias["react"] = path.resolve("./node_modules/react");
return config;
},
};
I've been learning Webpack to transition from Bower. I've built a basic Angular(1.6.6) app on NodeJS(8.9.1) using Webpack(3.8.1) and Yarn(1.3.2); however, I get "Internal Server Error" when run on Heroku. Deploys fine, though, and works perfectly in localhost.
In my research, I've learned that Webpack needs to be in dependencies instead of devDependencies. Fixing this may have prevented other errors, but I have the same problem.
Heroku logs blame ejs, but I doubt that is the real problem:
Error: Could not find include include file.
at includeSource (/app/node_modules/ejs/lib/ejs.js:276:17)
at getIncludePath (/app/node_modules/ejs/lib/ejs.js:152:13)
at /app/node_modules/ejs/lib/ejs.js:629:26
at Array.forEach ()
at Template.generateSource (/app/node_modules/ejs/lib/ejs.js:605:15)
at Template.compile (/app/node_modules/ejs/lib/ejs.js:509:12)
at Object.compile (/app/node_modules/ejs/lib/ejs.js:358:16)
at handleCache (/app/node_modules/ejs/lib/ejs.js:201:18)
at tryHandleCache (/app/node_modules/ejs/lib/ejs.js:223:14)
at View.exports.renderFile [as engine]
(/app/node_modules/ejs/lib/ejs.js:437:10)
My package.json:
{ "name": "Simple Project",
"version": "0.1.0",
"description": "Simple Project",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "node server.js",
"postinstall": "webpack -p",
"heroku-prebuild": "webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Simple/Project.git"
},
"keywords": [],
"author": "Name",
"license": "MIT",
"bugs": {
"url": "https://github.com/Simple/Project/issues"
},
"homepage": "https://github.com/Simple/Project#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"ng-annotate-loader": "^0.6.1",
"node-sass": "^4.6.1",
"normalize.css": "^7.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2"
},
"dependencies": {
"angular": "^1.6.6",
"angular-animate": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-ui-bootstrap": "^2.5.6",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.2.1",
"webpack": "^3.8.1"
},
"engines": {
"node": "^8.9.1",
"yarn": "^1.3.2"
}}
I've set Webpack to put all .js, vendor files, and styles into /dist which is .gitignore(d) in my git, but NOT in my push to Heroku. You can check out my git here:
https://github.com/SalamanderMike/portfolio
I've been researching this for a couple days and the answer hasn't revealed itself. I'm hoping someone can help me figure it out. I'm sure it's a simple thing I am overlooking. Thanks for your help!