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

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

Related

Update from reacts-scripts-ts to react--scripts problem

I tried to update from the deprecated library react-scripts-ts to the "new" library react-scripts. I used this link from Vincent Tunru to do that.
But i run then into the Error:
ERROR in ./src/index.tsx 7:0-30
Module not found: Error: Can't resolve './pages/App' in 'C:\develop\remote\src\frontend\src'
I import the App as follow into my start file:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './pages/App';
import { Provider } from 'react-redux';
import { store } from 'src/store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root') as HTMLElement);
I have to do a little change to this file as follow './pages/App.tsx' and this error would go away. But then all the files in App also has to be imported as 'file.tsx' and then inside those imported files too. I would have to change over 200 lines. I don't think that this is the correct way to do it. But how should I solve this Error?

Type checks not working in a create-react-app typescript project

I have created a new react project using the command npx create-react-app my-app --template typescript. Then introduced some type errors but yarn build is not catching those.
The changes i made are
Create a new file test.tsx under the src directory with following contents
type Props = {
message: string
}
export function getValue(props: Props): string {
return props.message1
}
Call the above function from index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {getValue} from "./test"
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
console.log(getValue({message: "test"}))
Run yarn build, its not throwing any typescript errors
Github repo - https://github.com/kanagarajkm/my-app-ts
Any help here is really appreciated. Thanks.
Create-react-app's typescript template uses typescript for typecheking only. You can see typescript errors in your IDE (if it supports typescript language server) while developing application. Or running tsc directly from command line.
build script uses babel-loader with preset-typescript for transpiling only. It means if typescript code is syntactically correct (but can fail type checking) it will be transpiled into .js files regardles of any typescript errors.
If you want to build your bundle only after it successfully typechecks you may modify package.json build command for react-scripts build to run after tsc finished without errors:
...
"scripts": {
...
"build": "tsc && react-scripts build",
...
},
...

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 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"));

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

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!

Resources