Compiling laravel mix dependencies

I am attempting to utilize the vuex-module-decorators library in a Laravel mix project that is using TypeScript. However, I keep encountering an error stating 

Uncaught TypeError: Class constructor VuexModule cannot be invoked without 'new'
. This issue appears to be documented on GitHub and can be resolved by adding 
transpileDependencies: ['vuex-module-decorators']
to my vue.config.js file, instructing Babel to transpile the package.

Since I am working with Laravel Mix, creating a vue.config.js file does not have any effect. I am struggling to find a way to prompt Laravel Mix to transpile the vuex-module-decorators dependency.

I have attempted to add 

{ test: /\.js$/, loaders: ['babel-loader'] },
to the webpack configuration in webpack.mix.js (even explicitly including the dependency), but it has not been successful.

Is there a method for directing Laravel Mix to transpile the vuex-module-decorators dependency into ES5?

If helpful, here is a glimpse of my webpack.mix.js file:

mix
  .ts('resources/ts/app.ts', 'public/js')
  .stylus('resources/stylus/app.styl', 'public/css');
laraveltypescriptvue.jswebpacklaravel-mix

Answer №1

I successfully configured babel-loader to process all my .js files by updating the webpack.mix.js file:

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

To optimize compilation times, consider using a more specific test pattern targeting only the necessary modules for transpilation:

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

Answer №2

If you're looking to simplify the transpilation of node_modules dependencies in Laravel Mix, check out my latest creation: Laravel Mix Transpile Node Modules.

// Easily transpile all node_modules dependencies
mix.transpileNodeModules()

// Customize transpilation for specific dependencies
mix.transpileNodeModules(['swiper', 'dom7'])

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the Position of Material UI Select in a Theme Override

I'm trying to customize the position of the dropdown menu for select fields in my theme without having to implement it individually on each select element. Here's what I've attempted: createMuiTheme({ overrides: { MuiSelect: { ...

reactjstypescriptmaterial-ui

Is it possible to retrieve the signature for every method within a class?

Let's consider a scenario where we have a class defined as follows: class Actions { static FooAction = 'foo' as const; someAction1() { return { type: Actions.FooAction, payload: {a: 1, b:2} }} static BarAction = &apos ...

typescripttypescript3.0

Injecting configurable middleware dependencies in Nest.js allows for dynamic customization of middleware

While many tutorials demonstrate how to inject providers into dynamic modules, most of them only focus on services and not middleware. The challenge arises when attempting to create reusable middleware that also requires injected providers. For instance, ...

node.jstypescriptdependency-injectionnestjsmiddleware

What could be causing the input event not to be triggered consistently when I select or highlight text?

I have implemented a 4-digit pin field with a specific behavior: when a field is filled, the focus automatically shifts to the next field (the cursor moves to the next input field). If text in a field is deleted, the text in that field is also removed and ...

javascriptvue.jsdom-eventsquasar-framework

Issue with initializing Nuxt in GitHub Actions resulting in a critical error

I'm currently stuck on a Nuxt Fatal error while running a GitHub actions workflow for a nuxt app with cypress.js testing. Despite trying to decipher the stack trace, I can't seem to pinpoint the root cause of this issue during the app build. For ...

node.jsvue.jsnpmnuxt.jsgithub-actions

Twilio SMS Notification: The Class extension value provided is not a valid constructor or null

When attempting to utilize Twilio for sending SMS messages in a Vue.js project, I encountered an error while accessing Tools -> Developer Tools. <template> <div> <input type="text" v-model="to" placeholder="Ph ...

javascriptvue.jsvuejs3twilio

The promise is unexpectedly fulfilled ahead of schedule without returning the expected value from an AXIOS call

My current challenge involves making a request to a service that rapidly generates multiple strings. The problem lies in returning a promise from this service, as I lack control over the string-generation process. It is crucial for me to return a promise ...

javascriptnode.jstypescriptpromiseaxios

Implementing a Fixed Navbar in VueJS on Scroll

