Почему не могу в браузере запустить react приложение?

Question

[loozmax]

В консоли такая ошибка

Uncaught SyntaxError: Cannot use import statement outside a module

Сам код

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="../src/index.js"></script>

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Header from "./components/header";
import Main from './components/main';
import Footer from "./components/footer";

function SiteView(){
    return (
        <div>
        <Header />
        <Main />
        <Footer />
        </div>
    )
}

// ========================================

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

Comments

[Kovalsky]

Ошибка хорошо гуглится

Answer 1

[Ivan Bogachev]

Uncaught SyntaxError: Cannot use import statement outside a module

Скрипту нужно явно задать type="module", чтобы браузер знал, что этот скрипт - модуль, и в нем можно использовать импорты и экспорты. А по умолчанию скрипт за модуль не считается.

Comments

[loozmax]

Access to script at 'file' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

[Ivan Bogachev]

loozmax, Ответ на удаленный комментарий: реакт тут вообще ни при чем. Читайте про модули в JS.

Access to script at 'file' from origin 'null' has been blocked by CORS policy...

Нужен какой-нибудь сервер, на котором будут хоститься файлы. Хотя бы такой. Браузер запрещает загружать ресурсы из файловой системы просто так из-за соображений безопасности.