Function.prototype.toString issues in IE11 Svelte/Babel/Rollup

Question

My current rollup.config.js is

    commonjs(),
    babel({
                extensions: ['.js', '.mjs', '.html', '.svelte'],
                runtimeHelpers: true,
                exclude: ['node_modules/@babel/**', 'node_modules/core-js/**' ], // <= /!\ NOT 'node_mobules/**'
                presets: [
                    ['@babel/preset-env', {
                    // adapter to ensure IE 11 support
                    targets: '> 0.25%, not dead, IE 11',
                    "modules": false,
                    "spec": true,
                    "forceAllTransforms": true,
                    useBuiltIns: 'usage',
                    corejs: 3
                    }]
                ],
                plugins: [
                    '@babel/plugin-syntax-dynamic-import',
                    [
                        '@babel/plugin-transform-runtime',
                        {
                            useESModules: true
                        }
                    ]
                ]
              })

Getting issue in IE11:

Function.prototype.toString: "this" is not a Function object

How to correctly fix that issue?

I have tried to

• import webcomponents into my main.js:

  import 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js';

  But this file is not being imported:

  Unresolved dependencies https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js (imported by src\\main.js)

This means i have to config resolve-plugin but it seems to be incorrect way because it is marked as non-used then.

Answer 1

Correctly working rollup.config

commonjs(),
babel({
    extensions: ['.js', '.mjs', '.html', '.svelte'],
    runtimeHelpers: true,
    exclude: ['node_modules/@babel/**', 'node_modules/core-js/**' ], 
    presets: [
        ['@babel/preset-env', {
        targets: {
            browsers: [
                "> 0.25%"
                ,"not dead"
                ,"IE 11"
            ]
        },
        "modules": false,
        "spec": true,
        "forceAllTransforms": true,
        useBuiltIns: 'usage',
        corejs: 3
        }]
    ],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        [
            '@babel/plugin-transform-runtime',
            {
                useESModules: true
            }
        ]
    ]
}),
polyfill(['@webcomponents/webcomponentsjs'])

the polyfill one is rollup-plugin-polyfill