Can not use interpolation

[ecentinela]

Hi guys, congrats for the library.

I'm just integrating this library in a personal project and it works fine, except when I want to use message interpolation.

Describe the bug
An error is shown in the console when trying to use interpolation.
intl_messageformat__WEBPACK_IMPORTED_MODULE_3__ is not a constructor

Expected behavior
The text should be correctly shown.

Information about your project:

• Mac Catalina
• svelte-i18n 2.2.1
• webpack

Additional context
The error seems totally related with the configuration of this package with webpack, so, here you have my webpack config file.

const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const devtool = mode === 'development' ? 'source-map' : false;

module.exports = {
    mode,
    devtool,
    entry: {
        bundle: './src/main.js'
    },
    resolve: {
        alias: {
            svelte: path.resolve('node_modules', 'svelte')
        },
        extensions: ['.mjs', '.svelte', '.ts', '.js'],
        mainFields: ['svelte', 'browser', 'module', 'main'],
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.(svelte)$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        preprocess: require('svelte-preprocess')(
                            {
                                typescript: {
                                    transpileOnly: true
                                }
                            })
                    },
                },
            },
            {
                test: /\.(ts)$/,
                loader: 'ts-loader'
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                includePaths: [
                                    './src/theme',
                                    './node_modules',
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "/public"),
        compress: true,
        historyApiFallback: true,
    },
};

Hope you can help me.

Thanks!

[kaisermann]

Hey @ecentinela 😁 would you be able to provide a repro? A simple zip would help a lot!

[ecentinela]

Hi @kaisermann, I tried to do a small test project from my real project.

Hope it helps!

i18n.zip

[kaisermann]

Boy, that was a fun hard one. I was exporting the esm version of the library as a .mjs file instead of something like .esm.js. What I didn't know was that webpack would refuse to resolve any of the library's dependency as an esm module if they weren't a .mjs file as well. So it was actually mixing esm and cjs modules and messing everything up.

Just renamed i18n.mjs to i18n.esm.js 🤷‍♂. Should be fixed on v2.2.2 🎉