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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模块构建失败:未知单词(2:9)| bundle / webpack的问题(react,redux,js,node)相关的知识,希望对你有一定的参考价值。

问题:

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

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

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

以上是关于模块构建失败:未知单词(2:9)| bundle / webpack的问题(react,redux,js,node)的主要内容,如果未能解决你的问题,请参考以下文章

需要未知模块:“未定义”

Vue CLI 3 vue.config.js 编译“未知单词”错误

CssSyntaxError 使用 Webpack 4 构建未知单词

Ionic app,错误:..main.ts模块构建失败:错误:ENOENT

Webpack 生产构建失败:“无法解析 'aws-sdk'”

如果我使用延迟加载模块,我的 Angular 应用程序 main.bundle.js 文件大小会在构建时减小