Errors importing React-Router, using create-react-app - reactjs

I'm trying to use react-router with the create-react-app I just created but I'm having issues importing it. I'm importing it like I import the other react dependencies:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Link } from 'react-router-dom';
but I'm getting this error message:
./src/index.js
Module not found: Can't resolve 'react-router-dom' in 'C:\Users\Eric\Code\react-test\src'
I've tried googling and checking on here but I can't find an answer. Why isn't it looking in node_modules?

Install react-router-dom.
I got this error message because I had followed an old tutorial that had me installing the react-router packager instead of react-router-dom package. Couldn't figure it out for a little bit.
To solve this issue, just install react-router-dom:
npm install --save react-router-dom
All set!

Related

./src/index.js Module not found: Can't resolve 'aws-amplify' React

I am trying to learn AWS and react. I keep getting the below error for my react app when i run it on my local machine using "NPM start".
./src/index.js
Module not found: Can't resolve 'aws-amplify' in 'C:\Users\pull-transactions\src'
at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:306:11)
at Object. (src/components/PlaidLink.js:3:1)
index.js config:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
I spent a couple hours searching google but cannot find anything on this. I have another app that is working fine and the file structure looks the same for both. Any help is appreciated. Please let me know if you need more info.
You must install the package before you can use it.
$ npm install # installs packages listed in your package.json file
$ npm install --save aws-amplify # installs the aws-amplify package and saves it to your package.json file

React Suspense Concurrent Mode Not Working

I am trying to use react suspense but I am facing some issue regarding rendering after making changes in react index.js file and I already installed react suspense "npm install react#experimental react-dom#experimental"
My index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
Index.js file
Error
TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createRoot is not a function
Error Image
To anyone updating an old React App, the React support doc on React 18 says to write ONLY:
npm install react react-dom
for the React 18 update.
I had two React 16 apps I wanted to update.
To do so, I first updated to React 17:
npm install react#17.0.0 react-dom#17.0.0
ONLY AFTER this version is installed properly, you are able to install to 18, specifying the version in the installation command:
npm install react#18.0.0 react-dom#18.0.0
After that,
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
works just fine.
Follow the version update on your 'package,json' file.
In order to works is required to use ReactDOM.unstable_createRoot
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.unstable_createRoot(document.getElementById("root")).render(<App />);
change -> import ReactDOM from "react-dom";
to -> import ReactDOM from "react-dom/client";

How to solve #apollo modules causes problems In react project?

Ex - I installed #apollo/react-components to use ApolloProvider in a react project and it causes the following error:
./node_modules/#apollo/react-hooks/lib/react-hooks.esm.js Module not found: Can't resolve 'apollo-client'
It because withApollo is now part of #apollo/client. Changing the import to this should resolve the error.
import { withApollo } from '#apollo/client/react/hoc'

How to configure react.js and react-dom.js dependencies?

I am new to react and I am not able to configure it correctly the command
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(--,--)
is not working even after the locations are given correct.
If you are using create-react-app then don't need to such setup n all.
just create project and start working on that.
Quick Start
npx create-react-app my-app
cd my-app
npm start
for proper understanding and learning. please go through reactjs docs
Sample app
import React from "react";
import ReactDOM from "react-dom";
function App() {
return <div>Hello</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));

'react-router' does not contain an export named 'BrowserRouter'

I'm using react-router version 5.5.1 and am trying to use it in my index.js file:
./src/index.js
14:8-21 'react-router' does not contain an export named 'BrowserRouter'
The import statement within my index.js:
import { render } from 'react-dom';
import { BrowserRouter, Match, Miss } from 'react-router';
you need to import BrowserRouter from react-router-dom
import { BrowserRouter } from 'react-router-dom'
more info about BrowserRouter
BrowserRouter is a part of react-router-dom so you've to import it from react-router-dom.
import { BrowserRouter } from 'react-router-dom'
Match and Miss were components in alpha release of react-router. Match has been changed to Route and Miss has been removed. You can use Switch instead of Miss
Refer to this question about Match and Miss
BrowserRouter is in react-router-dom as others have stated. V4 is very different from v3. I recommend looking at their guide to see how to use it. And any examples you look for should be for version 4.
https://reacttraining.com/react-router/web
import { BrowserRouter as Router, Route } from 'react-router-dom'
Issue:
'Route' is not exported from 'react-router-dom' (imported as 'Router').
Solution:
Just close the localhost and Re-run the npm start, its works fine
So I had same issue with Link from react-router-dom. I resolved it by installing same version of react-route and react-router-dom. Looks like react-router-dom doesn't have Link in it.
yarn add react-router react-router-dom
There was an error in your import. BrowserRouter is a part of react-router-dom. so you've to import it from react-router-dom.
import { BrowserRouter } from 'react-router-dom'

Resources