Only one instance of babel-polyfill is allowed
- Dominant language
- JavaScript
- Stars
- 4.8k
- Forks
- 456
- Avg merge
- 9h 19m
- Merged PRs (30d)
- 2
Description
**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
}
]
]
}
```
Contributor guide
Research direction
Start with package.json, webpack.config.js, and .babelrc, then reproduce the browser error with the listed Webpack and Babel versions. Trace the generated bundle and dependency tree to determine where babel-polyfill is introduced despite the reported transform-runtime configuration. Done means the application builds and loads without the duplicate-polyfill error, with the relevant configuration or dependency cause documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, javascript, webpack
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100