I would like to add babel-plugin-transform-remove-console on a ReactJs project to use Babel am I required to install webpack?
"react": "^18.2.0",
"react-dom": "^18.2.0"
i tried to configure babel
I get this screen instead of the classic react startup screen
Related
I recently upgraded React and several other packages to their latest versions, and every since, have been seeing warning messages in my Chrome console referring to bundled files instead of mapped files.
Example: at SelectInput (http://localhost:3000/static/js/bundle.js:119921:25) instead of at SelectInput (Select.tsx:123)
I'm using the latest versions of chrome and React Devtools.
Here are my dependency versions in package.json:
dependencies {
"#babel/runtime": "^7.18.3",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#types/node": "^15.12.2",
"#types/react": "^18.0.12",
"#types/react-dom": "^18.0.5",
"react": "^18.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"typescript": "^4.7.3"
}
I see this older solution Console logging error on bundle.js instead of React component but cannot find webpack.config.js to make updates, nor am I sure if it applies to these newer package updates.
How can I see the mapped file names in the chrome console?
I have found that webpack is default installed in create-react-app.
And I found that installing rewire allows at least to modify the webpack configuration.
That is not yet the full solution, but at least one step.
I installed chakra-ui in React js, and when I setup index js to place ChakraProvider I got an error on the framer motion
TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_1__.motion.custom is not a function
It seems like an error, because of the frammer-motion version. Please downgrade your "framer-motion".
open package.json
change = "framer-motion": "^4.1.1", to "framer-motion": "^3.1.1",
npm/yarn install again.
I am writing applications with React Native. I am using Expo.
My React and react-dom versions are 17.0.0 but I get an error like this on the expo web page. How can I solve the problem?
"react": "17.0.0",
"react-dom": "17.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
It is showing as follow:
According to your console warning, instead of
'componentWillMount'
you should give
'componentDidMount'
These are my current dependencies:
react": "^17.0.1",
"react-dom": "^17.0.1",
"react-popper": "^1.3.7",
"redux": "^3.7.2"
This is the error
As the document suggests:
"As of React Native 0.18, React Redux 5.x should work with React Native. If you have any issues with React Redux 5.x on React Native, run npm ls react and make sure you don’t have a duplicate React installation in your node_modules. We recommend that you use npm#3.x which is better at avoiding these kinds of issues."
I got this example from https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic. Referring to below image:
https://ibb.co/rZPn6L5
I copied whole code App.js and App.css, did a npm start. Below is from my web browser
https://ibb.co/LrP4NR2
Anything I missed ? My display is different that the one showed in codesandbox.
Also copy the imported minified bootstrap CSS file that was placed in index.js
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
You likely forgot to copy over the dependencies from package.json and install them.
When you open the package.json in CodeSandbox, you will see this:
"dependencies": {
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
Do you have the bootstrap and react-bootstrap dependencies installed locally? If not, add this to your package.json:
"bootstrap": "^4.4.1",
"react-bootstrap": "^1.0.0",
I almost forgot; if you open the index.js in CodeSandbox, you will see the following two lines:
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
You also need to copy over that code and put it in your local index.js.
Then run npm install or yarn (depending on which package manager you're using) and it should work.
By the way, looking at the URL I could tell that the code is coming from a GitHub repository. You can just clone that repository with Git and and then run the examples locally. That's far better than copying and pasting code from CodeSandbox.