babel / babel/babel-loader

Only one instance of babel-polyfill is allowed

Open
#850 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.