Error : You may need an appropriate loader to handle this file type

[alwinaugustin]

I am using @gtm-support/vue2-gtm": "^1.0.0" in one of my Vue-2 applications and the Vue versions are as follows:

    "vue": "^2.5.2",
    "vue-cookies": "^1.5.4",
    "vue-i18n": "^8.0.0",
    "vue-recaptcha": "^1.1.1",
    "vue-router": "^3.0.1",
    "vue-scrollto": "^2.17.1",
    "vue-session": "^1.0.0",
    "vuex": "^3.0.1"

and for the Webpack and Vue-Loader :

  "babel-core": "^6.22.1",
  "babel-eslint": "^7.2.3",
  "babel-loader": "^7.1.1",
  "dotenv-webpack": "^4.0.0",
  "vue-loader": "^13.3.0",
  "webpack": "^3.6.0",
  "webpack-bundle-analyzer": "^2.9.0",
  "webpack-dev-server": "^2.9.1",
  "webpack-hot-middleware": "^2.22.3",
  "webpack-merge": "^4.1.0"

Now, when I start my application, I get the following error:

ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                                3:45:02 PM

 error  in ./node_modules/@gtm-support/core/lib/utils.js

Module parse failed: Unexpected token (30:8)
You may need an appropriate loader to handle this file type.
|     const queryString = new URLSearchParams({
|         id,
|         ...((_c = config.queryParams) !== null && _c !== void 0 ? _c : {})
|     });
|     script.src = `https://www.googletagmanager.com/gtm.js?${queryString}`;

 @ ./node_modules/@gtm-support/core/lib/index.js 9:14-32
 @ ./node_modules/@gtm-support/vue2-gtm/dist/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8002 webpack/hot/dev-server ./src/main.js

 error  in ./node_modules/@gtm-support/core/lib/gtm-support.js

Module parse failed: Unexpected token (44:12)
You may need an appropriate loader to handle this file type.
|             defer: false,
|             compatibility: false,
|             ...options
|         };
|         // @ts-expect-error: Just remove the id from options

 @ ./node_modules/@gtm-support/core/lib/index.js 7:20-44
 @ ./node_modules/@gtm-support/vue2-gtm/dist/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8002 webpack/hot/dev-server ./src/main.js

In the main.js file. I have the following code:

import VueGtm from '@gtm-support/vue2-gtm'

Vue.use(VueGtm, {
  id: 'GTM-IDXX',
  defer: false,
  enabled: true,
  debug: true,
  loadScript: true
}) 

And I have a util.js file, and there I have the function for tracking events:

export default submitGTMEvents = (category, action, label) => {
  if (label === undefined || label === '') label = window.location.href
  const value = Number(store.getters.transactionId)
  Vue.gtm.push({
    event: null,
    category: category,
    action: action,
    label: label,
    value: value
  })
}

I call this function from my components. I am using the 1.0.0 version here as other versions also show me the same error, and thought an earlier version would sometimes fix the issue.

[Shinigami92]

You are using "webpack": "^3.6.0" which is really really old and therefore not under my support

Consider switching to Vite or alternatives, or try to find another way. Maybe even an older version can help, but as you can think these might have less features or other legacy dependencies that wont get updated anymore. But as you are already using webpack v3 I assume security fixes and legacy dependencies are not a problem for you anyways.

[Fomicha]

hi there. @alwinaugustin Did you resolve this issue? I have the same, but with

    "@gtm-support/vue2-gtm": "^2.0.0",
    "core-js": "^3.6.5",
    "vue": "^2.7.1",
    "vue-class-component": "^7.2.3",
    "vue-i18n": "^8.24.1",
    "vue-property-decorator": "^9.1.2",
    "vuelidate": "^0.7.6",
    "vuex": "^3.4.0"
    
    "@types/vuelidate": "^0.7.13",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.52.3",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"

[zzhenryquezz]

Can be fixed using the solution of this issue: https://stackoverflow.com/questions/74784673/vue-gtm-error-you-may-need-an-appropriate-loader-to-handle-this-file-type

vue.config.js

{
    transpileDependencies: ['@gtm-support/core', '@gtm-support/vue2-gtm']
}

nuxt.config.js

{
    build: {
        transpile: ['@gtm-support/core', '@gtm-support/vue2-gtm']
    }
}

[0xch]

@zzhenryquezz thanks, it works. It can be simplified by including whole @gtm-support

vue.config.js

{
    transpileDependencies: ['@gtm-support'],
}

[TrejoCode]

Same error