vuejs + babel-loader this.setDynamic不是函数 [英] vuejs + babel-loader this.setDynamic is not a function

问题描述

我的代码有一些问题.我正在尝试将belbel-loader添加到我的laravel-mix webpack的配置中，但是我收到一条错误消息，告诉我this.setDynamic不是一个函数.

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.

这是我的webapack-mix.js文件

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

推荐答案

在Laravel 5.4.x中遇到类似的问题，并在尝试并错误切换模块版本后设法解决了该问题.

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"]
}

这篇关于vuejs + babel-loader this.setDynamic不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！