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

Question

Problem:

I've looked everywhere for someone with a similar problem and had a busy person also kindly spend some time trying to help me, but I'm not finding docs or other resources very helpful, has anyone else had this issue?

This is whats happened so far:

I firstly get the error whenI was trying to import a css style like so,

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

the error being:

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

So I have added a css-loader and updated my webpack as well to try fix this issue but I still get:

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

Please Help! Below are my files.

---

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"
  }
}

---

Solution:

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

Your css file loader needs to be separate from jsx file loader.

Resolve loader to import a css file in your config:

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