webpack: TypeError: validateOptions is not a function

Question

Webpack 抛出错误，我没有做任何特殊更改。我将 tailwindcss 与 rails6 一起使用。通常 application.js 大约是 5 个月。

我使用了一个干净稳定的 repo 来撤消我最后的更改。我做了 -npm install -npm upgrade -删除/public/assets

                                   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

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

查看你的Gemfile中的webpacker是哪个版本请修改如下

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

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

npm uninstall webpack -g
yarn remove @rails/webpacker

现在安装

yarn add rails/webpacker#b6c2180

webpack: TypeError: validateOptions is not a function

webpack: TypeError: validateOptions is not a function

ruby-on-rails

webpack

tailwind-css

webpacker

babel-loader