Кажется, это было бы проще, но я в тупике. Мое приложение React обслуживается через Webpack, и если я открываю локальный хост в браузере Incognito (или обновляем sh обычную вкладку без кеша), появляется содержимое. Но в противном случае я получаю следующие ошибки в моем инспекторе:
src/index.js и public/index.html файлы похожи на основные c Создать конфигурацию React App, например:
src / index. js:
import React from 'react';
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById('root'));
public / index. html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Index</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
, а веб-пакет выглядит следующим образом:
const Dotenv = require('dotenv-webpack')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
entry: './src/index.js',
output: {
filename: 'bundle.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.(tsx?|jsx?)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
rootMode: 'upward'
}
}
]
},
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'source-map-loader'
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'url-loader'
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
},
node: {
fs: 'empty'
},
plugins: [
new Dotenv({
path: './.env',
systemvars: true
}),
new ForkTsCheckerWebpackPlugin({ eslint: true })
]
}
module.exports = env => {
const styleRule = {
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
const htmlPluginConfig = { template: 'public/index.html', inject: true }
config.module.rules.push(styleRule)
config.plugins.push(new HtmlWebpackPlugin(htmlPluginConfig))
config.devtool = 'inline-source-map'
config.devServer = {
contentBase: './src',
overlay: true,
port: 8080
}
return config
}
Я знаю, что что-то подбито, но не могу понять, что на нем.