vuejs + babel-loader this.setDynamic is not a function

Question

I have some problems with my code. I'm trying to add babel-loader to my laravel-mix webpack's config, but I get an error telling me that this.setDynamic is not a function.

This is my webapack-mix.js file

const {mix} = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.webpackConfig({
    module: {
        rules: [
            // We're registering the TypeScript loader here. It should only
            // apply when we're dealing with a `.ts` or `.tsx` file.
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {appendTsSuffixTo: [/\.vue$/]},
                exclude: /node_modules/,
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ["@babel/plugin-transform-runtime"],
                    }
                },

            }
        ],
    },
    plugins: [
        // make sure to include the plugin!
        new VueLoaderPlugin()
    ],
    resolve: {
        // We need to register the `.ts` extension so Webpack can resolve
        // TypeScript modules without explicitly providing an extension.
        // The other extensions in this list are identical to the Mix
        // defaults.
        extensions: ['*', '.jsx', '.vue', '.ts', '.tsx', '.js'],
    },
});

mix.sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/admin.scss', 'public/css')
    .ts('resources/js/src/app.ts', 'public/js')
    .ts('resources/js/src/Admin/admin.ts', 'public/js')

And when I run my dev-server I got this error

Does anyone have a solution for that? I did a lot of research on the internet but nothing works

Edenedens

I got the same when I tried with material-components. Found any solution to this? – Beach

Answer 1

Encountered similar issue with Laravel 5.4.x and managed to resolve it after try and error switching the modules version.

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "axios": "^0.16.2",
    "babel-loader": "^7.1.5",
    "babel-plugin-dynamic-import-webpack": "^1.1.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.11",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.10",
    "vue": "^2.5.22",
    "vue-loader": "^13.7.3",
    "vue-style-loader": "^3.1.2",
    "vue-template-compiler": "^2.5.22"
  },
  "dependencies": {
    "vee-validate": "^2.1.0-beta.1",
    "vue-click-outside": "^1.0.7",
    "vue-content-loading": "^1.5.3",
    "vue-multiselect": "^2.1.3",
    "yarn": "^1.9.4"
  }
}

webpack.mix.js

let mix = require('laravel-mix');
/**
 * Override Laravel Mix Webpack Configuration
 * @type {{chunkFilename: string, publicPath: string}}
 */
mix.config.webpackConfig.output = {
    chunkFilename: 'js/[name].bundle.js',
    publicPath: '/',
};

mix.js('resources/assets/js/app.js', 'public/js')

.babelrc

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "plugins": ["syntax-dynamic-import"]
}

Vagrant