Laravel mix 6 support?

[aureliusm]

Hi,

I upgraded to laravel mix 6 and now I am receiving the following error:

$ mix watch
[webpack-cli] TypeError: Cannot read property 'babel' of undefined
    at Svelte.webpackRules (/Users/mark/project/node_modules/laravel-mix-svelte/src/index.js:22:67)
    at ComponentRegistrar.applyRules (/Users/mark/Sites/project/node_modules/laravel-mix/src/components/ComponentRegistrar.js:175:23)
    at /Users/mark/Sites/project/node_modules/laravel-mix/src/components/ComponentRegistrar.js:83:48
    at /Users/mark/Sites/project/node_modules/laravel-mix/src/Dispatcher.js:34:69
    at Array.map (<anonymous>)
    at Dispatcher.fire (/Users/mark/Sites/project/node_modules/laravel-mix/src/Dispatcher.js:34:54)
    at Mix.dispatch (/Users/mark/Sites/project/node_modules/laravel-mix/src/Mix.js:108:32)
    at WebpackConfig.buildRules (/Users/mark/Sites/project/node_modules/laravel-mix/src/builder/WebpackConfig.js:157:19)
    at WebpackConfig.build (/Users/mark/Sites/project/node_modules/laravel-mix/src/builder/WebpackConfig.js:27:20)
    at async module.exports (/Users/mark/Sites/project/node_modules/laravel-mix/setup/webpack.config.js:7:12)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any ideas how to fix?

[morpheus7CS]

Hey @aureliusm,

our package hasn't been upgraded to support Laravel Mix v6 yet. I'll try to look into it this weekend.

Kind regards, g

[aureliusm]

Hi, oh thanks for the quick response. Looking forward and I hope it is not much work.

All the best!

[xavi7th]

Hi @morpheus7CS,

Did you get the chance to look at this?

[morpheus7CS]

Hey @xavi7th and @aureliusm,

I upgraded the peer dependency for v5 and v6 of Laravel Mix. Let me know if this fixes it.

Kind regards, g

[crazedVic]

I think this might still not work, so first off, latest laravel installs: "laravel-mix": "^6.0.6" When i try to install, npm install laravel-mix-svelte, i get this:

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: laravel-mix@6.0.10
npm ERR! node_modules/laravel-mix
npm ERR!   dev laravel-mix@"^6.0.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! laravel-mix-svelte@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: laravel-mix@undefined
npm ERR! node_modules/laravel-mix
npm ERR!   peer laravel-mix@"^4.0 | ^5.0 | ^6.0" from laravel-mix-svelte@0.3.0
npm ERR!   node_modules/laravel-mix-svelte
npm ERR!     laravel-mix-svelte@"*" from the root project

I install it using --force, but then running npm run dev i get:

[webpack-cli] TypeError: Cannot read property 'babel' of undefined
    at Svelte.webpackRules (/home/user/proj/inert-svelte/node_modules/laravel-mix-svelte/src/index.js:22:67)
    at ComponentRegistrar.applyRules (/home/user/proj/inert-svelte/node_modules/laravel-mix/src/components/ComponentRegistrar.js:191:23)
    at /home/user/proj/inert-svelte/node_modules/laravel-mix/src/components/ComponentRegistrar.js:98:48
    at /home/user/proj/inert-svelte/node_modules/laravel-mix/src/Dispatcher.js:37:62
    at Array.map (<anonymous>)
    at Dispatcher.fire (/home/user/proj/inert-svelte/node_modules/laravel-mix/src/Dispatcher.js:37:47)
    at Mix.dispatch (/home/user/proj/inert-svelte/node_modules/laravel-mix/src/Mix.js:224:32)
    at WebpackConfig.buildRules (/home/user/proj/inert-svelte/node_modules/laravel-mix/src/builder/WebpackConfig.js:158:19)
    at WebpackConfig.build (/home/user/proj/inert-svelte/node_modules/laravel-mix/src/builder/WebpackConfig.js:29:20)
    at async /home/user/proj/inert-svelte/node_modules/webpack-cli/lib/webpack-cli.js:792:37

I did install babel:

"dependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",

and i added a .babelrc to the project:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

[morpheus7CS]

Hey to all,

due to my own typo in allowing different Mix versions, we have released v 0.3.1.

Hopefully, this fixes it and the new version now works as expected.

Kind regards, g

[alabacakmurat]

Just installed thru npm again, still throws >cannot ready property of 'babel' of undefined<

[callon]

The issue persists, and is located in /src/index.js on line 22:

{ loader: 'babel-loader', options: mix.config.babel() },

The error is caused by mix.config being undefined. I would like to help, but I'm really not that experienced with Webpack. I have added some steps to reproduce the issues below:

I'm using Node v. 15.6.0 with NPM 7.4.0 on MacOSX.

To reproduce the issue completely run the following commands in your terminal:

1. mkdir laravel-mix-svelte && cd laravel-mix-svelte
2. npm install laravel-mix@^6.0.10 laravel-mix-svelte@^0.3.1
3. mkdir src && touch src/app.{js,scss}
4. touch webpack.mix.js

