Npm run watch terminates unexpectedly after editing Vue or JS files: compileTemplate needs the id option

Other Questions NPM
1

I am currently facing a problem where my ‘npm run watch’ task stops unexpectedly after any edits to my Vue or JavaScript files. Although the development (npm run dev) and production (npm run prod) builds work seamlessly, the watcher crashes with an error indicating that compileTemplate now requires an id option. I am using Laravel Mix combined with TypeScript for my build process, and I suspect the configuration might need adjustments. Below is my modified webpack setup:

.buildConfig({
  rulesList: [
    {
      match: /\.tsx?$/,
      useLoader: 'alternative-ts-loader',
      opts: { attachSuffix: [/\.vue$/] },
      ignore: /lib/
    }
  ],
  extensionsOrder: ['.ts', '.tsx', '.js', '.jsx', '.vue']
});

Any insights or workaround suggestions to resolve this issue would be greatly appreciated.

2

I encountered a similar issue while working with Laravel Mix and Vue recently. I resolved it by updating my vue-loader version and ensuring that my webpack configuration explicitly provided the necessary id, which seemed to satisfy the new requirements of compileTemplate. I experimented by manually adding an id to the vue-loader options in my webpack mix settings, and it stopped the watcher from crashing. This approach was not ideal in the long run, so I eventually updated dependencies to support the changes natively. It’s worth exploring both solutions to see which fits your project best.

3

hey i had the same issue. ended up upping laravel mix and tweaking the vue-loader config to include a dummy id. its not a perfect fix but stops the watch from crashing. sometimes these updates come with quirks, so check for latest docs

4

While I haven’t run into this specific issue before, I eventually discovered that the problem stemmed from a mismatch between the vue-loader version and the compiled vue configuration used by Laravel Mix. My solution was to align the versions by upgrading both vue-loader and Laravel Mix to their latest stable releases. After doing so, I adjusted the vue-loader settings in the webpack configuration to let it automatically assign unique ids to processed files, preventing the watcher from crashing. This experience underlined the importance of keeping build dependencies in sync.

5

My workaround came by taking a slightly different tack from others. I created a custom loader wrapper that intercepts the call to compileTemplate and injects a unique id derived from the file path. This modification was only used in development mode, ensuring the watcher didn’t crash while files were being edited. Although it was a bit of a hack, it provided much-needed stability until a proper dependency update could be made. This approach allowed me to continue work uninterrupted without a major overhaul to the existing webpack config.