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.
Related
I have installed react-planner in my react app and I want to use in react component. I follow the mentioned the guideline but not work in react component
I tried that
`
import React from "react";
import ReactPlanner from "react-planner";
function WarehouseDesign() {
return (
<div>
<h2>design</h2>
<ReactPlanner
// catalog={MyCatalog}
width={800}
height={600}
// plugins={plugins}
stateExtractor={(state) => state.get("react-planner")}
/>
</div>
);
}
export default WarehouseDesign
;`
ERROR
Failed to compile
./src/components/dashboard/Warehouse/WarehouseDesign.tsx
Attempted import error: 'react-planner' does not contain a default export (imported as 'ReactPlanner').
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;
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)
When I import reactive search from the following module:
import {ReactiveBase} from "#appbaseio/reactivesearch";
It keeps showing me the following error:
./node_modules/#appbaseio/reactivecore/lib/actions/query.js
Module not found: Can't resolve '../../../../node_modules/#appbaseio/reactivecore/src/actions/maps' in '/Users/mattewlee/Desktop/CS/Swallaby/walkon-map-website/node_modules/#appbaseio/reactivecore/lib/actions'
Well, for sure, I have installed for sure with "npm install #appbaseio/reactivesearch "
But this doesn't seem to work. Thank you for your answer in advance.
This is the following code of
my App.js:
import React, { Component } from 'react';
import './App.css';
import {ReactiveBase} from "#appbaseio/reactivesearch";
class App extends Component {
render() {
return (
<section className="container">
<ReactiveBase
app="my_housing"
credentials="myapikey"
type="listing"
>
Hello from ReactiveSearch!
</ReactiveBase>
</section>
);
}
}
export default App;