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.
Related
I think that when I upgraded to React 18, React broke a part of my app. I wanted to verify this behavior by simply using my previous package.json file which I saved as package-previous.json.
I'm assuming webpack allows one to simply change the package.json file to restore a previous app configuration, but I wanted to make sure there are no caveats.
I'm going back from:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^7.2.6"
},
to:
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6"
},
There's no problem with updating the dependency versions in your package.json; if the dependencies you changed are already installed, you can run npm update to upgrade or downgrade their versions, otherwise, you should run npm install.
This will update your node_modules and your package-lock.json files.
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 am creating a react-native npm module.
The npm module uses React & React-Native Packages i.e say something like this
import React, { Component} from 'react'
import { View } from 'react-native'
class something extends Component {
render () {
return (
<View>
{/* Code */}
</View>
)
Now, here adding should I add React and React-native as dependencies or peerDependencies and why?
Update: My current package.json for library (npm module)
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-native": "^0.60.5",
"react-native-device-info": "^2.3.2"
}
And For the app let it be something like
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-native": "^0.60.5"
}
Does it look correct?
If your module is something like an ui library and to be installed into another react app, it should list react and react-native as devDependencies and peerDependencies. There should not be 2 versions of react (and react-native) in the host app, so in order to achieve that, use these 2 dependencies, they won't install anything in the host app.
devDependencies: describes the packages that you rely on when developing; you both need react and react-native so put them here; use any versions that you want.
peerDependencies: describes the packages that you require/suggest your host app to use, the versions should at least match your uses, so there could be a minimum version or not limited;
For example check this package.json, when developing, this package uses "react": "^16.8.5" as "devDependencies"; and when being installed, it actually does not use any specific api belongs to certain version of react, so it uses "react": "*", as "peerDependencies".
References:
https://nodejs.org/es/blog/npm/peer-dependencies/
What we need is a way of expressing these "dependencies" between
plugins and their host package. Some way of saying, "I only work when
plugged in to version 1.2.x of my host package, so if you install me,
be sure that it's alongside a compatible host." We call this
relationship a peer dependency.
https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file
"devDependencies": Packages that are only needed for local development
and testing.
I just connect the app with redux and react-redux connect function, together with state and dispatches. It compiled without problems but the results are not showing. And it looks like below.
I tried to find it and found that i have to change react version.
$ sudo npm install --save react#16.4.0 react-dom#16.4.0
But it didn't work.
I am following this tutorial.
https://www.youtube.com/watch?v=BxzO2M7QcZw
you're using wrong version of React, React.memo is introduced with version 16.6.0 so, try this command to install the right version
npm install --save react#16.6.0 react-dom#16.6.0
for more info click here
This had happened to me as well. This happens when dependencies version gets updated, and the dependencies of the YouTube video you are watched has an old version.
Hence, replace the following dependencies in the package.json file:
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
and run npm install.
Since the connect() function connects a React component to a Redux store,
react, redux need to be version supported. If you are willing to use newest dependencies please refer the Redux documentation.
The above method should solve your problem.
That's because #material-ui/styles has a peer dependency on react >= 16.7.0-alpha.0 and react-dom >= 16.7.0-alpha.0 that include hooks.
To use #material-ui/styles, change your react and react-dom dependencies like this:
"dependencies": {
...
"react": "^16.7.0-alpha.2",
"react-dom": "^16.7.0-alpha.2",
...
},
Find out which version of react-redux version you are using and then go to https://react-redux.js.org/versions. Click on the documentation associated with your version. You should see something like this:
Installation
React Redux 7.1 requires React 16.8.3 or later.
Update your react in package.json to the appropriate version and install.
So I am trying to use react-redux with typescript. This is what my package.json looks like
"dependencies": {
"#types/react-dom": "15.5.0",
"#types/react": "15.0.4",
"#types/react-redux": "4.4.39",
"axios": "0.16.2",
"react": "15.0.0",
"react-dom": "15.0.0",
"redux": "3.6.0",
"react-redux": "5.0.6",
"redux-thunk": "2.1.0",
"office-ui-fabric-react": "1.0.0"
}
Now when I do yarn install. I see multiple react types get installed. Once for #types/React. One for #types/React-redux and #types/react-dom inside each of its own node_modules folder. And the version of the types these modules install internally are very different as I see in my yarn.lock file.
When I try to compile this, I get the errors like
error TS2304: Cannot find name 'DetailedHTMLFactory'.
Subsequent variable declarations must have the same type
The error disappears if I duplicate all the nested #types and just keep teh top level #types/react.
Whats a better way to do this, so that duplicate types issue doesn't appear ?
Since you are using yarn, the easiest direction might be to use resolutions in the package.json file to force specific versions of the typings, see https://github.com/yarnpkg/yarn/pull/4105
Other than that you would have to figure out which specific versions of these typings work with one another. Basically look at #types/react-dom dependency list and then include the same version of #types/react in your project.
You should try to remove your node_modules folder, run yarn cache clear and reinstall everything. There is an issue on the typescript repo about this behaviour ( I ran into it recently with one of my side projects ) that i'll try to find and link to this answer.
So I finally fixed this by excluding node_modules folder.
Put "node_modules" in the "exclude" section of tsconfig.json .