React: Cannot Find module './WebpackMissingModule' - javascript

I'm currently giving my first steps on React and I'm having some issues when trying to export components.
My current index.js file is as following:
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
const API_KEY = '...';
//Create a new component. It should output some html
const App = function(){
return <div>
<SearchBar />
</div>;
}
ReactDOM.render(<App />, document.querySelector('.container'));
And my search_bar.js file:
import React from 'react';
const SearchBar = function(){
return <input />;
};
export default SearchBar;
My current file structure may be seen in the following image:
The problem is that I'm not being able to import the SearchBar element. I'm having the error that can be seen on the image:
Cannot Find module './WebpackMissingModule'
Any idea on what may be causing this issue?

I was baffled by this too, but refreshing the browser fixed for me.

Related

React Not Displaying HTML

I just started using react and I'm following a MERN tutorial on YouTube
I've not been having issues seen any issues except the fact that I can't see the HTML code when start npm
App.js
import React from "react";
const App = () => {
return(
<div>
<h1>App</h1>
</div>
);
}
export default App;
This is the index.js
import React from "react";
import ReactDOM from "react";
import App from "./App";
ReactDOM.render(<App />, document.getElementById('root'));

useNavigate() is not working even inside the Router context

I have a project using react-router v6, and I am getting an error stating useNavigate() may be used only in the context of a <Router> component.
For some background, I have two projects that live in the same repo and get built together. We leverage code splitting and import them as needed, not sure if this matters.
Now, I have a setup that is pretty simple:
(in the #dummyInc/components project)
Dummy.tsx
import React from 'react'
export function Dummy() {
const navigate = useNavigate()
return <div> Hello World <button onClick={() => navigate('/someRoute')}> </div>
}
Then my code uses it in a different project that is just imported.
(in the #dummyInc/site project)
App.js
import React from 'react'
import Dummy from '#dummyInc/components'
export function App() {
return <div> <Dummy /> </div>
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './src/App'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
Now I have the above and when I try to render it in the browser, it says the following, but I'm not sure how that's possible, it's being rendered in that context.
Error: useNavigate() may be used only in the context of a <Router> component.
Am I missing something? Any help is appreciated.

React JS Attempted import error: './Pathfinder/Pathfinder' does not contain a default export (imported as 'Pathfinder')

I have had a look at a lot of different possible fixes for this but I can't. When I compile the react code I get an error saying that I need to use a default export even though I exported it through the class. I've tried just exporting the part where I call the pathfinder script and that doesn't work.
import React from 'react';
import './App.css';
import Pathfinder from './Pathfinder/Pathfinder';
function App() {
return(
<div className="App">
<Pathfinder></Pathfinder>
</div>
);
}
export default App;
Pathfinder.js
import React, {Component} from 'react';
import Node from './Node/Node';
import './Pathfinder.css';
function app(){
return(
<div>
<p>
</p>
</div>
);
}
There are a lot of questionable things going on here, especially your having an app component and an App component. But as your error is conveying, you're not exporting the app component in Pathfinder.js. Dirty fix:
export default function app() {
// ...
}
Though, at the very least, I would rename the function to Pathfinder.

Error: Target container is not a DOM element. - with out of the box app

I am just starting to learn React. I used Create-React to generate a basic app.
App.js
import React from 'react';
const App = () => {
return (<div>Hi There!</div>);
};
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
console.log(document.getElementById("root"));
ReactDOM.render((<App/> , document.getElementById('root')));
I get an error
Error: Target container is not a DOM element.
Code Link : https://github.com/rberger247/ReactApp/blob/master/client/src/components/App.js
You need correct ReactDOM.render like this
ReactDOM.render(<App/> , document.getElementById('root'));

React Props not working, complete beginner

I'm following tutorial carefully, but I just can't pass props to function component and extract data from props object.
I think it's export-import error, but I would really appreciate nudge in the right direction.
I'm using create-react-app
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const Greeting = (props) => <h1>Hello {props.name}</h1>;
export default Greeting;
It only prints out Hello in H1 tag, and just leaves out the rest of it.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const element = <Greeting name="irakli" />;
ReactDOM.render(element, document.getElementById('root'));
serviceWorker.unregister();
In My index.js:
Instead of import App from './App'; replace with import Greeting from './App';
Instead of Greeting you should change to App because you are importing it as App. So
const element = <App name="John" />
in App.js use 'export default App'.

Categories