In my project, I am using falcor which happen to have Rxjs as a dependency which has a known problem with webpack.
So far after following what the previous link says everything works fine.
Alongside I am using concurrently as a DevDependency, which has Rxjs as a dependency but with a newer version then falcor, when I compile my scripts with webpack I get an error in the browser:
Uncaught TypeError: Cannot read property 'prototype' of undefined
at inherits.inherits.Rx.internals.inherits
I solved the problem by installing Rx as a dependency in my project with the version used by falcor.
Here I am asking is there any solution with either yarn or npm to solve the problem without adding Rx as a dependency.
Related
I am new to coding and would appreciate some help with this I get the following error when I try to run my react app: npm run start
Failed to compile.
Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize'
Require stack:
/Users/abc/node_modules/postcss-loader/dist/utils.js
/Users/abc/node_modules/postcss-loader/dist/index.js
/Users/abc/node_modules/postcss-loader/dist/cjs.js
/Users/abc/node_modules/loader-runner/lib/loadLoader.js
/Users/abc/node_modules/loader-runner/lib/LoaderRunner.js
/Users/abc/node_modules/webpack/lib/NormalModule.js
/Users/abc/node_modules/webpack-manifest-plugin/dist/index.js
/Users/abc/node_modules/react-scripts/config/webpack.config.js
/Users/abc/node_modules/react-scripts/scripts/start.js
(#/Users/abc/node_modules/bootstrap/dist/css/bootstrap.css)
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.css)
./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.css)
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize'
Require stack:
/Users/abc/node_modules/postcss-loader/dist/utils.js
/Users/abc/node_modules/postcss-loader/dist/index.js
/Users/abc/node_modules/postcss-loader/dist/cjs.js
/Users/abc/node_modules/loader-runner/lib/loadLoader.js
/Users/abc/node_modules/loader-runner/lib/LoaderRunner.js
/Users/abc/node_modules/webpack/lib/NormalModule.js
/Users/abc/node_modules/webpack-manifest-plugin/dist/index.js
/Users/abc/node_modules/react-scripts/config/webpack.config.js
/Users/abc/node_modules/react-scripts/scripts/start.js
(#/Users/abc/node_modules/bootstrap/dist/css/bootstrap.css)
Thank you so much
I've tried updating to the latest version of node and npm, however, that did not help. I've also verified my code several times as I'm mostly practicing along with a course. Thank you.
As it appears this error will temporarily get fixed by installing the latest version of Node.js.
So to fix this follow these steps:
Download and install the latest Node.js version (recommended for most users, which is 16.15.0 at this moment).
Delete your node_modules directory from your project. Then you can optionally clear npm cache with npm cache clean and verify it with npm cache verify.
Delete package-lock.json/yarn.lock file.
Reinstall all of the dependencies and create a new dependency tree using one of the following commands: npm i/npm install/yarn/yarn install.
Note1: If in any case, you use node-sass in React projects yet, it is recommended to use sass instead.
Note2: In some cases skipping step 1 will also work as expected, but I recommend upgrading the Node.js version if you do not have other dependencies to prevent that.
Note3: As #IvaniltonBezerra mentions in the comments, some app builds may throw errors, since upgrading Node.js to its latest version will upgrade the npm as well it may not compatible with your current dependency tree in production, so to prevent such a problem you have to use --legacy-peer-deps to restore the old behaviour of the old dependencies.
Update
This is now seem to be permanently solved in PostCSS Preset Env and following the above steps with skipping step 1 will also solve the problem.
I'm using socket.io-client in my React js web app. It compiles without error, but when I try to open the development server (localhost:3000) I get the following error:
In this project where the error is being thrown, here is a list of the relevant packages and their versions:
#testing-library/jest-dom#5.14.1
#testing-library/react#11.2.7
#testing-library/user-event#12.8.3
react-dom#17.0.2
react-scripts#4.0.3
react#17.0.2
socket.io-client#4.3.1
Webpack Version: 4.44.2
Threads like this one suggest that this is some sort of issue with mixing import and module.exports in ES6, but I definitely don't want to modify the socket.io-client module.
In a previous React project, where the module works, here is a list of the relevant packages and their versions:
#testing-library/jest-dom#4.2.4
#testing-library/react#9.5.0
#testing-library/user-event#7.2.1
react-scripts#3.4.4
react#16.14.0
socket.io-client#4.1.2
Webpack Version: 4.42.0
I've played around a little bit with different versions of socket.io-client and react to try to get it working, but to no avail...
Webpack uses ES syntax, so commonJS syntax will not work.
export default lookup
I am trying to get an app up and running with Vue 2 and everything was fine until I tried using the node-sass and sass-loader packages. I started getting errors and after investigation, it looks like I need to be using webpack 5+ for the latest node-sass package to work. After poking around it looks like when I created the project it defaulted to webpack version 4.46.0.
I updated my vue-cli to the latest version as per the instructions on the official page and then tried re-initializing a new project and still have the same issue. Currently, I have #vue/cli 4.5.12 which looks to be the latest (I think).
I am initializing the app with vue create <app-name> and I am using the default configs. I did find this page which says "migrating from v4" which perhaps implies there might be a higher version of vue-cli but again I followed all the instructions to no avail, so not sure if I am just missing something here.
I am pretty novice in Vue and not sure what additional info I should provide to make this useful, but I've searched all over and for the life of me cannot figure out what is going on.
From what I found out on GitHub, the latest stable version - 4.5.12 - of Vue CLI still uses Webpack 4: https://github.com/vuejs/vue-cli/blob/v4.5.12/package.json .
Considering that, the easiest solution in my opinion would be to just downgrade sass-loader to version 10 with npm install sass-loader#10 for example, as suggested here: https://stackoverflow.com/a/66087132/1505369.
You could try using a beta version of vue-cli, as I tried, by updating both #vue/cli-service and, I believe, all the vue-cli plugins to version 5.0.0-beta.0, with npm install #vue/cli-service#5.0.0-beta.0 #vue/cli-plugin-babel#5.0.0-beta.0 #vue/cli-plugin-eslint#5.0.0-beta.0 #vue/cli-plugin-vuex#5.0.0-beta.0. It should end up installing and using Webpack 5. For me personally though, it hasn't really solved the issue, as the new error occurred:
ERROR TypeError: The 'compilation' argument must be an instance of
Compilation TypeError: The 'compilation' argument must be an instance
of Compilation
// ...
I'm making a Vue app and one of the dependencies is failing due to calling of an undefined function:
vue-range-slider.cjs.js:150Uncaught ReferenceError: _h is not defined
I thought this could be due to peer dependencies updating and breaking so I removed all the ^ characters from my package.json
The problem persists. What further troubleshooting steps can I take?
The bug is that internally the render function was renamed from _h to _c and you are probably using a component with pre-built js files.
The solutions are
downgrading vue to prior 2.1.5 since this is where the bug was introduced (also downgrade vue-template-compiler to same version)
wait for vue-range-slider developers to fix it
fix it yourself and pull request
Where fixing means distributing the source instead of the pre-built files.
Here is where the error happened:
https://github.com/vuejs/vue/commit/4b51ad048306367a6fb6fbee7445e086d855f31e
Sometimes, when using React libraries, such as react-router, I get this error:
Uncaught TypeError: Cannot read property 'firstChild' of undefined
/~/react-router/~/react/lib/ReactMount.js?:606
How do I fix it?
This error is commonly caused by two versions of React loaded alongside.
For example, if you npm install a package that requires a different React version and puts it into dependencies instead of peerDependencies, it might install a separate React into node_modules/<some library using React>/node_modules/react.
Two different Reacts won't play nicely together (at least yet).
To fix it, just delete node_modules/<some library using React>/node_modules/react.
If you see a library putting React in dependencies instead of peerDependencies, file an issue.
In case anyone has this issue having npm linked two modules depending on react, I found a solution...
Let's say you have Parent depending on React, and Child depending on react. When you do:
cd ../child
npm link
cd ../parent
npm link child
This causes this problem, because parent and child will each load their own instance of React.
The way to fix this is as follows:
cd parent
cd node_modules/react
npm link
cd ../../../child
npm link react
This ensures your parent project supplies the react dependency, even when linked, which is how npm would resolve the dependency when you are unlinked.
Using require('react') and require('React') inconsistently causes this problem as well, even if you only have one version of React.
https://www.npmjs.com/package/gulp-browserify didn't have this problem. Once I stopped using gulp-browserify and switched to watchify+browserify, Uncaught TypeError: Cannot read property 'firstChild' of undefined started happening.
It seems to me peerDependencies is not getting traction. See https://github.com/npm/npm/issues/5080#issuecomment-40545599
I am maintaining react-date-picker (and other react modules), and what I've done until now is to specify the React dependency using the caret, for example ^0.12.0.
Also, when doing a build will all concatenated files, for use outside of the npm ecosystem, I use webpack with
externals: { 'react': 'React'}
which will look for the global var React.
For me, the problem was that I was using a <Link> from react-router inside a <NavItem> from react-bootstrap.
If you are experiencing this crash while server side rendering and none of these answers are the problem, here's the likely culprit:
Doing something async (setTimeout, AJAX, etc.) in componentWillMount. Since componentWillMount is called on the server, this setTimeout/request will still fire. If you setState inside this callback then it'll cause the error above.