Scripts: Add missing fallback for target in webpack 5 config (#34112)

* Scripts: Add missing fallback for target in webpack 5 config * Add changelog entry
WordPress · Aug 18, 2021 · f2797ad · f2797ad
1 parent fe2de42
commit f2797ad
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
@@ -24,6 +24,10 @@
 -   The bundled `@svgr/webpack` dependency has been updated from requiring `^5.2.0` to requiring `^5.5.0` ([#33818](https://github.com/WordPress/gutenberg/pull/33818)).
 -   The bundled `webpack-bundle-analyzer` dependency has been updated from requiring `^4.2.0` to requiring `^4.4.2` ([#33818](https://github.com/WordPress/gutenberg/pull/33818)).
 
+### Bug Fixes
+
+-   Add missing fallback for target in webpack 5 config ([#34112](https://github.com/WordPress/gutenberg/pull/34112)),
+
 ## 17.1.0 (2021-07-29)
 
 ### Enhancements

diff --git a/packages/scripts/config/.browserslistrc b/packages/scripts/config/.browserslistrc
@@ -0,0 +1 @@
+extends @wordpress/browserslist-config
diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
@@ -6,6 +6,7 @@ const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
+const browserslist = require( 'browserslist' );
 const path = require( 'path' );
 
 /**
@@ -18,13 +19,18 @@ const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
  * Internal dependencies
  */
 const {
+	fromConfigRoot,
 	hasBabelConfig,
 	hasCssnanoConfig,
 	hasPostCSSConfig,
 } = require( '../utils' );
 
 const isProduction = process.env.NODE_ENV === 'production';
 const mode = isProduction ? 'production' : 'development';
+let target = 'browserslist';
+if ( ! browserslist.findConfig( '.' ) ) {
+	target += ':' + fromConfigRoot( '.browserslistrc' );
+}
 
 const cssLoaders = [
 	{
@@ -81,7 +87,7 @@ const getLiveReloadPort = ( inputPort ) => {
 
 const config = {
 	mode,
-	target: 'browserslist',
+	target,
 	entry: {
 		index: path.resolve( process.cwd(), 'src', 'index.js' ),
 	},

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -34,6 +34,7 @@
 	"dependencies": {
 		"@svgr/webpack": "^5.5.0",
 		"@wordpress/babel-preset-default": "file:../babel-preset-default",
+		"@wordpress/browserslist-config": "file:../browserslist-config",
 		"@wordpress/dependency-extraction-webpack-plugin": "file:../dependency-extraction-webpack-plugin",
 		"@wordpress/eslint-plugin": "file:../eslint-plugin",
 		"@wordpress/jest-preset-default": "file:../jest-preset-default",
@@ -43,6 +44,7 @@
 		"@wordpress/stylelint-config": "file:../stylelint-config",
 		"babel-jest": "^26.6.3",
 		"babel-loader": "^8.2.2",
+		"browserslist": "^4.16.6",
 		"chalk": "^4.0.0",
 		"check-node-version": "^4.1.0",
 		"clean-webpack-plugin": "^3.0.0",