Проект React и Webpack не может отобразить мои компоненты в браузере - PullRequest
Новая
       33

Проект React и Webpack не может отобразить мои компоненты в браузере

0 голосов
/ 16 июня 2020

Я новичок, и у меня возникла проблема с моим проектом React в комплекте с webpack. Сначала у меня не было никаких проблем. Я снова попытался настроить свой веб-пакет, но не смог это исправить. Прямо сейчас я получаю эти три ошибки в консоли: Первая ошибка: The resource from “http://localhost:5000/bundle.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Вторая ошибка: Loading failed for the <script> with source “http://localhost:5000/bundle.js”.

Третья ошибка: Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

Конфигурация My Webpack: 

const path = require("path");
const rules = [{
      test: /\.tsx?/,
      exclude: /node_modules/,
      loader: "babel-loader"
}, {
      test: /\.(png|jpeg|jpg|webp|gif)$/,
      use: {
            loader: "file-loader",
      },
}, {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
}]

module.exports = {
      target: "web",
      mode: "development",
      entry: "./src/Index.tsx",
      output: {
            path: path.resolve(__dirname, "build"),
            publicPath: "/build/",
            filename: "bundle.js"
      },
      module: { rules },
      resolve: { extensions: [".ts", ".tsx", ".js"] },
      devServer: {
            historyApiFallback: true,
            contentBase: "./",
            port: 5000,
            hot: true
      }
}

Кроме того, это мой пакет. json конфигурации. 

    {
  "name": "ecommerce",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "@babel/preset-typescript": "^7.10.1",
    "@types/react": "^16.9.36",
    "@types/react-dom": "^16.9.8",
    "babel-loader": "^8.1.0",
    "bootstrap": "^4.5.0",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-burger-menu": "^2.6.15",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

Вот также структура моего проекта: 

-public
   -images
-src
   -assets
   -components
-.babelrc
-.gitignore
-index.html
-package.json
-webpack.config.js

Я пробовал решение здесь , но не смог его исправить. Я могу набрать localhost:5000/build/bundle.js, и он работает нормально. В моем браузере я вижу только пустую страницу без загрузки своих компонентов. Кто-нибудь может мне помочь?

...