Vue cli webpack build fails when add three-musketeers

[johnEiratech]

Hi,
I love this library so thanks for developing it:)
When I install it, it warns:
warning three-musketeers > [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin

Then when i try to do a build, it fails with

Module build failed (from ./node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/file-loader/dist/cjs.js):
TypeError: Cannot read property 'context' of undefined

If I remove three-musketeers, everything works fine.
Any ideas?

[FarhadG]

Thanks for the kind words, @johnEiratech! Glad you're finding it useful. There are so many more features that would be awesome to built into it, but one step at a time :)

If you can publish a POC showing this error, I can take a look and see what's the issue.

Also, not sure why your project is trying to build three-musketeers. It should be pointing to the built version so it shouldn't be throwing any errors, unless node_modules is not being excluded in your Webpack config.

[johnEiratech]

Hi,
Thanks for getting back to me. Here is a repo with the poc you requested.

When you run yarn serve, you will see the errors after doing yarn install.
You will also have to install vue-cli, see here.
To inspect the webpack config, you can run vue inspect > output.js.

[FarhadG]

Thanks for this, @johnEiratech! At first glance, it's very strange that Vue is even trying to compile the node_modules. It shouldn't be doing that...

Another thing is that when I comment out the font imports in your code, nearly all of the errors go away except for one.

Will need to investigate further but need to know more about Vue's bundling process to find out more.

[johnEiratech]

it only seems to be clashing with css loaders, have you tried updating extract-text-webpack-plugin to mini-css-extract-plugin? I tried adding the minified library into index.html but i got errors. Have you tried that? If I could include it in the index.html file, that would work for me with some extra webpack configuration.
Really want to test with this library as I build a map from websocket events and with your library, i can test the whole end to end flow so fingers crossed:)

[FarhadG]

Yeah those loaders have all been removed from the build Webpack config, @johnEiratech! I may just do a basic Webpack config outside of React and build the library that way—it may be easier that way. I used create-react-app to get up and running quickly.

Do you have any boilerplates Webpack examples that could run this library? If so, I can try a quick swap and publish.

[johnEiratech]

I'll pull the code and try a different webpack config without react to build and see how it goes, I think I have one somewhere. I'll let you know how it goes 👍

[FarhadG]

Any luck with your work, @johnEiratech?

[Krupasrinivasan]

Hi Farhad,
I am working with your library. When i try to import three-musketeers
import musketeers from '../modules/three-musketeers.min.js';
its showing the following error
Uncaught SyntaxError: The requested module '../modules/three-musketeers.min.js' does not provide an export named 'default'
Can you help me out with this?

[cryptosmiler]

Hello team.
If you are facing issues with the Three-Musketeers approach in combination with Vue CLI and Webpack, and you're looking for an alternative setup, you can consider using Docker and Webpack directly without the Three-Musketeers tool.If you are facing issues with the Three-Musketeers approach in combination with Vue CLI and Webpack, and you're looking for an alternative setup, you can consider using Docker and Webpack directly without the Three-Musketeers tool. I will provide guide on how to set up a Vue.js project using Docker and Webpack if you feel free.