Does not work with Vue CLI v5 / Webpack 5

[undergroundwires]

Vue CLI 5.0 uses webpack 5. It's not possible to use it due to vue-cli-plugin-electron-builder dependency.

npm run electron:serve or npm run electron:build throws:

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/home/bob/user/dev/undergroundwires/privacy.sexy/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/home/bob/user/dev/undergroundwires/privacy.sexy/node_modules/ts-loader/dist/index.js:14:21)

vue-cli-plugin-electron-builder depends on older webpack 4.

Is there anyway we can use this project along with Vue CLI 5?

[megasanjay]

So we use vue-cli 5 on our app. I think I tested it for the latest version of the CLI so it did work for our case.

"@vue/cli-plugin-babel": "5.0.0-rc.1",
"@vue/cli-plugin-eslint": "5.0.0-rc.1",
"@vue/cli-service": "5.0.0-rc.1",

I have it on a specific version for Tailwind V3 but it should work I believe.

[undergroundwires]

Ok, thanks for the feedback. interesting to know it works for others. I'd love to get it working and complete migration too.

I work on open-source project so it should be easy to reproduce, here would be the steps:

1. Clone my repository: git clone https://github.com/undergroundwires/privacy.sexy or see repository page for SSL etc.
2. Navigate to cloned repo: cd privacy.sexy
3. Switch to the branch I created for this test: git switch 5
4. Install dependencies: npm install
5. Electron build or serve: npm run electron:serve or npm run electron:build

The latest commit just runs vue upgrade to upgrade from 4.x to 5.x. npm run build and npm run serve works without any issues but electron commands results on logged error. Everything else is just fine.

Here are quick links for my configs: vue.config.js, main.ts.

[megasanjay]

@undergroundwires I don't know if this helps but I was able to run your project with npm install ts-loader@~8.2.0. Does this help you with what you need? If it doesn't work I can PR my repo in so you can have the same dependencies.

I got it from here btw: https://stackoverflow.com/questions/68016372/webpack-ts-loader-error-loadercontext-getoptions-is-not-a-function

Just ran electron:build. Looks like it went through until the code signing stage so I have a bundled version as well.

[undergroundwires]

I love you @megasanjay ❤️ It worked great.

So happy to be able to complete the migration without waiting for webpack 5.0 release. Thanks a lot for your help, time and indirectly contributing to my project as well (also happy new year!) 🎉.

I was curious why it worked and tested all other newer versions as well. I see that it works up to 9.0.1. I checked changelogs and saw that v9.0.2 removed usage of loader-utils. And the issue explains that the problem is caused when webpack 4 CLI is used.

So my problem is solved with the workaround from @megasanjay, but I'm keeping the issue open because webpack 4 used by this plugin is still the root cause of the problem.

[nklayman]

See #1326 (comment)