Vue app version global variable -> Unexpected token C in JSON at position 0

Viewed 319

I forget where I saw it, but I came across a way to read the version number of your app into the app itself. I figure this will be useful to determine if a user having an issue is running the latest version, and not a version pulled from cache.

So, at the top of the vue.config.js I add process.env.VUE_APP_VERSION = require("./package.json").version;

But then when I go to build

$ vue-cli-service build --mode test --target app --dashboard


-  Building for test...

Starting type checking service...

Using 1 worker with 2048MB memory limit

undefined:1
C:\Users\xxxx\AppData\Roaming\npm\vue
^

SyntaxError: Unexpected token C in JSON at position 0
    at JSON.parse (<anonymous>)
    at createChecker (C:\development\AppDev\Alpha - Dev-V2\BusinessPartners\node_modules\fork-ts-checker-webpack-plugin\lib\service.js:69:19)
    at Object.<anonymous> (C:\development\AppDev\Alpha - Dev-V2\BusinessPartners\node_modules\fork-ts-checker-webpack-plugin\lib\service.js:81:17)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

Total task duration: 62.38s

This setup has built fine with other apps, but for some reason not this one. I'm thinking it must have something to do with fork-ts-checker-webpack-plugin. The not working one does have a newer version, since it uses a newer @vue/cli-plugin-typescript. I really don't want to downgrade anything to make this work again.

Is there some workaround, or a different way to get version number into the app? It's just that one line in the vue.config.js. If I comment that out, it compiles fine.

1 Answers

Well, found a way that semi-solves the problem.

module.exports = {
  chainWebpack: (config) => {
    config.plugin("define").tap((args) => {
      let v = JSON.stringify(
        /* eslint-disable-next-line */
        require("./package.json").version
      );
      args[0]["process.env"]["VUE_APP_VERSION"] = v;
      return args;
    });
  },
  ...
};

Gets the version number in app working. Less elegant, and I still get the same fork-ts-checker-webpack-plugin error if I try and compile in modern mode, but I'll take it for now.

Related