Laravel mix transpile dependency

user_1882337 0
Viewed 2106

I'm trying to use the vuex-module-decorators library in a laravel mix project (using typescript). But I keep getting the error Uncaught TypeError: Class constructor VuexModule cannot be invoked without 'new'. This seems to be a known issue and can be resolved by adding transpileDependencies: ['vuex-module-decorators'] to my vue.config.js file which will tell babel to transpile the package.

Since I'm using laravel mix, adding a vue.config.js file doesn't do anything. And I can't figure out how to tell laravel mix to transpile the vuex-module-decorators dependency.

I tried adding { test: /\.js$/, loaders: ['babel-loader'] }, to the webpack config in webpack.mix.js (also with explicitly including the dependency) but it doesn't work.

So how can I tell laravel mix to transpile the vuex-module-decorators dependency (to es5)?

If it helps, here's my webpack.mix.js file:

mix
  .ts('resources/ts/app.ts', 'public/js')
  .stylus('resources/stylus/app.styl', 'public/css');
laravel-mix laravel vue.js webpack typescript
2 Answers

I was able to point babel-loader at all .js files and that worked:

// In webpack.mix.js
mix.webpackConfig({
   module: {
     rules: [{
       test: /\.js?$/,
       use: [{
         loader: 'babel-loader',
         options: mix.config.babel()
       }]
     }]
   }
 });

However your compile times will be reduced if use a more specific test to target only the modules you need to transpile:

    test: /node_modules\/(vuex-module-decorators|vuex-persist)\/.+\.js$/,
user_8307750

I published a Laravel Mix extension that handles transpilation of node_modules dependencies: Laravel Mix Transpile Node Modules.

// Transpile all node_modules dependencies
mix.transpileNodeModules()

// Transpile selected dependencies
mix.transpileNodeModules(['swiper', 'dom7'])
user_37596150
Related