outros undefined when including svelte libraries

[JoshuaCrewe]

I am not sure if this is where the source of the issue lies, or if it is with Laravel Mix or Svelte or somewhere else.

I think it might be related to this svelte issue or perhaps this one.

I have a REPL which works fine

https://svelte.dev/repl/d4d0fe54528644b2b5d47f62c2535389?version=3.20.1

If I use that same code in my app which uses laravel mix and this mix extension I get an error.

TypeError: outros is undefined

To be clear :

1. Load the page with the REPL code in it
2. Do a search (it doesn't really matter what for)
3. The result is a Svelte Select element for each result
4. Use one of the select elements
5. Do another search

Using Laravel Mix Svelte I get the above error after step 5.

For completeness this is my webpack.mix.js

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

mix.webpackConfig({
    devtool: 'source-map',
    resolve: {
        // mainFields: ['svelte'],
        extensions: ['.mjs', '.js', '.svelte'],
        alias: {
            Utilities: path.resolve(
                __dirname,
                'public/content/themes/project/assets/src/js/utilities'
            ),
            Components: path.resolve(
                __dirname,
                'public/content/themes/project/modules/components'
            ),
            svelte: path.resolve('node_modules', 'svelte'),
        },
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                loader: 'import-glob-loader',
            },
            {
                test: /\.js$/,
                loader: 'import-glob-loader',
            },
            {
                test: /node_modules\/(micromodal)\/.+\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: mix.config.babel(),
                    },
                ],
            },
        ],
    },
});

mix.options({
    publicPath: 'public',
    fileLoaderDirs: {
        fonts: 'content/themes/project/assets/dist/fonts',
        images: 'content/themes/project/assets/dist/img',
    },
    notifications: {
        onSuccess: false,
        onFailure: true,
    },
});

let assetsBase = 'public/content/themes/project/assets/';

mix.js(assetsBase + 'src/js/app.js', assetsBase + 'dist/js/')
    .svelte({
        dev: true,
    })
    .sourceMaps();
mix.js(
    'public/content/themes/project/modules/blocks/blocks.js',
    assetsBase + 'dist/js/'
).sourceMaps();

mix.sass(assetsBase + 'src/sass/app.scss', assetsBase + 'dist/css')
    .options({
        postCss: [require('postcss-preset-env')()],
    })
    .sourceMaps();

mix.sass(
    'public/content/themes/project/assets/src/sass/editor-styles.scss',
    assetsBase + 'dist/css/blocks.editor.css'
)
    .options({
        postCss: [require('postcss-preset-env')()],
    })
    .sourceMaps();

// Create a sprite sheet based on a folder of SVGs
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
mix.webpackConfig({
    plugins: [
        new SVGSpritemapPlugin(
            'public/content/themes/project/assets/src/icons/**/*.svg',
            {
                output: {
                    filename:
                        'content/themes/project/assets/dist/icons/sprite.svg.php',
                    chunk: {
                        name:
                            'content/themes/project/assets/dist/icons/spritemap',
                    },
                },
                sprite: {
                    prefix: 'icon--',
                    generate: {
                        title: false,
                    },
                },
            }
        ),
    ],
});

I have been trying to figure out where this error has come from for a while so now I am casting wide for an answer.

[JoshuaCrewe]

I did a repo which shows the bug happening (at least on my computer).

https://github.com/JoshuaCrewe/svelte-outros-bug

The webpack.mix.js on this one is super minimal so it should rule out what I was doing in the more complicated app one. I would like to say that this means the error is either with Laravel Mix or with this extension ?!

I am going to make a coffee now.

[JoshuaCrewe]

I also set up the same code using the webpack template from Sveltejs and I do not get the error using that build process.

Sorry for the spam comments.

[morpheus7CS]

Hey @JoshuaCrewe,

actually I am interested if we missed something while doing the webpack template and sticking to the Svelte official webpack config is what we strive to do.

Can you comment on what you would like added and I'll take a look sometime this week? We are also open to PRs.

Kind regards,
g

[JoshuaCrewe]

Hi @morpheus7CS,

It has taken me a full day to work out that it is a comilation error and not an error in my code or with Svelte. I have been banging my head against a wall over it.

Knowing that there is something to find is half the battle I suppose. One of the reasons I use Laravel Mix is becuase webpack is a pain to configure so I really don't know much about it. I was hoping you would know where to look.

I do have plans to compare the webpack template and this extension to see if I can find where the issue is. I had a look at the source here but it was a bit beyond me. What I am really struggling with is connecting what the error in the browser console is, with the compilation steps.

If I get anywhere I will open a PR for sure. Any insight greatly appreciated on this one though.

Thanks for the response!

[JoshuaCrewe]

It is this :

  resolve: {
    alias: {
      svelte: path.resolve("node_modules", "svelte")
    },
    extensions: [".mjs", ".js", ".svelte"],
    mainFields: ["svelte", "browser", "module", "main"]
  }

If I add this in my reduced case scenario then it works in Laravel Mix land. If I do it in my app then it breaks other dependencies ...

I remember going down this route from one of the other issues I found but the mainFields array didn't have all those options in it so other things broke. I must have misunderstood what I was doing.

While this would work as extra config in webpack.mix.js I think it might be neat if it was taken care of in this extension if there are no side effects. I will have a look at a PR.

[JoshuaCrewe]

@morpheus7CS I am having trouble coming up with a PR becuase I am having trouble linking this module in a project. I thought I could clone my fork, yarn link and then yarn link laravel-mix-svelte in my test project. I get an error saying that it can't find laravel-mix in this module.

Do you have any tips for developing this module ?

[morpheus7CS]

Nicely done @JoshuaCrewe! Thanks for contributing.

Kind regards,
g