Vue-cli: ERROR ValidationError: child "cacheId" fails because ["cacheId" is not allowed to be empty]

Created on 18 Jun 2019 · 4Comments · Source: vuejs/vue-cli

I get build error when I build by running NODE_ENV=production npm run build or using vue-cli's dashboard:

 Building for production...

 ERROR  ValidationError: child "cacheId" fails because ["cacheId" is not allowed to be empty]

ValidationError: child "cacheId" fails because ["cacheId" is not allowed to be empty]
    at Object.exports.process (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/joi/lib/errors.js:190:19)
    at internals.Object._validateWithOptions (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/joi/lib/types/any/index.js:668:31)
    at internals.Object.validate (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/joi/lib/types/any/index.js:702:21)
    at module.exports (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/workbox-build/build/entry-points/options/validate.js:20:33)
    at _callee$ (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/workbox-build/build/entry-points/generate-sw-string.js:36:23)
    at tryCatch (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14
    at new Promise (<anonymous>)
    at new F (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/core-js/library/modules/_export.js:36:28)
    at /home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12
    at generateSWString (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/workbox-build/build/entry-points/generate-sw-string.js:62:17)
    at GenerateSW._callee$ (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/workbox-webpack-plugin/build/generate-sw.js:155:24)
    at tryCatch (/home/iraj/Public/py3/django_projects/2.1/psyclinic-managing-system/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)

my vue-config.js:

//var path = require("path");
const BundleTracker = require("webpack-bundle-tracker");
const webpack = require("webpack");

module.exports = {
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
  },

  pluginOptions: {
    i18n: {
      locale: "en",
      fallbackLocale: "en",
      localeDir: "locales",
      enableInSFC: true
    }
  },

  //lintOnSave: false,

  publicPath: "/",

  // corresponds with `configureWebpack.output.path`
  outputDir: __dirname + "/assets/bundles/",

  devServer: {
    compress: true,
    port: 8080,
    historyApiFallback: true
  },
  configureWebpack: {
    output: {
      filename: "[name]-[hash].js"
    },
    devServer: {
      //  going to a page directly and not through the home page, gives me, for example:
      // `Cannot GET /take-action`
      // issue: hhttps://github.com/vuejs/vue-router/issues/1254#issuecomment-351773724
      historyApiFallback: true,
      proxy: {
        '/static': {
          target: 'http://127.0.0.1:9000',
        }
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      })
    ]
  },

  chainWebpack: config => {
    config.optimization.splitChunks(false);

    config
      .plugin("BundleTracker")
      .use(BundleTracker, [{ filename: "webpack-stats.json" }]);

  }
};

Source

iraj-jelo

Most helpful comment

@iraj-jelo It looks like this error occurs when you remove the name property in package.json. This name property is the default fallback value for pwa.name. But even when I define that name in my vue config it still fails, so I guess the name property in package.json is simply just mandatory.

https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration

svengt on 10 Sep 2019

👍6 ❤1

All 4 comments

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!