SyntaxError: Cannot use import statement outside a module in javascript


I’m starting to learn React from zero, locally without set properly all dependencies, the first thing that I did was to use CDNs in my html file, but now I want to know how can I set my machine to import React and ReactDOM and also how can I link CSS to the file.

when I try to run the .js file I got this:

SyntaxError: Cannot use import statement outside a module

When I was using the CDNs links *ReactDOM.render* was working properly

js file

import { React } from 'react'
import { ReactDOM } from 'react-dom'

function FirstComponent(){
    return (<div>
        <Header />
        <Body1 />
        <Footer />    

html file

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="index.js" type="text/babel"></script>
    <link rel="stylesheet" href="./style.css">
    <div id="root"></div>

my point is, how could I run a js file with JSX and ReactDOM.render without using CDNs link in html file

>Solution :

Yo could try to use create-react-app

It will setup your app for you.

Leave a Reply Cancel reply