Paste the following code into your webpack.mix.js file (use nano or your text editor of choice:

const mix = require('laravel-mix'); require('laravel-mix-svelte');

mix.js('src/app.js', 'dist') .sass('src/app.scss', 'dist') .setPublicPath('dist') .svelte();

Run webpack with the following command - do it twice as the first time it installs extra dependencies

5. node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js

This should produce the error with full stack trace

[xavi7th]

The issue persists, and is located in /src/index.js on line 22:

{ loader: 'babel-loader', options: mix.config.babel() },

The error is caused by mix.config being undefined. I would like to help, but I'm really not that experienced with Webpack. I have added some steps to reproduce the issues below:

I'm using Node v. 15.6.0 with NPM 7.4.0 on MacOSX.

To reproduce the issue completely run the following commands in your terminal:

1. mkdir laravel-mix-svelte && cd laravel-mix-svelte
2. npm install laravel-mix@^6.0.10 laravel-mix-svelte@^0.3.1
3. mkdir src && touch src/app.{js,scss}
4. touch webpack.mix.js

Paste the following code into your webpack.mix.js file (use nano or your text editor of choice:

`const mix = require('laravel-mix');

require('laravel-mix-svelte');

mix.js('src/app.js', 'dist') .sass('src/app.scss', 'dist') .setPublicPath('dist') .svelte();`

Run webpack with the following command - do it twice as the first time it installs extra dependencies

5. node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js

This should produce the error with full stack trace

@morpheus7CS I can confirm this. It does appear that in vs 6, mix.config has been removed. I had to remove the babel transpile options to get it to work temporarily.

From

  webpackRules() {
        return [
            {
                test: /\.(html|svelte)$/,
                use: [
                    { loader: 'babel-loader', options: mix.config.babel() },
                    { loader: 'svelte-loader', options: this.options }
                ]
            },
            {
                test: /\.(mjs)$/,
                use: { loader: 'babel-loader', options: mix.config.babel() }
            }
        ];
    }

to

webpackRules() {
    return {
        test: /\.(html|svelte)$/,
        use: {
            loader: "svelte-loader",
            options: this.options
        }
    };
}

in effect reversing the changes made in v0.1.6

[Tschoatscho]

@alabacakmurat, @xavi7th : mix.config seems to be undefined since mix >= 6. I just commented out the rules for babel-loader in method webpackRules and within a first smoke test everything seems to work (just as @xavi7th suggested). I also doubt if babel-loader has to be configured within the plugin as the rules defined within the plugin will be merged with the rules defined by mix or other plugins (referring to the mix docs) and svelte-loader itself doesn't need an extra babel-config.

This seems to be different with webPackConfig where the passed config object reference will be "enriched" within the method. So mainFields, extensions and alias of the current mix webpack config`s resolve property will be changed directly. Therefore we should not "hard" set these values but combine/merge with potentially existing ones:

class Svelte {
    [...]
    webpackConfig(webpackConfig) {
        const {mainFields=[], extensions=[], alias={}} = webpackConfig.resolve;
        webpackConfig.resolve.mainFields = concatUnique(mainFields, [
            'svelte',
            'browser',
            'module',
            'main',
        ]);
        webpackConfig.resolve.extensions = concatUnique(extensions, ['.mjs', '.js', '.svelte']);
        webpackConfig.resolve.alias = { ...alias, svelte: path.resolve(
            'node_modules',
            'svelte'
        )};
    }
    [...]
}
function concatUnique(arr1, arr2){
    return Array.from(new Set([...arr1, ...arr2]));
}

Otherwise, if i.e. webpackConfig.resolve.alias is undefined the current code would also break, while webpackConfig.resolve.extensions/ webpackConfig.resolve.mainFields defined by mix or other plugins would be overwritten. I also got an additional error that pathwas not defined (had to require it before).

[Tschoatscho]

Just in case someone needs an immediate workaround and can't wait for the fixed version (I honestly don't intend to sabotage this wonderful project): You can circumvent the use of the plugin within webpack.mix.js:

const path = require("path");
const mix = require('laravel-mix');

function concatUnique(arr1, arr2) {
    return Array.from(new Set([...arr1, ...arr2]));
}

mix.override(origConfig => {
    const { resolve, module } = origConfig;
    const {mainFields = [], extensions=[], alias={}} = resolve;
    resolve.mainFields = concatUnique(
        mainFields,
        ['svelte', 'browser', 'module', 'main',]
    );
    resolve.extensions = concatUnique(
        extensions,
        ['.mjs', '.js', '.svelte']
    );
    resolve.alias = {
        ...alias,
        svelte: path.resolve('node_modules', 'svelte')
    };
    module.rules.push({
        test: /\.(html|svelte)$/,
        use: {
            loader: 'svelte-loader',
            options: {
                dev: !mix.inProduction()
            }
        }
    });
});
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */
mix
    .js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

[morpheus7CS]

Hey to all,

sorry, it has taken us a little longer than we hoped to clean this up. I'm just about to comment on the @greatislander's PR and then we can merge the changes and pack them up into a release.

Thanks again for your patience and hope it's not ruining your week in any way.

Kind regards, g

[morpheus7CS]

This should be fixed now, so I'm closing the issue.