Search code examples
reactjsreactjs.net

how to fix resolving webpack errors?

I have a problem in webpack, I try to use ant design ... but when the application runs ... error like below, please help me thank you.I have tried searching through Google but haven't found the right answer

1

this file webpack.config.js

const path = require("path");

module.exports = {
  entry: { main: "./src/index.js" },
  mode: "development", // "production" | "development" | "none"
  output: {
    path: path.resolve(__dirname, "./wwwroot/dist"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)
    filename: "bundle.js", // the filename template for entry chunks
    publicPath: "dist/" // string    // the url to the output directory resolved relative to the HTML page
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: ["react-hot-loader/babel"]
          }
        }
      },

      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader"
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: "url-loader?limit=100000"
      }
    ]
  }
};

this file .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
      ["import", { "libraryName": "antd"}],
    "@babel/proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

this file package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "react + dotnet core + webpack + openidconnect",
  "main": "app.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "narbe hs",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "aspnet-webpack": "^3.0.0",
    "aspnet-webpack-react": "^4.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.5.0",
    "webpack-hot-middleware": "^2.24.3",
    "style-loader": "^0.23.1",
    "css-loader": "^2.1.0"
  },
  "dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/runtime": "^7.2.0",
    "antd": "^3.25.1",
    "axios": "^0.19.0",
    "babel-plugin-import": "^1.12.2",
    "es6-promise": "^4.2.5",
    "file-loader": "^4.2.0",
    "formik": "^2.0.3",
    "html-webpack-plugin": "^3.2.0",
    "jwt-decode": "^2.2.0",
    "node-sass": "^4.13.0",
    "react-hot-loader": "^4.6.3",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-thunk": "^2.3.0",
    "sass": "^1.23.3",
    "sass-loader": "^8.0.0",
    "url-loader": "^2.2.0",
    "yup": "^0.27.0"
  }
}

how do I solve the picture error above? what is wrong with my webpack ?

Solution

  • Look like your regex /\.s[ac]ss$/i only catch scss and sass extension. Pls take a look at this: https://webpack.js.org/guides/asset-management/#loading-css to add rule for css file. If you want to catch scss, sass and css in same rule, use this /(\.css|\.scss|\.sass)$/