Lỗi uncaught error only one instance of babel-polyfill is allowed

After adding genomelink node module to my app and I have this error. Please recommend a way to fix this. Thank you.

yarn run v1.3.2 $ nodemon app.js --exec babel-node [nodemon] 1.11.0 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `babel-node app.js` /home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1 (function (exports, require, module, __filename, __dirname) { !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("isomorphic-fetch")):"function"==typeof define&&define.amd?define("genomelink-node",["isomorphic-fetch"],n):"object"==typeof exports?exports["genomelink-node"]=n(require("isomorphic-fetch")):t["genomelink-node"]=n(t["isomorphic-fetch"])}(this,function(t){return function(t){function n(e){if(r[e])return r[e].exports;var i=r[e]={i:e,l:!1,exports:{}};return t[e].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var r={};return n.m=t,n.c=r,n.d=function(t,r,e){n.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:e})},n.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(r,"a",r),r},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=126)}([function(t,n,r){var e=r(2),i=r(21),o=r(12),u=r(13),c

Error: only one instance of babel-polyfill is allowed at Object. (/home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1:41109) at Object. (/home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1:41566) at n (/home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1:452) at Object. (/home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1:40918) at n (/home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1:452) at /home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1:809 at /home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1:820 at r (/home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1:81) at Object. (/home/vincent/my-genome-link/node_modules/genomelink-node/lib/genomelink-node.min.js:1:328) at Module._compile (module.js:635:30)

Comments are closed.

On a site with a theme that uses webpack and babel (with no issue), once Oasis Workflow is activated an error is thrown in the console

Uncaught Error: only one instance of babel-polyfill is allowed

Is it possible to compile Oasis Workflow in a way so that it doesn’t re-initiate babel-polyfill if it is already initiated?

I'm submitting a bug report

Webpack Version: 4.43.0

Babel Core Version: 7.9.6

Babel Loader Version: 8.1.0

Please tell us about your environment: Windows 10

Current behavior: I have console error with message "VM2118 content.js:9 Uncaught Error: only one instance of babel-polyfill is allowed at Object. (VM1806 content.js:9) at Object. (VM1806 content.js:9) at r (VM1806 content.js:1) at Object. (VM1806 content.js:10) at r (VM1806 content.js:1) at VM1806 content.js:1 at VM1806 content.js:1" on every page in my application. Actually I don't use babel-polyfill, I use @babel/plugin-transform-runtime instead.

Expected/desired behavior: I haven't console error

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

package.json:

{
  "version": "1.0.0",
  "name": "app",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/plugin-transform-runtime": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "@babel/runtime": "^7.9.6",
    "@storybook/addon-cssresources": "^5.3.19",
    "@storybook/react": "^5.3.18",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.0.0",
    "install": "^0.12.2",
    "npm": "^6.14.5",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@aspnet/signalr": "^1.0.3",
    "bootstrap": "4.3.1",
    "bootstrap-table": "^1.15.5",
    "classnames": "^2.2.6",
    "jquery": "^3.4.1",
    "jquery-toast-plugin": "^1.3.2",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.10",
    "popper.js": "^1.14.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-paginate": "^6.3.2",
    "tinymce": "5.0.0",
    "underscore": "1.9.1"
  },
  "scripts": {
    "dev": "webpack --mode development",
    "watch": "webpack --mode development --watch",
    "production": "webpack --mode production",
    "storybook": "start-storybook"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "dev"
    ]
  }
}

webpack.config.js

"use strict";
{
    let path = require('path');
    const webpack = require('webpack'); 
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const bundleFolder = "wwwroot/bundle/";
    const siteCssPlugin = new ExtractTextPlugin({ filename:  'style.css' });
    const reactCssPlugin = new ExtractTextPlugin({ filename:  'rstyle.css', allChunks: true });
    module.exports = {
        entry: "./Scripts/js/site.js",
        output: {
            filename: 'script.js',
            path: path.resolve(__dirname, bundleFolder),
            libraryTarget: 'var',
            library: 'bslib'
        },
        devtool: 'inline-source-map',
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: ["/node_modules/"],
                    use: [
                      {
                        loader: "babel-loader"
                      },
                    ],
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    use: [{
                        loader: 'file-loader', options: {esModule: false}
                    }]
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    use: [{
                        loader: 'file-loader', options: {esModule: false}
                    }]
                },
                {
                    test: /\.css$/,
                    exclude: [
                        path.resolve(__dirname, "React")
                    ],
                    use: siteCssPlugin.extract(
                        {
                            fallback: 'style-loader',
                            use: ['css-loader']
                        })
                },
                {
                    test: /\.css$/,
                    include: [
                        path.resolve(__dirname, "React")
                    ],
                    use: reactCssPlugin.extract(
                        {
                            fallback: 'style-loader',
                            use: ['css-loader?modules,localIdentName="[name]-[local]-[hash:base64:6]"']
                        })
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin([bundleFolder]),
            siteCssPlugin,
            reactCssPlugin,
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                signalR: "@aspnet/signalr"    
            })
        ],
    };
}

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        ["@babel/plugin-transform-runtime",
            {
                "regenerator": true
            }
        ]
    ]
}