Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Only one instance of babel-polyfill is allowed #850

Open
devmargooo opened this issue Jun 7, 2020 · 2 comments
Open

Only one instance of babel-polyfill is allowed #850

devmargooo opened this issue Jun 7, 2020 · 2 comments

Comments

@devmargooo
Copy link

devmargooo commented Jun 7, 2020

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
            }
        ]
    ]
}
@nicolo-ribaudo
Copy link
Member

Something is loading babel-polyfill: could you try running npx nls why babel-polyfill to check what?
Also, maybe you could try checking your bundle and try to understand why babel-polyfill is there.

@devmargooo
Copy link
Author

I run npx nls why babel-polyfill in my project folder, result is No one requires.
Also I don't see babel-polyfill folder in my node_modules folder.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants