webpack: TypeError: validateOptions is not a function

Question

Webpack throws my an error, i did no special changes. I use tailwindcss with rails6. normally the application.js is around 5mo.

I took a clean and stable repo to undo my last changes. i did -npm install -npm upgrade -remove /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

There are many things involved I am not sure as I can't reproduce this error locally so Just giving some gueses.

1. Check which version of webpacker in your Gemfile please change as following

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

Also check what global version install of webpacker sometime it can conflict.

npm uninstall webpack -g
yarn remove @rails/webpacker

Now install

yarn add rails/webpacker#b6c2180