问题
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
回答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"]
}
来源:https://stackoverflow.com/questions/52901717/vuejs-babel-loader-this-setdynamic-is-not-a-function