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

2

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 />

answered Oct 19, 2020 at 15:51

Aib Syed

3,1942 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

1

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

answered Oct 19, 2020 at 15:33

Ale Plo

8195 silver badges11 bronze badges

Collectives™ on Stack Overflow

import statement not working in JavaScript code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related