I am seeking help with creating a Fixed Navbar on Scrolling using Vue.js. I initially wrote some jQuery code for this functionality, but now I want to transition it to Vue.js. The updated code can be found in a file named navbar.js. Previous jQuery CODE ...

htmljquerycssvue.js

Scrolling Vue bootstrap images within a carousel to prevent overflow

I am working with a vue bootstrap carousel that displays images with 100% width. I want to enable vertical scrolling for portrait images so that I can view the bottom of the image. However, I am facing an issue where the scrollbar appears but is inactive ...

vue.jsbootstrap-vue

Are you facing issues with Tailwind classes not functioning correctly in your Nuxt app?

After creating a nuxt app and selecting Tailwind as my UI framework, everything was working smoothly with the classes. However, the situation changed when I decided to add a tailwind.config.js file using the npx tailwindcss init command. Suddenly, the tail ...

vue.jsnuxt.jstailwind-css

Prevent the cursor from moving when the focus changes in Vuetify

I created a code pen that allows the user to trigger the dropdown menu for the second v-autocomplete by entering text in the first v-autocomplete. I achieved this by setting isFocused to true. However, an issue arises where the cursor automatically moves t ...

javascriptvue.jsvuetify.jsv-autocomplete

Saving the value of array[i] from a for loop into a fresh array results in undefined

I am currently developing a matching algorithm that compares two arrays of strings. If there is an exact match (===), it stores the results in the unSafeResult array. If there is a match using Regex, it stores the results in the warningResult array. Howeve ...

javascriptarraysangulartypescriptionic2

Having trouble with the environment.ts file during Angular 2 testing

Having issues while attempting to write a basic test in Angular 2, specifically with an error related to environment.ts: ERROR in ./web/environments/environment.ts Module build failed: Error: web\environments\environment.ts is missing from ...

angulartypescriptkarma-jasmineangular-testangular-unit-test

Struggling to render the template inside a .vue file in a Vue.js + TypeScript project?

Is anyone familiar with setting up a Vue TS based project? I have encountered an issue where the template data is not being rendered in the browser's DOM. The project structure can be found in this repository: https://github.com/AndrewBogdanovTSS/typ ...

typescriptvue.jsvuejs2

Transforming a sizeable Typescript undertaking into ES6 modules

I am faced with the challenge of transitioning a fairly large app (~650 files) that currently has a mix of ES6 modules and legacy global namespace internal modules and classes. My goal is to convert everything to 100% ES6 modules. Considering an Iterativ ...

typescriptes6-modules

Ways to convert a callback-based function into a promise without losing the returned value

After being given access to this API: function doSomeWork(callbacks : { success ?: (result : SuccessCallbackResult) => void, fail ?: (result : FailCallbackResult) => void, complete ?: (result : CompleteCallbackResult) => void }) : Task ...

javascripttypescriptasynchronousecmascript-6promise

Explaining how to define a function parameter that accepts a class as an argument in TypeScript

I'm looking to develop a function that can take the class type (the class itself, not an instance) as a parameter and then instantiate an object based on that input. Let me illustrate this with an example: //All classes that could be passed as param ...

ooptypescriptinstance

Containerizing Vue with Flask using uwsgi and nginx

I have a client-server project that I'm looking to containerize. The project structure looks like this: ├── client │ ├── dist │ ├── node_modules │ ├── public │ └── src ├── nginx └── server ...

dockervue.jsnginxflask

What is the best way to handle typing arguments with different object types in TypeScript?

Currently, I have a function that generates input fields dynamically based on data received from the backend. To ensure proper typing, I've defined interfaces for each type of input field: interface TPField { // CRM id as a hash. id: string nam ...

reactjstypescript

Rename the directory `bootstrap/cache/packages` using Laravel 6's `artisan package:discover`

Following the execution of composer update, an error occurred: In Filesystem.php line 146: rename(/var/www/bootstrap/cache/packages.phpE7r5E4,/var/www/bootstrap/cache /packages.php): No such file or directory The Artisan commands are no longer functio ...

phplaravellaravel-6