WRO-7582: Update storybook to 6.5 and webpack 5 (#33)

* WRO-614: Merge `feature/webpack5` branch (#30)

* WRN-12124: Remove deprecated babel-eslint module (#24)

* use @babel/eslint-parser

* Revert "use @babel/eslint-parser"

This reverts commit dfc9555.

* babel-eslint -> @babel/eslint-parser

* modify changelog

* Update package.json

Co-authored-by: Mikyung Kim <mikyung27.kim@lge.com>

* remove unused package

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

* revert shrinkwrap

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

Co-authored-by: Mikyung Kim <mikyung27.kim@lge.com>

* WRN-12748: Update eslint 8 related modules in tool repos (#25)

* update eslint 8

* Update package.json

Co-authored-by: Mikyung Kim <mikyung27.kim@lge.com>

* Update package.json

Co-authored-by: Mikyung Kim <mikyung27.kim@lge.com>

Co-authored-by: Mikyung Kim <mikyung27.kim@lge.com>

* added a changelog

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

* typo

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

Co-authored-by: taeyoung.hong <35059065+hong6316@users.noreply.github.com>

* WRO-614: Migrate to storybook 6.5 and webpack5 (#31)

* initial commit

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

* Migrate to webpack5

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

* update dependencies and changelog

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

* fix travis fail

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

* removed unnecessary change

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

* update dependencies

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

* WRO-7575: Fix ContextualPopup is not showing properly with webpack5 (#32)

Enact-DCO-1.0-Signed-off-by: Mikyung Kim (mikyung27.kim@lge.com)

Co-authored-by: taeyoung.hong <35059065+hong6316@users.noreply.github.com>

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
 	env: {
 		node: true
 	},
-	extends: ['enact/strict', 'plugin:prettier/recommended', 'prettier/babel', 'prettier/react'],
+	extends: ['enact/strict', 'plugin:prettier/recommended', 'prettier'],
 	plugins: ['import'],
 	rules: {
 		'react/forbid-foreign-prop-types': 'off', // proptypes not removed in storybook config

.travis.yml

@@ -1,7 +1,7 @@
 dist: focal
 language: node_js
 node_js:
-    - node 
+    - node
 sudo: false
 install:
     - npm config set prefer-offline false

CHANGELOG.md

@@ -1,3 +1,8 @@
+## unreleased
+
+* Migrated to storybook 6.5 and webpack 5.
+* Updated `eslint` related dependencies.
+
 ## 4.2.0 (June 7, 2022)
 
 * Added `color` type control.

configs/webpack.js

@@ -1,12 +1,14 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const getLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const {DefinePlugin} = require('webpack');
 const {optionParser: app, GracefulFsPlugin, ILibPlugin, WebOSMetaPlugin} = require('@enact/dev-utils');
 
 module.exports = function (config, mode, dirname) {
 	const isProduction = mode === 'PRODUCTION';
 	const shouldUseSourceMap = (process.env.GENERATE_SOURCEMAP || 'true') !== 'false';
+	const publicPath = '';
 
 	app.setEnactTargetsAsDefault();
 
@@ -17,26 +19,31 @@ module.exports = function (config, mode, dirname) {
 				loader: require.resolve('css-loader'),
 				options: Object.assign(
 					{importLoaders: preProcessor ? 2 : 1, sourceMap: shouldUseSourceMap},
-					cssLoaderOptions,
-					cssLoaderOptions.modules && {modules: {getLocalIdent: getCSSModuleLocalIdent}}
+					cssLoaderOptions
 				)
 			},
 			{
 				loader: require.resolve('postcss-loader'),
 				options: {
 					postcssOptions: {
+						// Necessary for external CSS imports to work
+						// https://github.com/facebook/create-react-app/issues/2677
+						ident: 'postcss',
 						plugins: [
-							require('postcss-flexbugs-fixes'),
-							require('postcss-global-import'),
-							require('postcss-preset-env')({
-								autoprefixer: {
-									flexbox: 'no-2009',
-									remove: false
-								},
-								stage: 3,
-								features: {'custom-properties': false}
-							}),
-							require('postcss-normalize')(),
+							'postcss-flexbugs-fixes',
+							'postcss-global-import',
+							[
+								'postcss-preset-env',
+								{
+									autoprefixer: {
+										flexbox: 'no-2009',
+										remove: false
+									},
+									stage: 3,
+									features: {'custom-properties': false}
+								}
+							],
+							require('postcss-normalize'),
 							app.ri && require('postcss-resolution-independence')(app.ri)
 						].filter(Boolean)
 					},
@@ -61,25 +68,20 @@ module.exports = function (config, mode, dirname) {
 
 	// Modify stock Storybook config for Enact-tailored experience
 	config.devtool = shouldUseSourceMap && 'source-map';
+	config.output = Object.assign({}, config.output, {
+		assetModuleFilename: '[name][ext]'
+	});
 	config.resolve.modules = ['node_modules', path.resolve(app.context, 'node_modules')];
 	config.resolve.alias = Object.assign({}, config.resolve.alias, {
 		// coerce everything to use the ilib installed with the sampler
 		// since it is set as a peer dependency by the enact modules
 		ilib: path.resolve(app.context, 'node_modules/ilib')
 	});
-	config.devServer = {host: '0.0.0.0', port: 8080};
 	config.performance = false;
 
 	// Narrow rules into oneOf and add our custom rules first
 	config.module.rules = [{oneOf: config.module.rules}];
 	config.module.rules[0].oneOf.unshift(
-		{
-			test: /\.(jpe?g|gif|ico|png|svg|woff|ttf|wav|mp3|mp4|m4a|aac)$/,
-			loader: require.resolve('file-loader'),
-			options: {
-				name: '[path][name].[ext]'
-			}
-		},
 		{
 			test: /\.(js|mjs|jsx|ts|tsx)$/,
 			exclude: /node_modules.(?!@enact)/,
@@ -94,13 +96,21 @@ module.exports = function (config, mode, dirname) {
 		},
 		{
 			test: /\.module\.css$/,
-			use: getStyleLoaders({modules: true})
+			use: getStyleLoaders({
+				modules: {
+					getLocalIdent
+				}
+			})
 		},
 		{
 			test: /\.css$/,
 			// The `forceCSSModules` Enact build option can be set true to universally apply
 			// modular CSS support.
-			use: getStyleLoaders({modules: app.forceCSSModules}),
+			use: getStyleLoaders({
+				modules: {
+					...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
+				}
+			}),
 			// Don't consider CSS imports dead code even if the
 			// containing package claims to have no side effects.
 			// Remove this when webpack adds a warning or an error for this.
@@ -109,24 +119,27 @@ module.exports = function (config, mode, dirname) {
 		},
 		{
 			test: /\.module\.less$/,
-			use: getLessStyleLoaders({modules: true})
+			use: getLessStyleLoaders({
+				modules: {
+					getLocalIdent
+				}
+			})
 		},
 		{
 			test: /\.less$/,
-			use: getLessStyleLoaders({modules: app.forceCSSModules}),
+			use: getLessStyleLoaders({
+				modules: {
+					...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
+				}
+			}),
 			sideEffects: true
+		},
+		{
+			exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.ejs$/, /\.json$/],
+			type: 'asset/resource'
 		}
 	);
 
-	// File-loader catch-all for any remaining unhandled extensions
-	config.module.rules[0].oneOf.push({
-		loader: require.resolve('file-loader'),
-		exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.ejs$/, /\.json$/],
-		options: {
-			name: '[path][name].[ext]'
-		}
-	});
-
 	// Run `source-loader` on story files to show their source code
 	// automatically in `DocsPage` or the `Source` doc block.
 	config.module.rules.push({
@@ -146,17 +159,33 @@ module.exports = function (config, mode, dirname) {
 			'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development'),
 			'process.env.PUBLIC_URL': JSON.stringify('.')
 		}),
+		new NodePolyfillPlugin(),
 		new GracefulFsPlugin(),
-		new ILibPlugin(),
+		new ILibPlugin({publicPath}),
 		new WebOSMetaPlugin({path: path.join(dirname, 'webos-meta')})
 	);
+
 	if (!process.env.INLINE_STYLES) {
 		config.plugins.push(
 			new MiniCssExtractPlugin({
 				filename: '[name].css',
-				chunkFilename: 'chunk.[name].css'
+				chunkFilename: 'chunk.[name].css',
+				ignoreOrder: true
 			})
 		);
+
+		config.optimization = Object.assign({}, config.optimization, {
+			splitChunks: {
+				cacheGroups: {
+					styles: {
+						name: 'styles',
+						type: 'css/mini-extract',
+						chunks: 'all',
+						enforce: true
+					}
+				}
+			}
+		});
 	}
 
 	return config;