Webpack issue

[web-programmer-here]

I am having some issues using this in my app, I get this error when running the build

cacheable modules 628 KiB
  modules by path ./node_modules/ 613 KiB
    modules by path ./node_modules/@fawmi/vue-google-maps/src/ 92 KiB
      ./node_modules/@fawmi/vue-google-maps/src/main.js + 41 modules 91.7 KiB [built] [code generated] [1 warning]
      ./node_modules/@fawmi/vue-google-maps/src/utils/lazyValue.js 205 bytes [built] [code generated]
      ./node_modules/vue-loader/dist/index.js??ruleSet[0]!./node_modules/@fawmi/vue-google-maps/src/components/map.vue?vue&type=style&index=0&id=3d608eb9&lang=css 65 bytes [built] [code generated] [1 error]
    ./node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js 495 KiB [built] [code generated]
    ./node_modules/vue-scrollto/vue-scrollto.js 15.7 KiB [built] [code generated]
    ./node_modules/vue-loader/dist/exportHelper.js 328 bytes [built] [code generated]
    ./node_modules/vue-content-loader/dist/vue-content-loader.es.js 10.2 KiB [built] [code generated]
  modules by path ./src/frontend/ 14.6 KiB
    ./src/frontend/main.js + 20 modules 14.6 KiB [built] [code generated]
    ./src/frontend/scss/main.scss 59 bytes [built] [code generated]

WARNING in ./node_modules/@fawmi/vue-google-maps/src/components/autocomplete.vue?vue&type=template&id=a7545f16 (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./node_modules/@fawmi/vue-google-maps/src/components/autocomplete.vue?vue&type=template&id=a7545f16)
Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
(Emitted value instead of an instance of Error) (deprecation COMPILER_V_BIND_OBJECT_ORDER) v-bind="obj" usage is now order sensitive and behaves like JavaScript object spread: it will now overwrite an existing non-mergeable attribute that appears before v-bind in the case of conflict. To retain 2.x behavior, move v-bind to make it the first attribute. You can also suppress this warning if the usage is intended.
  Details: https://v3-migration.vuejs.org/breaking-changes/v-bind.html
1  |  
2  |    <input ref="input" v-bind="$attrs" v-on="$attrs" />
   |                       ^^^^^^^^^^^^^^^
3  |  
    

and

ERROR in ./node_modules/@fawmi/vue-google-maps/src/components/map.vue?vue&type=style&index=0&id=3d608eb9&lang=css (./node_modules/vue-loader/dist/index.js??ruleSet[0]!./node_modules/@fawmi/vue-google-maps/src/components/map.vue?vue&type=style&index=0&id=3d608eb9&lang=css) 2:0
Module parse failed: Unexpected token (2:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js

here is my relevant part of webpack configuration

	module: {
		rules: [
			{
				test: /\.vue$/,
				loader: "vue-loader",
				exclude: /node_modules/,
				options: {
					compilerOptions: {
						compatConfig: {
							MODE: 2,
						},
					},
				},
			},
			{
				test: /\.js$/,
				use: "babel-loader",
				exclude: /node_modules/,
			},
			{
				test: /\.scss$/,
				exclude: /node_modules/,
				use: [
					{
						loader: "file-loader",
						options: { outputPath: "../css/", name: "[name].css" },
					},
					"sass-loader",
				],
			},
		],
	},

I am using all latest packages:

"@fawmi/vue-google-maps": "^0.9.4",
"@vue/compat": "^3.2.30",
"vue": "^3.2.30",
...
"vue-cli-plugin-vue-next": "~0.1.4",
"vue-loader": "^17.0.0",
"webpack": "^5.68.0",
"webpack-cli": "^4.9.2"

is there any special configuration needed to get this to work with webpack?

@fawmi any chance you can take a look at this issue? thanks

[fawmi]

@web-programmer-here
Can you post how your component with vue-google-maps looks like?