Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to Gatsby WordPress source and gatsby ^v3 #77

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

imranhsayed
Copy link
Owner

@imranhsayed imranhsayed commented Jul 1, 2021

  • 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.

Mini css extract plugin Issues

new MiniCssExtractPlugin({
  ignoreOrder: true,
}),
  • Fix the build issue
    image

@vercel
Copy link

vercel bot commented Jul 1, 2021

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
Copy link

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
main_full

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
Copy link

pimftw commented Dec 20, 2021

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)
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants