webpack：类型错误：validateOptions 不是函数

Question

Webpack 抛出了一个错误，我没有做任何特殊的更改。我将 tailwindcss 与 Rails6 一起使用。通常 application.js 大约需要 5mo。

我使用了一个干净且稳定的存储库来撤消我最后的更改。 我做到了 -

npm install

-

npm upgrade

-删除/公共/资产

                                   Asset       Size       Chunks                         Chunk Names
    js/application-aefb2dfb14879eac357f.js   5.06 KiB  application  [emitted] [immutable]  application
js/application-aefb2dfb14879eac357f.js.map   3.53 KiB  application  [emitted] [dev]        application
                             manifest.json  364 bytes               [emitted]              
Entrypoint application = js/application-aefb2dfb14879eac357f.js js/application-aefb2dfb14879eac357f.js.map
[./app/javascript/packs/application.js] 1.17 KiB {application} [built] [failed] [1 error]

ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: validateOptions is not a function
    at Object.<anonymous> (/mnt/882A716B2A7156E2/0-Projets/15-BSwebsite/bswebsite/node_modules/babel-loader/lib/index.js:71:5)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/mnt/882A716B2A7156E2/0-Projets/15-BSwebsite/bswebsite/node_modules/babel-loader/lib/index.js:3:103)
    at _next (/mnt/882A716B2A7156E2/0-Projets/15-BSwebsite/bswebsite/node_modules/babel-loader/lib/index.js:5:194)
    at /mnt/882A716B2A7156E2/0-Projets/15-BSwebsite/bswebsite/node_modules/babel-loader/lib/index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (/mnt/882A716B2A7156E2/0-Projets/15-BSwebsite/bswebsite/node_modules/babel-loader/lib/index.js:5:97)
    at Object._loader (/mnt/882A716B2A7156E2/0-Projets/15-BSwebsite/bswebsite/node_modules/babel-loader/lib/index.js:235:18)
    at Object.loader (/mnt/882A716B2A7156E2/0-Projets/15-BSwebsite/bswebsite/node_modules/babel-loader/lib/index.js:64:18)
    at Object.<anonymous> (/mnt/882A716B2A7156E2/0-Projets/15-BSwebsite/bswebsite/node_modules/babel-loader/lib/index.js:59:12)

  

package.json

{
  "name": "bswebsite",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "rails/webpacker#b6c2180",
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/typography": "^0.4.0",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.10",
    "tailwindcss": "^2.1.1",
    "tailwindcss-debug-screens": "^2.0.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

pack/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

require("stylesheets/application.scss")

Rails.start()
Turbolinks.start()
ActiveStorage.start()

Answer 1

涉及很多事情我不确定，因为我无法在本地重现此错误，所以只是给出一些猜测。

1. 检查你的 Gemfile 中的 webpacker 版本请更改如下

gem "webpacker", github: "rails/webpacker", ref: 'b6c2180'

还要检查 webpacker 安装的全局版本，有时可能会发生冲突。

npm uninstall webpack -g
yarn remove @rails/webpacker

现在安装

yarn add rails/webpacker#b6c2180

Answer 2

我在我的项目中遇到了同样的错误，这是关于 Canvas 的功能。 只需在我的 vscode 终端上运行即可：

1. npm 卸载 webpack -g
2. yarn 删除@rails/webpacker
3. 纱线添加rails/webpacker#b6c2180