Fresh Install with webpack error?

[gil--]

Version and operating system

Shopify CLI v2.0.1 Shopify Theme Lab v4.0.2 Mac OS 11.2.3 Big Sur Node v14.17.1

Description

I just found out about this project and ran a new theme setup but can't seem to run npm run start successfully. Not sure if I missed a step or maybe running an incompatible version of node or something else.

Hitting a webpack rules error:

Additional Details

``` checkout_promotions_theme|⇒ npm run start > shopify-theme-lab@4.0.2 start /Users/gil/Sites/StoreRecon/checkout_promotions_theme > run-p -sr shopify:serve webpack:watch [webpack-cli] Failed to load '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.dev.js' config [webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack: - /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/pluginWebpack5.js - /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/plugin.js - /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/index.js - /Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.common.js - /Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.dev.js - /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/lib/webpack-cli.js - /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/lib/bootstrap.js - /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/bin/cli.js - /Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack/bin/webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.Module._load (internal/modules/cjs/loader.js:746:27) at Module.require (internal/modules/cjs/loader.js:974:19) at require (/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/v8-compile-cache/v8-compile-cache.js:159:20) at Object. (/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/pluginWebpack5.js:9:42) at Module._compile (/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/v8-compile-cache/v8-compile-cache.js:192:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:14) at Module.require (internal/modules/cjs/loader.js:974:19) { code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/pluginWebpack5.js', '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/plugin.js', '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/vue-loader/dist/index.js', '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.common.js', '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/.config/webpack/webpack.dev.js', '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/lib/webpack-cli.js', '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/lib/bootstrap.js', '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack-cli/bin/cli.js', '/Users/gil/Sites/StoreRecon/checkout_promotions_theme/node_modules/webpack/bin/webpack.js' ] } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! shopify-theme-lab@4.0.2 start: `run-p -sr shopify:serve webpack:watch` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the shopify-theme-lab@4.0.2 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/gil/.npm/_logs/2021-07-16T18_36_47_147Z-debug.log ```

Steps to reproduce

1. shopify theme init -u https://github.com/uicrooks/shopify-theme-lab
2. npm install
3. npm run start

Some basic googling hinted at https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes VueLoaderPlugin but not seeing anything too crazy

Same error happens when using the foundation theme, shopify theme init -u https://github.com/uicrooks/shopify-foundation-theme

[sergejcodes]

Hi 👋,

I tracked down the issue. It's because of the latest minor release of webpack version 5.45.0. Which was released a couple hours ago.

They are aware of the issue

A temporary fix for this is to lock the webpack version to 5.44.0:

Inside package.json you can write "webpack": "5.44.0" instead of "webpack": "^5.44.0":

{
  "devDependencies": {
    ...
    "webpack": "5.44.0",
    ...
  }
}

Remove your node_modules directory and any lock files. Then reinstall all dependencies.

You can leave this issue open, I'll close it once a fix for webpack is released.

[sergejcodes]

Everything should work again. There was a new webpack patch release 5.45.1