stencil-cli icon indicating copy to clipboard operation
stencil-cli copied to clipboard

Bundle error in version 4.1.0

Open spire-mike opened this issue 2 years ago • 1 comments

I am receiving an error during the bundling process ever since 4.1.0 was released. Nothing has change in my theme files, so I am having trouble figuring out what is causing the issue. Here is the error I'm receiving on version 4.1.0.

2022-05-09T13:53:16.9329481Z Upcoming request GET: ***/admin/oauth/info
2022-05-09T13:53:17.2433511Z Upcoming request GET: https://api.bigcommerce.com/stores/6p8lmnk/v3/themes
2022-05-09T13:53:17.7015524Z Validating theme...
2022-05-09T13:53:17.8431530Z /opt/hostedtoolcache/node/12.22.12/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:488
2022-05-09T13:53:17.8432254Z         throw new Error(`Couldn't find file for this statement: ${result[0]}`.red);
2022-05-09T13:53:17.8432712Z               ^
2022-05-09T13:53:17.8432941Z 
2022-05-09T13:53:17.8433587Z Error: Couldn't find file for this statement: {{stylesheet '/assets/dist/checkout.css'}}
2022-05-09T13:53:17.8434609Z     at BundleValidator.tryToResolveCssFileLocation (/opt/hostedtoolcache/node/12.22.12/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:488:15)
2022-05-09T13:53:17.8435605Z     at BundleValidator.getCssFiles (/opt/hostedtoolcache/node/12.22.12/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:456:39)
2022-05-09T13:53:17.8436583Z     at async BundleValidator._validateCssFiles (/opt/hostedtoolcache/node/12.22.12/x64/lib/node_modules/@bigcommerce/stencil-cli/lib/bundle-validator.js:414:26)
2022-05-09T13:53:17.8561699Z ##[error]Process completed with exit code 1.

As soon as I fix my stencil version to 3.13.0 the issue goes way. I noticed some skipped tests related to BundleValidator in the 4.1.0 release. Could that have something to do with this error?

Here is a possibly relevant part of my codebase. In my templates/layout/base.html file:

{{#if page_type '==' 'checkout'}}
	<link rel="preload" href="{{cdn 'assets/dist/checkout.css'}}" as="style">
	<link rel="preload" href="{{cdn 'assets/dist/theme-bundle.checkout.js'}}" as="script">
	{{{stylesheet '/assets/dist/checkout.css'}}}
{{else if page_type '==' 'orderconfirmation'}}
	<link rel="preload" href="{{cdn 'assets/dist/checkout.css'}}" as="style">
	<link rel="preload" href="{{cdn 'assets/dist/theme-bundle.checkout.js'}}" as="script">
	{{{stylesheet '/assets/dist/checkout.css'}}}
{{endif}}

This has worked for years without issue until 4.1.0 stencil release. Any idea what's going on?

Environment

Stencil-cli version stencil --version: 4.1.0

Node version node -v: 12.22.12

NPM version npm -v:

OS: Ubunut 20.04.4 LTS

spire-mike avatar May 09 '22 14:05 spire-mike

Hi @spire-mike, sorry to hear that! While fix is not released yet, I can recommend you moving css files into /assets/scss folder. I think the example how css files are stored in the theme was taken from our Cornerstone theme

jairo-bc avatar May 10 '22 16:05 jairo-bc