I'm having issues that I've never experienced before. Recently, I've started a new project with create-react-app however, I'm shown an error:
./src/App.js
Module not found: Can't resolve './pages/' in '
Folder Structure
I've tried different file paths but in my previous projects this is the path that has worked but for some reason, it doesn't work anymore.
App.js
import React from 'react';
import Home from './pages'
function App() {
return (
<div>
<h1>Hello</h1>
<Home />
</div>
);
}
export default App;
Home.js
import React from 'react'
export const Home = () => {
return (
<div>
<h1>Hello</h1>
</div>
)
}
If someone could help that would be great! I've been trying to solve this for the past 3hrs and nothing has come from it! Thanks in advance!
The reason you're code is failing is because the pages folder doesn't have an index.js file. If you want to import the Home page component directly from the pages folder, without using import Home from "./pages/home" syntax, you'll have to create an index.js file, inside the pages directory, that exports the home component, like this:
"./pages/index.js"
...
export * from './home';
export * from './someOtherPage';
....
Then, in App.js, you can import the Home component like this:
...
import { Home, SomeOtherComponent } from './pages';
...
Try './pages/Home' instead of './pages'
What you've imported as ./pages is actually the folder when you need to import the file itself. So it should be something like this:
import React from 'react';
import Home from './pages/Home.js'
function App() {
return (
<div>
<h1>Hello</h1>
<Home />
</div>
);
}
export default App;
Related
I can't import my module, it keeps giving me the same error, I have looked into what I may have done wrong but I dont see it. Everything works for my other components (They are all in the same folder "./[Folder]") except this component and it's being passed the exact same way.
Module Not Found
ManageTreeComponent.jsx
import React from "./react";
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems;
LoginApp.jsx
import DisplayListItems from "./ManageTreeComponent.jsx";
function Login() {
return <div className="container">
<DisplayListItems />
</div>
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
Your import react statement is wrong in ManageTreeComponent.jsx, make sure your import looks like this:
import React from "react"; // without period and /
Rather then using .jsx file use .js file
ManageTreeComponent.js
import React from "react"; // need to import like this
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems
LoginApp.js
import DisplayListItems from "./ManageTreeComponent";
function Login() {
return (
<div className="container">
<DisplayListItems />
</div>
);
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
I have created a app with create-react-app. But, I cant see why its keeps saying ./src/App.js
Module not found: Can't resolve './components/home/home' in ...
My project structure is:
Code for the app.js
import React from 'react';
import Home from './components/home/home';
function App() {
return (
<div className="App">
<Home />
</div>
);
}
export default App;
home.js
import React, { Component } from 'react';
class Home extends Component {
state = {
text: "Lorem",
}
render() {
return (
<div>
<div className="container">{this.state.text}
</div>
</div>
)
}
}
export default Home;
I have imported components in previous projects the same way? and it's worked fine.
So I used npx create-react-app to create this app. Looks like its something to do with that. Because when I used npm -g create-react-app and then create-react-app my-app its working fine.
I am using React create app and I understand how to import a component into my main app which is called app.js.
What I do not understand is how I import a component in a component which is then imported in app.js (nested component).
In my app.js file, I have a component called Portfolio. In my portfolio.js file, I have a component called Language. Is it even possible to nest components with React create app? Because it does not seem to work.
This is what I tried to do:
In my app.js file :
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Portfolio from './components/portfolio';
import "./css/styles.css"
function App() {
return (
<div className="App">
<header>
<h1>My beautiful title</h1>
</header>
<Portfolio />
</div>
);
}
export default App;
In my portfolio.js file :
import React, {Component} from 'react';
import Language from './components/language';
class Portfolio extends Component {
render() {
return (
<div className="portfolio">
<Language/>
<h1>My protfolio</h1>
</div>
);
}
}
export default Portfolio;
And in language.js I have:
import React, {Component} from 'react';
class Language extends Component {
render() {
return(
<div>Switch language</div>
);
}
}
export default Language;
In my browser, I keep getting the following error:
"./src/components/portfolio.js Module not found: Can't resolve
'./components/language' in
'C:\Users\mluce\exercice-react\src\components'"
My language.js file is definitely sitting in my components folder. I do not understand why I get this error?
In portfolio.js:
import Language from './language';
I've got a react project in a folder 'react-test' and inside are all of the json and node modules etc and the src folder installed by running create-react-app.
Inside the src folder I've got App.js and a components folder with Titles.js inside.
I want to import a class named Titles from Titles.js.
I'm using the relative file path ./components/Titles.js but I get the following error when I do:
./src/App.js
Module not found: Can't resolve './components/Titles.js' in '/Users/username/Documents/ReactApp1/react-test/src'
This is my Titles.js component:
import React from "react";
class Titles extends React.Component {
render() {
return (
<div>
<h1>Weather Finder</h1>
<p>Find out temperature, conditions, and more...</p>
</div>
);
}
}
export default Titles;
This is my App.js component:
import React, { Component } from "react";
import Titles from "./components/Titles.js";
export class App extends Component {
render() {
return (
<div>
<Titles />
</div>
);
}
}
export default App;
I've been trying to mess with the file path in the import statement but nothing has worked so far. Thank you for your time.
Try to put in your Titles.js file at the end of your code :
export default (the name of your component)
If I understand right the shallow test must not go deeper the the module which is been tested. Why do I get the displayed error?
App.js looks like:
import * as React from 'react';
import './css/app.css';
import Router from './Router';
import Map from './containers/Map';
import MainTools from './components/ui/MainTools';
class App extends React.Component {
render() {
return (
<div className="App">
<Map />
<MainTools />
<Router />
</div>
);
}
}
export default App;
MapActions.tsx is used inside Map.
Thanks!
It doesn't mount the children components but it still is going to import the files and when it hits an import it can't find there will still be an error. You are probably trying to import an object that doesn't exist.