Блог

Главная - Вопросы по программированию - Ошибка: При объединении semantic UI react с Webpack 4

Ошибка: При объединении semantic UI react с Webpack 4

#reactjs #webpack #semantic-ui-react

#reactjs #webpack #semantic-ui-react

Вопрос:

Я пытаюсь использовать semantic-ui-react с webpack 4, но получаю ошибку module not found. Я установил semantic-ui-react с npm и импортировал в index.js и добавлен CDN в index.html файл. похоже, что это не работает. Ниже я прилагаю свой код и синтаксис ошибки. Кто-нибудь может сказать мне, что не так в моем коде?

webpack.config.js 

 // webpack v4
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: { main: "./src/index.js" },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist/assets")
    //filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.css$/,
        include: /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: "../"
            }
          },
          "css-loader"
        ]
      },
      {
        test: /.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: "url-loader",
        options: {
          limit: 10000
        }
      }
    ]
  },
  plugins: [
    //new CleanWebpackPlugin('dist', {}),
    new HtmlWebpackPlugin({
      // inject: false,
      // hash: true,
      // template: "./src/index.html",
      // filename: "index.html"
    }),
    new WebpackMd5Hash(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ]
}

index.html 

 <html>
  <head>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
    />
  </head>
  <body>
    <div id="app"></div>
    <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
  </body>
</html>

index.js

 import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import CheckButton from "./components/CheckUpButton/CheckUpButton";
import "semantic-ui-css/semantic.min.css";

const routing = (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={CheckButton} />
      </Switch>
    </div>
  </Router>
);

ReactDOM.render(routing, document.getElementById("app"));

ошибка :: введите описание изображения здесь