I just initialized a new project using create-react-app and everything was ok until I installed react-router-dom. Every time I start my development server I get a warning
./node_modules/webpack/buildin/global.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherApp\node_modules\webpack\buildin\global.js
Used by 1 module(s), i. e.
C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherApp\node_modules\mini-create-react-context\dist\esm\index.js
* C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherapp\node_modules\webpack\buildin\global.js
Used by 2 module(s), i. e.
C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherapp\node_modules\#pmmmwh\react-refresh-webpack-plugin\client\utils\safeThis.js
I found out it can be problem with my imports, but there is no problem with my imports. Every time i remove line with my react-router-dom import everything is ok.
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
I tried removing node_modules and installing npm again using different prompts (gitBash, cmd and powershell) but I still get this warning. Any ideas how to fix that? Currently my 'project' is just Root.js with some empty directories.
This issue is thrown after installing react-router-dom. Try removing it and see those errors gone. This particular error does not affect the codes you write. Even if you upload to heroku or netlify, it would be fine. I think it is a bug they are to fix soon.
Related
I have a very serious issue right now trying to use Next js. No matter what version I use, any time I try to run the npm run dev, I get the following error:
error - ./node_modules/next/dist/client/dev/amp-dev.js
Module not found: Can't resolve 'C:\Usersudbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\compiled\regenerator-runtime\runtime.js' in 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\client\dev'
error - Error: Cannot find module 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\.next\fallback-build-manifest.json'Require stack:
This is literally right after running the create next app command, so I don't install any additional package. One thing realized though is that this error doesn't occur when I use the public folder on my window PC but when I use the user folder called udbasili I get the above error. I have been using next.js for a long time and this is the first I am seeing this error
I had the same issue
the problem was that my project files was in a folder beginning with "ud". My folder name was "udemy".
Renaming that folder or moving the project outside that folder solved the issue
If you compare the paths, there is a missing '\' :
C:\Users**\\**udbasili\Documents\Programming\Acumen Developers\...
C:\Usersudbasili\Documents\Programming\Acumen Developers\...
A quick solution that I gave to this issue was to create the project on a different path. For example:
C:\dev\myportfolio
Please head over to https://nextjs.org/docs/messages/swc-disabled
By disabling swc in next.config.js it will resolve your issue.
You can disable swc by adding:
experimental: {
forceSwcTransforms: true,
}
It's possible your autoimport included '/dist/client/dev' in the 'next/amp' path.
Does it work if you import { useAmp } from 'next/amp'?
Recently I have upgraded to React 17 and it's started showing "'React' is declared but its value is never read" error in all the files. As per the React Doc I don't need to import the React anymore. It's working if I remove it but I have concerns here! Mine was a big project.. i don't want to touch each and every file. Is there a way that i get of this problem without removing React from import statement.
I'm using typescript and ESLint.
Add DISABLE_NEW_JSX_TRANSFORM=true in your .env file, and don't forget to stop/start your project
I have a sort of a "monorepo", one big project consisting of a few smaller projects that use React.
I'm trying to break these up into three separate repositories, lets call them Core, Application1, and Application2
The Core is a dependency of both applications, and the Core depends on React, because it defines some React component classes. The applications both also use React.
When I tried to build this all together (using Parcel bundler), I am getting a final bundle which at runtime gives the Invalid Hook Call warning in one (but not both) of the applications.
On that page (or in the error message), it says that the error could be caused by one o these:
You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.
I have checked that #1 is not true, and I'm not even using hooks in any way that I am aware of, so the problem is seems to be multiple versions of React.
I gathered from reading about this that it was a mistake for my Core library to declare React as a dependency, and that it should instead declare it in peerDependencies. That made the Application stop giving the error, but it also made my Core library start having a bunch of Typescript errors and failing to be able to run the unit tests (which rely on React, using Jest/Enzyme to render and validate DOM).
Since specifying React in peerDependencies caused it not to be installed in the node_modules of Core, I decided that I should probably include React in both the peerDependencies and the devDependencies of Core. That fixes the Core library again but breaks the Application.
I'm not really sure of the following:
Why one of my applications fail due to duplicate React copies and the other doesn't, since they seem pretty symmetrical to each other.
Why, even though I only specify React in peerDependencies and devDepenencies in Core I still would get a duplicate copy of React in the dependent application
Whether the method used to bring Core in to the application has any bearing on this. (one method I'm trying is package.json I specify core as a "file:../" style of URL. Another alternative is to use "yarn link", or possibly to do both of these, and I'm not sure whether this has any effect on what ends up in node_modules underneath the application folder or on what gets bundled)
What is the right way to include React in both an Application and a library, in such a way that both of those projects have React available but there does not end up being duplicates in the Application causing this hook error (or, just taking up extra space).
Answering my own question.
I found the following issue helpful: https://github.com/facebook/react/issues/14257
Various different suggestions were made in the comments of ways to solve this problem, either by npm link or yarn linking the react library from the library to the application, or vice versa. Those all seemed promising, since the idea is to make sure that all of the different references to React are actually pointing to the same place. Unfortunately none of those worked for me. (e.g. the answers by JerryGreen and Kas in that issue)
Another user, dcecile, suggested using webpack's alias feature, but I'm not using webpack.
resolve: {
alias: { react: require.resolve("react") }
},
Parcel has a similar alias feature but can't be used in quite the same way because it's used in the package.json file so things like require.resolve can't be called like they are in webpack's js config file.
I ended up finding a way to use Parcel's alias feature to do what I wanted, based on another example from https://github.com/jaredpalmer/tsdx/issues/64 from user jaredpalmer. In my situation, I'm adding this to the application's package.json, and it appears to get rid of the duplication problem and the "Invalid Hook Call" error:
"alias": {
"react": "../my-core-library/node_modules/react",
},
I'm creating an app with react in using WebStorm. I am attempting to use react-router-dom useParams. I have react-router-dom 5.1.2 as a dependency, but useParams is grayed out in import statement. When I hover over useParams it says "Cannot resolve symbol useParams". I am also trying to import Switch and i'm receiving a similar message "Cannot resolve symbol Switch". What's even more unusual is Link is being imported from react-router-dom.
node_modules/react-router-dom/esm/react-router-dom.js re-exports Switch, Root, useParams from react-router. But the latter is not listed as a direct dependency in your package.json and thus is excluded from indexing.
You can un-exclude it by choosing Mark Directory as/Not excluded from node_modules/react-router right-click menu:
But I'd strongly recommend installing Typescript stubs for the package for better completion/type hinting instead: put cursor on "react-router-dom" in import statement, hit Alt+Enter, choose Install TypeScript definitions for better type information
See https://www.jetbrains.com/help/webstorm/2019.3/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files
I was encountering the same issue in 2020.1. I didn't have the Alt+Enter option of installing TypeScript definitions. I had to go to File > Settings > Languages & Frameworks > JavaScript > Libraries and Download... #types/react-router to make the warning go away. I never would have thought to download the react-router types if it weren't for lena's answer.
The list is a little daunting because at first glance it looks like you have to scroll through it, but, if you click on one of the entries and start typing, a search box should appear.
Beside of adding proper library you need to add proper scope for your project.
Downlaod required libraries.
Double check if they are in proper scope.
While trying to solve another problem (inadvertently over-wrote /constants/index.js without realizing it), I re-named the constants directory constants2. After restoring index.js, I changed the directory name back to constants.
Now, when RN resolves the path to /constants/Layout.js, it's throwing
undefined is not an object (evaluating '_constants2/default.tabBarHeight')
Changing the name back to constants2 doesn't help.
I have followed all of the instructions for clearing caches (npm and yarn), including deleting the temp cache directory. I have searched the contents of the files in my project and in the cache directory for the string constants2 and nothing found. I have upgraded everything possible.
I'm at wit's end. Where could this old path be stored?? I renamed the directory within Atom and I'm wondering if that might be the source of the trouble. Platform is Windows 10.
Solved this, but I'm not sure why.
I changed this:
import Layout from '../constants';
import Colors from '../constants';
import Images from '../constants';
To this:
import { Colors, Images, Layout } from '../constants';
and the problem went away. Shouldn't either one have worked? And I still can't see why it was still referencing the former path.