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

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?

Related

React-portal-popout DOM Error version ^1.9.3

I'm currently using "react-portal-popout": "^1.9.3", and when i popout it, following error message comes out.
"Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17."
Moreover, in my own 'index.js' file, I've already changed my 'index.js' file's DOM version to 18, and just those error comes out only when i used the popup library.
Will there be any way to solve this error?
From React18, react has a bit different structure for creating root element.
You'd need to change your index.js file like below;
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

React Native - Expo update cause main no registered and tried to register two same name error

I have recently tried to update my React native application from expo 44 to 46 but it cause error
Here is my App.js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import Router from './src/Router';
export default class App extends React.Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<Router />
</Provider>
);
}
}
The error i am getting is:
Invariant Violation: Tried to register two views with the same name RNGestureHandlerButton
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
Please find my github link
I believe expo docs are not clear on this:
Don't install react-native-gesture-handler,
it already exists in Expo.
If you are using Expo to build your react native app you do not have to import react-native-gesture-handler from npm or yarn. It is already in the expo package. If you import the package you will experience this error.
Also, you can check errors on github instead of directly posting question: https://github.com/software-mansion/react-native-gesture-handler/issues/451

Error message with: Web3 + create-react-app + webpack 5

I am writing the frontend for a Dapp.
I have the script /src/config/index.js
import Web3 from 'web3';
const getLibrary = (provider) => {
return new Web3(provider);
};
export { getLibrary };
And the /src/index.js where I am trying to import getLibrary:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from 'react-router-dom';
import { ChakraProvider } from '#chakra-ui/react';
import { Web3ReactProvider } from '#web3-react/core';
import { getLibrary } from './config/web3';
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<ChakraProvider>
<Web3ReactProvider getLibrary={getLibrary}>
<App />
</Web3ReactProvider>
</ChakraProvider>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
But, I have the error
The line responsible for the error is:
import { getLibrary } from './config/web3';
I used create-react-app to build the project.
I have try several ideas but nothing is working for me... any help, please?
I had the same problem when using web3 with react and webpack 5. This helped me solve it. I followed option #1 as I couldn't get the other option to work (my main confusion being where to keep webpack.config.js since I had kept it at the root and it was not being picked up).
For anyone looking to resolve this still (2022-08-30), I recommend reading this article:
https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5
It will be different in regards to your dependencies but it helped resolve my issues. It basically adds support back in by rerouting requests to dependencies using the react-app-rewired package.

./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

Typescript & React/JSX: JSX element attributes type 'T' must be an object type

Using typescript 1.8.10 with VS 2015 and getting the following error while attempting to use react-router:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Router, browserHistory } from "react-router";
import routes from "./routes"; //get default
ReactDOM.render(
<Router routes={routes} history={browserHistory} />,
document.getElementById("app")
);
routes (from "./routes")
import App from "./components/App";
export default {
component: "div",
childRoutes: [{
path: "/",
component: App,
}]
};
error image: JSX element attributes type 'T' must be an object type
You aren't importing your routes object correctly. Since you are using export default you must use default import syntax:
import routes from "./routes";
At this point, this error doesn't stop typescript from compiling your code down to JS so I'm just ignoring the error within the VS 2015 IDE. It's really just an annoying red squiggly when it comes down to it...

Resources