模块构建失败：未知单词（2：9）| bundle / webpack的问题（react，redux，js，node）

Posted 2021-04-03

问题：

我到处寻找有类似问题的人并且有一个忙碌的人也请花点时间试图帮助我，但我没有找到文档或其他资源非常有帮助，还有其他人有这个问题吗？

这是到目前为止发生的事情：

当我尝试导入这样的CSS样式时，我首先得到错误，

import 'react-day-picker/lib/style.css'

错误是：

ERROR in ./node_modules/react-day-picker/lib/style.css Module parse
     failed: Unexpected token (3:0) You may need an appropriate loader 
     to handle this file type. | /* DayPicker styles */ | | .DayPicker { |  
     display: inline-block; |   font-size: 1rem;  @
     ./client/components/Component.jsx 21:0-41  @
     ./client/components/App.jsx  @ ./client/index.js

所以我添加了一个css-loader并更新了我的webpack以尝试解决这个问题，但我仍然得到：

ERROR in ./node_modules/css-loader!./client/index.js
Module build failed: Unknown word (2:9)

 1 | import React from 'react'
> 2 | import {render} from 'react-dom'
    |         ^
  3 | import {Provider} from 'react-redux'
  4 | import {createStore, applyMiddleware, compose} from 'redux'
  5 | import thunkMiddleware from 'redux-thunk'

 @ ./client/index.js 3:14-73

请帮忙！以下是我的文件。

---

webpack.config.js

const path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: path.join(__dirname, '/index.js'),
  output: {
    path: path.join(__dirname, '../server/public'),
    filename: 'bundle.js'
  },
  module: {
      rules: [
      {
        test: /.jsx?$/,
        loader: ['babel-loader', 'style-loader', 'css-loader' ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ],
  devtool: 'source-map'
}

的package.json

"dependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-preset-stage-0": "^6.24.1",
    "@babel/register": "^7.0.0",
    "babel-loader": "^8.0.0",
    "body-parser": "^1.17.2",
    "cookie-parser": "^1.4.3",
    "css-loader": "^1.0.0",
    "dotenv": "^6.0.0",
    "express": "^4.16.3",
    "express-jwt": "^5.3.1",
    "jsonwebtoken": "^8.3.0",
    "jwt-decode": "^2.2.0",
    "knex": "^0.14.4",
    "leaflet": "^1.3.1",
    "passport": "^0.4.0",
    "pg": "^7.4.3",
    "prop-types": "^15.6.1",
    "react": "^16.1.1",
    "react-day-picker": "^7.2.2",
    "react-dom": "^16.1.1",
    "react-geocode": "^0.1.2",
    "react-leaflet": "^1.9.1",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.1.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.1.0",
    "sodium": "^2.0.3",
    "style-loader": "^0.23.0",
    "superagent": "^3.8.1",
    "webpack": "^4.17.1",
    "webpack-command": "^0.4.1"

  },
  "devDependencies": {
    "enzyme": "^3.2.0",
    "enzyme-adapter-react-16": "^1.1.0",
    "jest": "^21.1.0",
    "jsdom": "^11.2.0",
    "nodemon": "^1.11.0",
    "redux-mock-store": "^1.5.3",
    "sqlite3": "^3.1.9",
    "supertest": "^3.0.0",
    "webpack-dev-server": "^3.1.7"
  }
}

---

解：

webpack.config.js

const path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: path.join(__dirname, '/index.js'),
  output: {
    path: path.join(__dirname, '../server/public'),
    filename: 'bundle.js'
  },
  module: {
      rules: [
      {
        test: /.jsx?$/,
        loader: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        use: [ 'style-loader', 'css-loader' ]
    }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ],
  devtool: 'source-map'
}

答案

您的css文件加载器需要与jsx​​文件加载器分开。

解析加载程序以在配置中导入css文件：

    module.exports = {
      module: {
         rules: [
          {
              test: /.css$/,
              use: [ 'style-loader', 'css-loader' ]
          }
         ]
        }
       }