模塊解析失敗：意外令牌 (41:41) 您可能需要適當的加載程序來處理此文件類型

Question

Package.json

{
  "name": "frontend",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "bootstrap": "^5.1.3",
    "isomorphic-fetch": "^3.0.0",
    "next": "12.0.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "reactstrap": "^9.0.1",
    "babel-minify-webpack-plugin": "^0.3.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "install": "^0.10.4",
    "npm": "^5.6.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.16.7",
    "eslint": "8.6.0",
    "eslint-config-next": "12.0.7",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.10",
    "style-loader": "^0.20.2",
    "webpack": "^4.0.0"
  }
}

Answer 1

您的控制台 output 表明 Webpack 不理解您嘗試在應用程序中使用的某些文件類型。 典型的 webpack.config.js 可能如下所示：

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx/,
        loader: "babel-loader",
      },
    ],
  },
}

這告訴 Webpack 使用“babel-loader”加載器來處理 .jsx 文件。

您似乎忘記為您在 SigninComponent 上使用的文件類型提供加載器。