Click here to Skip to main content
15,566,394 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
It seems like that ES6 modules does not work in React, i mean i get no errors but the Component i am importing isn't rendering anything: (they are all in the src folder and i am using version 18.1.0)

Car.jsx:
JavaScript
export default function Car() {
  return <h2>Hi, I am a Car!</h2>
}


script.jsx:
JavaScript
import React from 'react'
import ReactDOM from 'react-dom'
import Car from "/src/Car.jsx"

ReactDOM.createRoot(document.getElementById("root")).render(<Car/>)


index.html:
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/script.jsx"></script>
    <script type="module" src="/src/Car.jsx"></script>
  </body>
</html>


What I have tried:

First i tried changing to "/src/Car" then i tried to export { Car } and import { Car } from "/src/Car.jsx", then i tried using export default Car, then i tried to google up but none of them did help.
Posted
Updated 17-May-22 0:29am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900