简体   繁体   English

使用 svelte、babel 和 webpack 构建时如何解决“没有 new 就无法调用类构造函数”错误

[英]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.我正在尝试让 svelte、webpack 和 babel 协同工作。 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.这需要在使用 ES6 语法时与 IE11 兼容。

I get我得到

Class constructor I cannot be invoked without 'new'没有'new'就不能调用类构造函数

The pertinent parts of my webpack looks as follows我的 webpack 的相关部分如下所示

      {
            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 babel.config 如下

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 svelte 文件本身非常基础

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

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

UPDATE更新

I can get it to run by excluding transform-classes in babel config我可以通过在 babel 配置中排除转换类来运行它

exclude: ['transform-classes'],

However, this of course breaks IE11.但是,这当然会破坏 IE11。

Simply do this:只需这样做:

$ yarn remove webpack-cli && yarn add --dev webpack-cli $ 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.这将删除旧的 cli 版本,重新安装新版本并重新编译所有内容。 Problem solved问题解决了

You will need to update the webpack-cli and html-webpack-plugin versions in your package.json:您需要更新 package.json 中的 webpack-cli 和 html-webpack-plugin 版本:

"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然后,删除您的 node_modules 和 package-lock.json 文件并运行新的 npm install

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Polymer 3 + webpack + babel 类构造函数PolymerElement 不能在没有&#39;new&#39;的情况下被调用 - Polymer 3 + webpack + babel Class constructor PolymerElement cannot be invoked without 'new' 没有&#39;new&#39;就无法调用ES6 / Babel Class构造函数 - ES6/Babel Class constructor cannot be invoked without 'new' 将5个续集5个,Babel 7个7个:TypeError:类构造函数Model必须在没有&#39;new&#39;的情况下才能调用 - Sequelize five 5, Babel seven 7: TypeError: Class constructor Model cannot be invoked without 'new' 错误TypeError:如果没有在Ionic 4中使用“ new”,则无法调用类构造函数EventEmitter - ERROR TypeError: Class constructor EventEmitter cannot be invoked without 'new' in Ionic 4 尝试发布NPM时,“没有&#39;new&#39;不能调用类构造函数” - “Class constructor cannot be invoked without 'new'” when trying to NPM publish 没有&#39;new&#39;就不能调用类构造函数PolymerElement - Class constructor PolymerElement cannot be invoked without 'new' 没有&#39;new&#39;就不能调用类构造函数 - Class constructor cannot be invoked without 'new' 如果没有“ new”,则不能调用类构造函数BaseService - Class constructor BaseService cannot be invoked without 'new' 没有new就不能调用类构造函数 - Class constructor cannot be invoked without new 如何使用call()进行继承。错误:没有'new'就无法调用类构造函数 - How to use call() for inheritance. Error: Class constructor cannot be invoked without 'new'
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM