Upgrade to Gatsby WordPress source and gatsby ^v3

[imranhsayed]

• Upgrades from gatsby-source-wordpress-experimental to gatsby-source-wordpress
• Upgrades Gatsby from v2 to v3
• Upgrades the npm packages to the latest one.
• Upgrades the dependency WP plugins to the latest ones.

• @todo:

• Fix the chunk issue in development - Conflicting order issue
  

Mini css extract plugin Issues

• CSS Problem after build, but not in development' environment. (chunk styles [mini-css-extract-plugin] Conflicting order.) gatsbyjs/gatsby#26486

• New version 0.4.2 capture lot of warnings webpack/mini-css-extract-plugin#250 (comment)

• New version 0.4.2 capture lot of warnings webpack/mini-css-extract-plugin#250

• You can check to see what is using it by running yarn why mini-css-extract-plugin

• Possible solution to be tested, update the MiniCSSExtract plugin config in gatsby-node.js, as custom config

new MiniCssExtractPlugin({
  ignoreOrder: true,
}),

• Fix the build issue
  

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/imranhsayed/gatsby-woocommerce-themes/9pPAoLENuZVuUJFVFq1HqQXDC8qn
✅ Preview: Failed

[Deployment for f49a6c3 failed]

[sktripamer]

Regarding the javascript bundle failure error using css-minimizer-webpack-plugin:

I've found a temporary inelegant workaround to build by changing line 620 section in \node_modules\gatsby\dist\utils\webpack.config.js

config.optimization = {
runtimeChunk: {
name: webpack-runtime
}//,
// splitChunks ,
// minimizer: [// TODO: maybe this option should be noMinimize?
// !program.noUglify && plugins.minifyJs(program.profile ? {
// terserOptions: {
// keep_classnames: true,
// keep_fnames: true
// }
// } : {}), plugins.minifyCss()].filter(Boolean)
};
}

Comment out as seen above, and you'll get past that error.

Then you should get errors about window not being defined - to get around these, go into each of the files where the error is appearing, and change the undefined !== window to typeof window !== "undefined";

For example, change

if (undefined !== window)

to

const isBrowser = typeof window !== "undefined";
if (isBrowser)

End result - a seemingly working build

Not a fix at all, but a temporary workaround for those who want to keep developing and be able to build and publish if necessary.

Wasn't able to figure out exactly why the build was breaking with that library, so maybe someone else can jump in and get a proper fix going.

[pimftw]

By adjusting the onCreateWebpackConfig /packages/gatsby-woocommerce-theme/gatsby-node.js you will be able to suppress the warning.

/**
 * Since the node_modules ( packages ) live outside the theme directory, making an alias for them.
 *
 * So Gutenberg styles can be accessed like so `@import "~@wordpress/base-styles/colors"`
 *
 * @param stage
 * @param actions
 */
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
	actions.setWebpackConfig({
		resolve: {
			alias: {
				'~': path.resolve(__dirname, '../../node_modules')
			}
		},
	});
	const config = getConfig()
	const miniCssExtractPlugin = config.plugins.find(
		(plugin) => plugin.constructor.name === 'MiniCssExtractPlugin'
	)
	if (miniCssExtractPlugin) {
		miniCssExtractPlugin.options.ignoreOrder = true
	}
	actions.replaceWebpackConfig(config)
};