Ошибка сборки модуля: неизвестное слово (2: 9) | Проблема с комплектом / веб-пакетом (реагирует, редукс, js, узел)

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-загрузчик и обновил свой веб-пакет, чтобы попытаться исправить эту проблему, но я все еще получаю:

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' ]
          }
         ]
        }
       }