Since update to 3.3.4 my own app does not build correctly anymore and Flatpickr is inserted as argument to my app

[jbirtel]

Hi all, I have a weird issue and it took me some time to figure out, that this comes from the update from version <=3.3.2 to version 3.3.4.

My bundle.js is created with rollup. Everything worked perfectly fine and my bundle.js looked somewhat like this:

var app = (function () {
    'use strict';

    function noop$1() { }
    const identity = x => x;
    function assign(tar, src) {
        // @ts-ignore
        for (const k in src)
            tar[k] = src[k];
        return tar;
    }
.... // this goes on and on and on

    let app;
    requireI18n(() => {
        app = new App({
            target: document.body,
        });
    });

    var app$1 = app;

    return app$1;

})();
//# sourceMappingURL=bundle.js.map

However, I now want to update to Svelte v4 and therefore updated to version 3.3.4, because you provide support for Svelte there. The problem that I than have is that my bundle.js is still built, but the Flatpickr kind of wrapps around my app/is inserted as argument to my app function:

var app = (function (Flatpickr) {
    'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var Flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(Flatpickr);

    function noop$1() { }
    const identity = x => x;
    function assign(tar, src) {
        // @ts-ignore
        for (const k in src)
            tar[k] = src[k];
        return tar;
    }
....// this goes on and on and on

let app;
    requireI18n(() => {
        app = new App({
            target: document.body,
        });
    });

    var app$1 = app;

    return app$1;

})(Flatpickr);
//# sourceMappingURL=bundle.js.map

This results in my app not working anymore (I will only see a white screen) and a hint showing up:

(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
svelte-flatpickr/src/Flatpickr.svelte (guessing 'Flatpickr')

Maybe someone of you has an idea, what exactly causes the issue (it must be something in the commits for version 3.3.4) and how to solve it, such that I can still build my app also with Svelte v4?

Cheers, Jonas

[jacobmischka]

I don't think Flatpickr should be an external module, you likely want it to import and bundle it. Can you post your rollup config?

[jacobmischka]

Essentially, I think your https://github.com/sveltejs/rollup-plugin-svelte config isn't quite right. Before by default you were getting the compiled javascript, but you really want to be importing the uncompiled svelte and compiling it yourself along with the rest of your svelte app.

I think you're missing something like this:

    resolve({
      browser: true,
      exportConditions: ['svelte'],
      extensions: ['.svelte']
    })

Please change your rollup config to closely mirror the example config in that README and try again.

[jbirtel]

I don't think Flatpickr should be an external module, you likely want it to import and bundle it. Can you post your rollup config?

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import terser from '@rollup/plugin-terser'
import css from 'rollup-plugin-css-only';
import dev from 'rollup-plugin-dev';
import sveltePreProcess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";
import {babel} from '@rollup/plugin-babel';
import replace from '@rollup/plugin-replace';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: ['src/main.js'],
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: '../resources/assets/svelte/build/bundle.js'
    },
    plugins: [
        svelte({
            preprocess: sveltePreProcess({
                sourceMap: !production
            }),
            emitCss: true,
            compilerOptions: {
                // enable run-time checks when not in production
                dev: !production,
                // we'll extract any component CSS out into
                // a separate file — better for performance
                css: 'external',
                cssOutputFilename: '../resources/assets/svelte/build/bundle.css',
            },
            onwarn: (warning, handler) => {
                const { code, frame } = warning;
                if (code === "css-unused-selector")
                    return;

                handler(warning);
            },
        }),
        typescript({
            sourceMap: !production,
            inlineSources: !production,
            compilerOptions: {
                types: ['node'],
            }
        }),
        // we'll extract any component CSS out into
        // a separate file - better for performance
        css({output: 'bundle.css'}),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: ['svelte'],
            //extensions: ['.svelte'],
            //exportConditions: ['svelte']
        }),
        // set prevent assignment manually because as the next major version
        // will default this option to true
        replace({
            'process.env.NODE_ENV': JSON.stringify('production'),
            preventAssignment: false,
        }),
        // OR development config
        replace({
            'process.env.NODE_ENV': JSON.stringify('development'),
            preventAssignment: false,
        }),
        commonjs(),

        production && babel({
            babelHelpers: 'runtime',
            extensions: [".js", ".mjs", ".html", ".svelte", ".ts"],
            exclude: ["node_modules/@babel/**"],
            presets: [
                [
                    "@babel/preset-env",
                    {
                        targets: "> 0.25%, not dead",
                    },
                ],
            ],
            plugins: [
                "@babel/plugin-syntax-dynamic-import",
                [
                    "@babel/plugin-transform-runtime",
                    {
                        useESModules: true,
                    },
                ],
            ],
        }),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('../resources'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

I tried adding the extensions as you suggested, but that didn't work. Instead, I am getting an additional error that 3 dependecies are unresolved PLUS the same dependencies still as missing global variable names as before.

[jacobmischka]

You definitely want the extensions and exportConditions if you're using these plugins.

You might be able to change your import to svelte-flatpickr/src/Flatpickr.svelte manually instead, but I think there is a larger problem with your config.

[jbirtel]

Thanks for your answer, I was in holidays and I just had a look at this now again. Could the index.js file like in this section be something that could fix the problem or is this a totally different thing?