Проблема с WebPack

Question

Есть HTML код:

<!DOCTYPE html>
<html>
<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="https://unpkg.com/[email protected]/babel.min.js"></script>
  <head>
    <meta charset="UTF-8">
    <title>WarehouseApp</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div class="topPanel">
    </div>
    <div id = "root" />
    <script src="scripts/main-panel.js" type="text/babel"></script>
  </body>
</html>

Который вызывает React код:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
import Table from './table.js'
import TableDropdown from './toolbar.js' 

class MainPanel extends React.Component {
    
    render() {
      return <div>
          <div class="toolBar">
            <div id="tableDropdown"> </div> 
              <div>
                Поиск: 
                <input type="text" />
              </div>
              <div>Журнал аудита</div>  
              <div>127.0.0.1:3000</div>
              <div>
                <button class="button">Удалить</button>
                <button class="button">Добавить</button>
                <button class="button">Мастер</button>
              </div>     
          </div>
        
        <TableDropdown />
        
        <Table /> 
    </div>
    }
    
}

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

Проблема в первых строках React кода, то-есть в importах. Программа на них прерывается и выдаёт такую ошибку:

Uncaught ReferenceError: require is not defined

Приложение работает на Electron.

WebPack повторно ставил, к сожалению не помогло.

БЛОГ НА HUSL

Проблема с WebPack

Ответы (0 шт):