javascript - export default/import not working

Question

This is my code: Why is this not working? The code is suppose to show the h1 in the html file, but for some reason it doesn't do that for me.

Element.js :

import React from "react"
function Element() {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    )
}
export default Element

app.js :

import React from 'react'
import ReactDOM from 'react-dom'
import Element from './Element.js'

ReactDOM.render(<Element />, document.getElementById('root'))

the html code:

<script src="/index.js" type="text/babel"></script>

<div id="root"></div>

I looked at many solutions at stackoverflow but this bug it still doesn't work. I added import React from "react" and import ReactDOM from "react-dom" in both files but still same thing: nothing in the return statement doesn't show up, I've been struggling for hours. What is wrong with my code?

This isn't an import/export problem. You have <script src="/index.js" type="text/babel"></script>. That would mean that your code was being handled by the client-side Babel Standalone (not recommended where it can be avoided). I suspect you meant for your code to be transpiled during a build process. You'll have to configure that for it to happen (or start with a scaffolding tool like create-react-app). — T.J. Crowder
– T.J. Crowder, Commented Aug 1, 2022 at 13:13
Could you post any screenshots of the errors that you are seeing on console? — Green Wizard
– Green Wizard, Commented Aug 1, 2022 at 13:26

Abhishek Maurya · Accepted Answer · 2022-08-01 15:37:09Z

1

Following things need to improve into your code-

1-Use of root level rendering things in index.js instead of app.js.

index.js

import React from "react";

import ReactDOM from "react-dom";

import App from "./App.js";  

ReactDOM.render(   
<App /> ,
document.getElementById("root")
);

2-Use App.js file to accumulate all other component into it.

App.js

import Element from './Element'

function App() {
return (
<div className='App'>
  <Element />
</div>
)
}

PS: Learn the heirarchy of react and its flow . This links may be helpful:

React Rendering - https://reactjs.org/docs/rendering-elements.html

Introduction to react rendering https://medium.com/information-and-technology/an-introduction-to-react-rendering-9c24a96b838b

edited Aug 1, 2022 at 15:37

answered Aug 1, 2022 at 15:36

Abhishek Maurya

113 bronze badges

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

Comments

Green Wizard · Accepted Answer · 2022-08-01 13:31:38Z

0

It appears that there are three issues here. With the code provided, thats what I get.

As @T.J. Crowder mentioned in the comments, the script's type attribute needs a change. You can completely remove it too.
As far as I know, the latest ReactDOM package does not have a render method. You have to fitst create a root, and then render the app like so

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Element />);

Include the script after the root div element, coz the script when gets executed may not know the element with id root.

answered Aug 1, 2022 at 13:31

Green Wizard

3,6874 gold badges21 silver badges33 bronze badges

Comments

92Infinitus92 · Accepted Answer · 2022-08-01 14:40:36Z

0

I would re-do the app.js to

import Element from './test'

function App() {
  return (
    <div className='App'>
      <Element />
    </div>
  )
}

export default App

PS. also some links to the official documentation and how to use react https://reactjs.org/docs/create-a-new-react-app.html https://reactjs.org/docs/rendering-elements.html

PS 2: or if You would really like to do it in the old way

import React from 'react'
import './App.css'
import Element from './test'

function App() {
  return React.createElement('div', {}, React.createElement(Element))
}

export default App

edited Aug 1, 2022 at 14:40

answered Aug 1, 2022 at 13:34

92Infinitus92

1485 bronze badges

Collectives™ on Stack Overflow

javascript - export default/import not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related