Module parse failed: Unexpected token (1:0)

[RamanSel]

trafficstars

I have a problem with webpack 4 while trying to build the project for production. I get the following error:

ERROR in ./node_modules/vue2-google-maps/dist/components/placeInput.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <label>
|         <span v-text="label"></span>
@ ./node_modules/vue2-google-maps/dist/main.js 54:18-56
@ ./src/main.js

ERROR in ./node_modules/vue2-google-maps/dist/components/map.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <div class="vue-map-container">
|     <div ref="vue-map" class="vue-map"></div>
@ ./node_modules/vue2-google-maps/dist/main.js 46:11-42
@ ./src/main.js

ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <div class="vue-street-view-pano-container">
|     <div ref="vue-street-view-pano" class="vue-street-view-pano"></div>
@ ./node_modules/vue2-google-maps/dist/main.js 50:26-72
@ ./src/main.js

ERROR in ./node_modules/vue2-google-maps/dist/components/autocomplete.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <input
|     ref="input"
@ ./node_modules/vue2-google-maps/dist/main.js 58:20-60
@ ./src/main.js

ERROR in ./node_modules/vue2-google-maps/dist/components/infoWindow.vue 3:0
Module parse failed: Unexpected token (3:0)
| /* vim: set softtabstop=2 shiftwidth=2 expandtab : */
|
> <template>
|   <div>
|     <div ref="flyaway"> <!-- so named because it will fly away to another component -->
@ ./node_modules/vue2-google-maps/dist/main.js 42:18-56
@ ./src/main.js

My webpack config is :

'use strict'

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const helpers = require('./helpers')
const isDev = process.env.NODE_ENV === 'development'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const webpackConfig = {
  entry: {
    polyfill: '@babel/polyfill',
    main: helpers.root('src', 'main')
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue$: isDev ? 'vue/dist/vue.runtime.js' : 'vue/dist/vue.runtime.min.js',
      '@': helpers.root('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        include: [
          helpers.root('src'),
          resolve('node_modules/vue2-google-maps')
        ],
        exclude: [/node_modules/]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [helpers.root('src')]
      },
      {
        test: /\.css$/,
        use: [
          isDev ? 'vue-style-loader' : MiniCSSExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: isDev } }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          isDev ? 'vue-style-loader' : MiniCSSExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: isDev } },
          { loader: 'sass-loader', options: { sourceMap: isDev } }
        ]
      },
      {
        test: /\.sass$/,
        use: [
          isDev ? 'vue-style-loader' : MiniCSSExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: isDev } },
          { loader: 'sass-loader', options: { sourceMap: isDev } }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|gif)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [':data-src']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlPlugin({
      template: './public/index.html',
      chunksSortMode: 'dependency'
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: false,
    port: 9000
  }
}

module.exports = webpackConfig

my question is, how would I make webpack know about the vue2-google-maps files in node modules ? thanks !

[BrianLusina]

Encountering the same issue on this.

[liam-ot]

Also having this issue with webpack 5.28

[web-programmer-here]

did anyone find a solution for this? @RamanSel @BrianLusina @liam-ot ?

[web-programmer-here]

@diegoazh is this project maintained anymore? I can't seem to get it to work with these errors

[BrianLusina]

did anyone find a solution for this? @RamanSel @BrianLusina @liam-ot ?

Sorry @web-programmer-here, didn't find a solution to this.

[diegoazh]

@diegoazh is this project maintained anymore? I can't seem to get it to work with these errors

Sorry for my delay, currently I'm not maintaining this plugin, I was working on a new one gmap-vue, if you want you can test the new v2.0.3? but it has breaking changes, please read its documentation. Regards.

[web-programmer-here]

@diegoazh thanks, that one has the same issue

 ERROR in ./node_modules/gmap-vue/dist/components/rectangle-shape.vue 1:0
    Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    > <script>
    | import MapElementMixin from '../mixins/map-element';

[diegoazh]

@web-programmer-here can you open an issue there?

[diegoazh]

@web-programmer-here on gmap-vue we moved the build to rollup instead of using Webpack, can you try again if it throws the same error?