import statement not working in JavaScript code

Question

Hello I am a new programmer, recently I started coding in react but I have this problem with my JavaScript code. Import is not working.

import React from 'react'; import './App.css'; import { hello } from '/components/hello.js'; function App() { return ( <div className="App"> <header> <p> <hello></hello> </p> </header> </div> ); } export default App;

This here is my app.js file

import React from 'react'; export default function hello(){ return <h1>Hello user</h1>; }

This here is my hello.js file(It is located inside my components folder) Can anyone tell me why import is not working??

Aib Syed · Accepted Answer · 2020-10-19 15:51:41Z

Change this:

 import React from 'react'; export default function Hello(){ return <h1>Hello user</h1>; }

To this:

 import React from 'react'; export function Hello(){ return <h1>Hello user</h1>; }

If you want to leave it as a default function then import it like this instead:

import Hello from '/components/Hello.js';

Also, it is best practice to capitalize component names. <Hello />

Ale Plo · Accepted Answer · 2020-10-19 15:33:40Z

Try using default import instead of name import because in your hello.js you are setting up for default. Also your path for hello.js is right? Try ./hello.js

Collectives™ on Stack Overflow

import statement not working in JavaScript code

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related