I am a beginner in ReactJS. Just after finishing a course on the basics of React and Redux. I have started a new Udemy course entitled "React Data Visualization - Build a Cryptocurrency Dashboard." I am facing a problem in lecture 4 while trying to start the server with yarn start command:
Failed to compile
./src/index.js
Cannot find file: 'index.js' does not match the corresponding name on disk: '.\src\App\app'.
Here are my codes on index.js file under app directory:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render(){
return (
<div>
Hello World
</div>
);
}
}
export default App;
Here are my codes on index.js file under src directory:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
How can I fix the issue?
You can find the project files here.
https://drive.google.com/open?id=1u-8mCYSWZtXPbIqELKsF33FOiXb3yrkH
Edit 1: I am adding the codes inside package.json file, as suggested by #Wesgur:
{
"name": "cryptodash",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Edit 2: I am adding the image to show the folder structure, as suggested by #Madhavan.V:
#Shawan It is just a typo change the App import statement in src/index from import App from './App'; to import App from './app';.
import App from './app';
this will import your index.js of app folder.
Related
Such a problem that when I try to simply connect mongoDB in react
import React, {Component} from 'react';
export default class App extends Component{
componentDidMount(){
const {MongoClient} = require('mongodb');
const client = new MongoClient('mongodb+srv://dafu4k:****#cluster0.jd26aac.mongodb.net/?retryWrites=true&w=majority');
const start = async () => {
try{
await client.connect();
console.log('Connected')
}
catch(e){
console.log(e)
}
}
start();
}
render(){
return (
<>
<h1>Home page</h1>
</>
)
}
}
Errors of the same type appear in the browser itself
Module not found: Error: Can't resolve 'os' in 'C:\Users\DaFu4\OneDrive\Рабочий >стол\mongotest\mongo-test\node_modules\ip\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
They differ in that the last line has different keys (timers,crypto,http, etc.)
I watched how to connect mongoDB to react, everywhere they used a certain mongoose along with mongoDB, but I can’t understand, maybe it’s required to connect to react, or am I still doing something wrong? (in normal js everything works fine, the code has not changed)
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
package.json
{
"name": "mongo-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"crypto-browserify": "^3.12.0",
"mongodb": "^4.7.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
We can not connect React JS to MongoDB because things don’t work like this.
First, we create a react app, and then for backend maintenance, we create API in node.js and express.js which is running at a different port and our react app running at a different port. for connecting React to the database (MongoDB) we integrate through API.
Check this link:
[1]: https://www.geeksforgeeks.org/how-to-connect-mongodb-with-reactjs/#:~:text=First%2C%20we%20create%20a%20react,MongoDB)%20we%20integrate%20through%20API.
React is not communicating directly with MONGODB (via mongoose). It interacts with nodejs/express which is the one to communicate with MONGODB.
The explanation for the steps are presented in what I find to be the clearest form, in MERN STACK TUTORIAL (MERN = Mongodb, Express, React and Nodejs),
especially as the most essential part doesn't exist in Geeks4Geeks' tutorial (the part where they show you an example code of index.html).
Good luck!
I built something from react for the first time, and I'm about to deploy it on my github.
But when I go to my repository from github, it displays a blank page(But I'm not sure if the part of css is working as I can see black background color on it)
Since it doesn't show any error on the console, it was hard for me to figure out what the problem is.
I'd be great if someone can help me out on this.
https://stone-skipper.github.io/svs/#/
This is the link I'm trying to deploy on.
- Some people mentioned the problems from BrowserRouter, so I tried HashRouter, but it also didn't work.
// App.js
import React from "react"
import { Sev, Contents } from "./screens"
import { BrowserRouter as Router, Route } from "react-router-dom"
import "./App.css"
function App() {
return (
<Router>
<Route exact path="/" component={Sev} />
<Route path="/contents" component={Contents} />
</Router>
)
}
export default App
//package.json
{
"homepage": "http://stone-skipper.github.io/svs/",
"name": "sev-exhib",
"version": "0.1.0",
"private": true,
"dependencies": {
"modali": "^1.2.0",
"react": "^16.8.6",
"react-cursor-position": "^3.0.3",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"styled-components": "^4.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^2.1.1"
}
}
//index.js
import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import * as serviceWorker from "./serviceWorker"
ReactDOM.render(<App />, document.getElementById("root"))
serviceWorker.unregister()
I am new to React and trying to run a simple code in React on Mac, but could not run successfully the code. I got the following errors:
This explains in detail the error:
6 | React.DOM.render(
react__WEBPACK_IMPORTED_MODULE_0___default.a.DOM.render(react__WEBPACK_IMPORTED>MODULE_0___default.a.createElement(App__WEBPACK_IMPORTED_MODULE_2["default">], null), document.getElementById('root'));
Here is the code and files:
package.json
{
"name": "a",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
webpack.config.js
module.expprts = {
bundle: './src/index.js
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './App';
React.DOM.render(
React.createElement(HelloWorld, null),
document.getElementById('root')
)
App.js
import React from 'react';
let h1 = React.createElement('h1', null, 'Hello World')
class HelloWorld extends React.Component {
render() {
return React.createElement('div', null, h1, h1)
}
}
export default HelloWorld;
in index.js
ReactDOM.render(
React.createElement(HelloWorld, null),
document.getElementById('root')
)
you should use
ReactDOM.render()
My test does not fail when making changes to App.js.
I'm using jest, enzyme, react.js, react-create-app, and react-scripts.
As I update the App.js component, I expect that the test should fail because it does not match the snapshot of App.js. I think it has to do with my _ snapshot _/App.test.js file... How do I fix this? Any ideas?
Here is my code:
src/components/App.js:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h2>Gift Giver</h2>
</div>
);
}
}
export default App;
src/components/App.test.js:
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
const app = shallow(<App />);
it('renders correctly', () => {
expect(app).toMatchSnapshot();
});
src/components/__ snapshots __/App.test.js.snap
exports[`renders correctly 1`] = `ShallowWrapper {}`;
package.json:
{
"name": "giftgiver",
"version": "0.1.0",
"private": true,
"dependencies": {
"enzyme": "^3.10.0",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.9",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"react-test-render": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"enzyme-adapter-react-16": "^1.14.0"
}
}
As I update the App.js component, I expect that the test should fail because it does not match the snapshot of App.js
You have to use .debug() when rendering snapshots.
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
const app = shallow(<App />);
it('renders correctly', () => {
expect(app.debug()).to.matchSnapshot();
});
As an aside, generally it's better to use mount instead of shallow unless there's a very good reason not to.
I created a react app using create-react-app with typescript and trying to console log a couple of things from the test file but it's not working.
This is the tutorial I followed to set up create react app with typescript. I just added a console.log statement in the App.test.tsx file that comes with the setup and it didn't work.
It worked fine when I removed the 2 lines of code that used ReactDOM
package.json
{
"name": "testing2",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "24.0.11",
"#types/node": "11.12.0",
"#types/react": "16.8.10",
"#types/react-dom": "16.8.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "2.1.8",
"typescript": "3.3.4000"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
App.test.tsx (doesn't work)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
console.log('hello thereeeeeeee');
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
App.test.tsx (works)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
console.log('hello thereeeeeeee');
const div = document.createElement('div');
// ReactDOM.render(<App />, div);
// ReactDOM.unmountComponentAtNode(div);
});
console.log statement is supposed to print. But it is not printing. The test is passing but the console statement is not printing when I use ReactDOM in the test