gtm-support / vue-gtm

Simple implementation of Google Tag Manager for Vue
https://www.npmjs.com/package/@gtm-support/vue-gtm
MIT License
214 stars 27 forks source link

Error: Module parse failed: @gtm-support/core/lib/gtm-support.js Unexpected token (45:12) #258

Closed dhakshinait closed 2 years ago

dhakshinait commented 2 years ago

Hi,

Thanks for great package. I have tried to use it in one of Vue 2 application but I got the below 3 compile errors for 'npm run prod'

Module parse failed: LOCAL DIRECTORY/@gtm-support/core/lib/gtm-support.js Unexpected token (45: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

 @ ./~/@gtm-support/core/lib/index.js 7:20-44
 @ ./~/@gtm-support/vue2-gtm/dist/index.js
 @ ./resources/assets/PROJ/app.js
 @ multi ./resources/assets/PROJ/js/md-snackbars.js ./resources/assets/PROJ/js/spark.js ./resources/assets/PROJ/app.js

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

Module parse failed: LOCAL DIRECTORY/node_modules/@gtm-support/core/lib/utils.js Unexpected token (37: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 : {}),
|     });
|     const source = (_d = config.source) !== null && _d !== void 0 ? _d : 'https://www.googletagmanager.com/gtm.js';

 @ ./~/@gtm-support/core/lib/index.js 9:14-32
 @ ./~/@gtm-support/vue2-gtm/dist/index.js
 @ ./resources/assets/PROJ/app.js
 @ multi ./resources/assets/PROJ/js/md-snackbars.js ./resources/assets/PROJ/js/spark.js ./resources/assets/PROJ/app.js

 error  

/assets/js/PROJ.js from UglifyJs
Unexpected character '`' [./~/@gtm-support/core/lib/assert-is-gtm-id.js:15,0][/assets/js/PROJ.js:100804,24]

package json

{
  "private": true,
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-stage-2": "^6.24.1",
    "laravel-mix": "0.10.0",
    "pusher-js": "^4.2.2",
    "vue-template-compiler": "^2.5.13",
    "vuetable-2": "^1.7.2",
    "webpack": "^2.7.0",
    "webpack-cli": "3.3.0"
  },
  "dependencies": {
    "@gtm-support/vue2-gtm": "^1.3.0",
    "accounting": "^0.4.1",
    "axios": "^0.15.3",
    "chart.js": "^2.9.1",
    "child_process": "^1.0.2",
    "express": "^4.16.2",
    "fs": "^0.0.1-security",
    "ioredis": "^2.5.0",
    "jquery": "^3.3.1",
    "laravel-echo": "^1.3.4",
    "lodash": "^4.16.2",
    "moment-countdown": "0.0.3",
    "moment-timezone": "^0.5.27",
    "net": "^1.0.2",
    "tls": "0.0.1",
    "underscore": "^1.10.2",
    "vee-validate": "^2.0.3",
    "vue": "^2.5.13",
    "vue-bootstrap-typeahead": "^0.2.6",
    "vue-events": "^3.1.0",
    "vue-gmaps": "^0.2.2",
    "vue-i18n": "^8.15.0",
    "vue-js-modal": "^2.0.1",
    "vue-quill-editor": "^2.3.3",
    "vue-router": "2.3.0",
    "vue-sweetalert": "^0.1.18",
    "vue-tables-2": "^0.6.99",
    "vue-tel-input": "^5.0.4",
    "vue-typer": "^1.2.0",
    "vue2-dropzone": "^2.3.6"
  }
}

Any idea what might be issue here?. Thanks in advance.

Shinigami92 commented 2 years ago

I see you are using Webpack v2 I'm afraid and unable to support such old bundling tools Please search for an older version of vue-gtm and hope that one of them works for your case => https://www.npmjs.com/package/vue-gtm

dhakshinait commented 2 years ago

Thanks. I have used vue-gtm 3.0.0 and it worked.

alwinaugustin commented 2 years ago

i have the same error and I am using Webpack 3.6.0

Shinigami92 commented 2 years ago

i have the same error and I am using Webpack 3.6.0

that's totally okay, just try an old version of vue-gtm legacy software is not supported by this project

alwinaugustin commented 2 years ago

@Shinigami92 I tried to use "@gtm-support/vue2-gtm": "^1.3.0", but that is giving error as follows:

ERROR in ./node_modules/@gtm-support/core/lib/utils.js
Module parse failed: Unexpected token (37: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 : {}),
|     });
|     const source = (_d = config.source) !== null && _d !== void 0 ? _d : 'https://www.googletagmanager.com/gtm.js';
 @ ./node_modules/@gtm-support/core/lib/index.js 9:14-32
 @ ./node_modules/@gtm-support/vue2-gtm/dist/index.js
 @ ./src/main.js

ERROR in ./node_modules/@gtm-support/core/lib/gtm-support.js
Module parse failed: Unexpected token (45: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

ERROR in static/js/vendor.js from UglifyJs
Unexpected token: name (err) [./node_modules/asn1.js/lib/asn1/base/reporter.js:71,0][static/js/vendor.js:5559,6]

  Build failed with errors.