Korzystam z laravel-mix i zaktualizowałem z wersji 4.0 do wersji "^6.0.11". Tak wygląda plik package.json :
{
"private": true,
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production"
},
"devDependencies": {
"@babel/helper-compilation-targets": "^7.10.4",
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.2.1",
"jquery": "^3.2",
"laravel-mix": "^6.0.11",
"lodash": "^4.17.20",
"node-sass": "^4.14.1",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^7.3.1",
"ts-loader": "^8.0.4",
"vue": "^2.6.12",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"babel-loader": "^8.2.2",
"image-to-blob": "^0.2.0",
"laravel-mix-compress-images": "^1.0.4",
"laravel-mix-imgmin": "^0.1.1",
"laravel-mix-svg-vue": "^0.3.0",
"typescript": "^4.0.3",
"vue-class-component": "^7.2.6",
"vue-clickaway": "^2.2.2",
"vue-multiselect": "^2.1.6",
"vue-property-decorator": "^9.0.0",
"vue-slider-component": "^3.2.11"
}
}
Gdy uruchamiam npx mix - czyli próbuję kompilować wyskakuje taki błąd :
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown option: .esModule.
Niewiele mi to mówi, zainstalowałem najnowszą wersję Babel'a i tak nie pomogło. Próbowałem wyszukać informacji w google ale nic nie znalazłem. Tak wygląda plik webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-svg-vue');
var path = require('path');
/*
|--------------------------------------------------------------------------
| 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.js('resources/js/mainpage.js', 'public/js').vue()
.js('resources/js/auth/register.js', 'public/js').vue()
.js('resources/js/contact.ts', 'public/js').vue()
.js('resources/js/auth/request_password_reset_link.js', 'public/js').vue()
.js('resources/js/auth/password_reset.js', 'public/js').vue()
.js('resources/js/auth/password_reset_confirmation.js', 'public/js').vue()
.js('resources/js/auth/user/settings_panel.js', 'public/js').vue()
.js('resources/js/movies/movies_set_complete.ts', 'public/js').vue()
.js('resources/js/advanced_search.ts', 'public/js').vue()
.sass('resources/sass/mainpage.scss', 'public/css')
.sass('resources/sass/movies_set_complete.scss', 'public/css')
.sass('resources/sass/contact.scss', 'public/css')
.sass('resources/sass/auth/password_reset.scss', 'public/css')
.sass('resources/sass/auth/register.scss', 'public/css')
.sass('resources/sass/auth/password_reset_confirmation.scss', 'public/css')
.sass('resources/sass/auth/user/settings_panel.scss', 'public/css')
.sass('resources/sass/advanced_search.scss', 'public/css')
.svgVue()
.options({processCssUrls: false})
.webpackConfig({
resolve: {
alias: {
'@js' : path.resolve('resources/js'),
'@jscomponents' : path.resolve('resources/js/components'),
'@jsmodules' : path.resolve('resources/js/modules'),
'sass' : path.resolve('resources/sass'),
'sasscomponent' : path.resolve('resources/sass/components'),
'@jscomponents-decoration' : path.resolve("resources/js/components/decoration"),
'@jscomponents-form-controls' : path.resolve('resources/js/components/form_controls'),
'@interfaces' : path.resolve('resources/js/interfaces'),
'@svgicon' : path.resolve('resources/images/decoration/icons/svg')
},
extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx", ".svg"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: { appendTsSuffixTo: [/\.vue$/] },
exclude: /node_modules/
},
{
test: /\.svg$/,
use: [
'babel-loader',
'vue-svg-loader',
],
},
]
}
})
Jakieś pomysły?