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

Question

问题：

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

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

当我尝试像这样导入 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'
}

Answer 1

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

解析加载器以在您的配置中导入 css 文件：

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