简体   繁体   中英

How to resolve 'class constructor cannot be invoked without new' error when building with svelte, babel, and webpack

I'm trying to get svelte, webpack, and babel to work together. I am producing the minified bundle, however, this bundle is throwing errors upon loading it up in the browser. This needs to be compatible with IE11 while using ES6 syntax.

I get

Class constructor I cannot be invoked without 'new'

The pertinent parts of my webpack looks as follows

      {
            test: /\.(js|jsx|mjs|svelte)?$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        configFile: path.resolve(__dirname, 'babel.config.js')
                    }
                }
            ]
        },
        {
            test: /\.svelte$/,
            exclude: /node_modules/,
            use: {
                loader: "svelte-loader",
                options: {
                    emitCss: false, 
                    hotReload: false
                },
            },
        },

babel.config is as follows

module.exports = {
plugins: [
    '@babel/plugin-proposal-class-properties',
    'angularjs-annotate',
    'lodash'
],
presets: [
    ['@babel/preset-env', {
        useBuiltIns: 'usage',
        corejs: { version: 3, proposals: true }
    }],
    '@babel/preset-react'
    ]
};

The svelte file itself is pretty basic

<script>
    export let name = "World";
</script>

<h1>Hello {name}!</h1>

UPDATE

I can get it to run by excluding transform-classes in babel config

exclude: ['transform-classes'],

However, this of course breaks IE11.

Simply do this:

$ yarn remove webpack-cli && yarn add --dev webpack-cli

This will remove the old cli version, re-install the new one and compile everything afresh. Problem solved

You will need to update the webpack-cli and html-webpack-plugin versions in your package.json:

"webpack-cli": "^4.5.0",

"html-webpack-plugin": "^5.1.0",

Then, delete your node_modules and package-lock.json files and run a new npm install

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM