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)
Related
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;
hey i was watching the youtube video in it he was trying the new way of linking for hime it works and for me it shows the error video link :https://www.youtube.com/watch?v=khJlrj3Y6Ls time stamps are from 12:00 to 13:29 and the folder structure is also the same
error showing is :
Module not found: Can't resolve './Component' in 'C:\Users\dell\OneDrive\Desktop\react learn\covid-19\src'
and the app.js is
import React, { Component } from 'react';
import {Cards,Charts,CountryPicker} from './Component';
class App extends Component {
render() {
return (
<div>
<h1>here is me the app</h1>
</div>
);
}}
export default App;
index.js in component folder is
export {default as Cards } from './Cards/Cards';
export {default as Charts } from './Charts/Charts';
export {default as CountryPicker } from './CountryPicker/CountryPicker';
and i have checked tons of time myself but couldn t do something
folder structure is :https://ibb.co/vXy4ssf
You misspelled your folder name. You should import your components from './Components' instead of './Component'
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 have genrated a react-webpack project with yo webpeck-react generetor.
https://github.com/LeMueller/musicplayer-by-react.git
I use header.js in Main.js. But i get always the error:
Module not found: Error: Cannot resolve module 'header' in D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\src\components
resolve module header in D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\src\components
looking for modules in D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\node_modules
D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\node_modules\header doesn't exist (module as directory)
resolve 'file' header in D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\node_modules
How can i solve them? Thanks in advace!
Main.js:
require('normalize.css/normalize.css');
require('styles/App.css');
import React, {Component} from 'react';
import Header from 'header.js';
//import Header from 'header';
//require('header.js');
let yeomanImage = require('../images/yeoman.png');
class AppComponent extends React.Component {
render() {
return (
<div className="index">
<img src={yeomanImage} alt="Yeoman Generator" />
<div className="notice">Please edit <code>src/components/Main.js</code> to get started!</div>
<Header />
</div>
);
}
}
AppComponent.defaultProps = {
};
export default AppComponent;
header.js:
import React, {Component} from 'react';
import '../styles/header.less';
export default class Header extends Component {
render() {
return (
<div className="component-header">
<img src={require('../../images/logo.png')} width={40} className="-col-auto"/>
<h1 className="caption">Music Player by React</h1>
</div>
);
}
}
In js, there is a difference in how to import a file depending on if its custom js module or a project file.
For custom JS module we use it like below. (generally taken from npm or yarn)
import 'module'; // in node_modules folder
notice the usage, without any slash(/) or period(.), this means find the module inside the node_modules folder.
But for file which is made by you in the project is imported like:
import './module'; // same directory
import './module'; // parent directory, one dir level up
notice the usage, starting with the ./
./ means find the file in the same directory.
../ means find the file in the parent directory.
import Header from './header.js';
I'm playing around with React and ES6 using babel and webpack. I want to build several components in different files, import in a single file and bundle them up with webpack
Let's say I have a few components like this:
my-navbar.jsx
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}
main-page.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import MyNavbar from './comp/my-navbar.jsx';
export class MyPage extends React.Component{
render(){
return(
<MyNavbar />
...
);
}
}
ReactDOM.render(
<MyPage />,
document.getElementById('container')
);
Using webpack and following their tutorial, I have main.js:
import MyPage from './main-page.jsx';
After building the project and running it, I get the following error in my browser console:
Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.
What am I doing wrong? How can I properly import and export my components?
Try defaulting the exports in your components:
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export default class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}
by using default you express that's going to be member in that module which would be imported if no specific member name is provided. You could also express you want to import the specific member called MyNavbar by doing so: import {MyNavbar} from './comp/my-navbar.jsx'; in this case, no default is needed
Wrapping components with braces if no default exports:
import {MyNavbar} from './comp/my-navbar.jsx';
or import multiple components from single module file
import {MyNavbar1, MyNavbar2} from './module';
To export a single component in ES6, you can use export default as follows:
class MyClass extends Component {
...
}
export default MyClass;
And now you use the following syntax to import that module:
import MyClass from './MyClass.react'
If you are looking to export multiple components from a single file the declaration would look something like this:
export class MyClass1 extends Component {
...
}
export class MyClass2 extends Component {
...
}
And now you can use the following syntax to import those files:
import {MyClass1, MyClass2} from './MyClass.react'
MDN has really nice documentation for all the new ways to import and export modules is ES 6 Import-MDN . A brief description of it in regards to your question you could've either:
Declared the component you were exporting as the 'default' component that this module was exporting:
export default class MyNavbar extends React.Component { , and so when Importing your 'MyNavbar' you DON'T have to put curly braces around it : import MyNavbar from './comp/my-navbar.jsx';.
Not putting curly braces around an import though is telling the document that this component was declared as an 'export default'. If it wasn't you'll get an error (as you did).
If you didn't want to declare your 'MyNavbar' as a default export when exporting it : export class MyNavbar extends React.Component { , then you would have to wrap your import of 'MyNavbar in curly braces:
import {MyNavbar} from './comp/my-navbar.jsx';
I think that since you only had one component in your './comp/my-navbar.jsx' file it's cool to make it the default export. If you'd had more components like MyNavbar1, MyNavbar2, MyNavbar3 then I wouldn't make either or them a default and to import selected components of a module when the module hasn't declared any one thing a default you can use: import {foo, bar} from "my-module"; where foo and bar are multiple members of your module.
Definitely read the MDN doc it has good examples for the syntax. Hopefully this helps with a little more of an explanation for anyone that's looking to toy with ES 6 and component import/exports in React.
I Hope this is Helpfull
Step 1: App.js is (main module) import the Login Module
import React, { Component } from 'react';
import './App.css';
import Login from './login/login';
class App extends Component {
render() {
return (
<Login />
);
}
}
export default App;
Step 2: Create Login Folder and create login.js file and customize your needs it automatically render to App.js Example Login.js
import React, { Component } from 'react';
import '../login/login.css';
class Login extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default Login;
There are two different ways of importing components in react and the recommended way is component way
Library way(not recommended)
Component way(recommended)
PFB detail explanation
Library way of importing
import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';
This is nice and handy but it does not only bundles Button and FlatButton (and their dependencies) but the whole libraries.
Component way of importing
One way to alleviate it is to try to only import or require what is needed, lets say the component way. Using the same example:
import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';
This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.
If you are not using lot of components then it should reduce considerably the size of your bundled file.