Changing or Updating file breaks the app

[mrosswog]

Hello, I am trying to customize our BigCommerce checkout by modifying parts of checkout-js. I want to change some HTML and CSS to make the page look the way we want to. Don't need to change any javascript functionality for now. I have the app installed on my mac, and my staging site is successfully showing my local file. Only problem is, whenever I make a change to any of the files, the checkout stops showing up and I see only a blank space under the checkout header. Can someone please point me in the right direction? Thanks in advance.

[animesh1987]

Hey @mrosswog can you give more details on the issue, if there are any errors in the console that might indicate what the issue might be. What's your development worlflow?

[mrosswog]

Hello and thanks for your response. I develop on my Mac with Sonoma 14.6.1, using terminal for command line, and BBEdit text file editor. Using node v20.15.0 (npm v9.0.0). I know I can accomplish our needs if I can move around some HTML code snippets and change some CSS classes etc. Whenever I make a change and save the file, I can see that checkout.js in the /build directory has updated, but the changes don't show in the browser. I noticed another thread here where the person mentioned the concept of integrity. I went into webpack.config.js and where I saw integrity=true, I changed it to false, and that seemed to have a positive effect on things. Not sure if this is something I need to research further, but if the app is checking it's scripts against an authentic version, I don't understand how this app can be customized. After changing integrity to false, However, my changes were not reliably immediately visible. I just restarted the development server today after taking a 24 break from the project, and I see that changes I made to the CSS yesterday are showing up now. Not sure if there is a cache running somewhere. I have a lot to learn here and need some pointers. Thanks in advance

[bc-peng]

We're going to have an update for this soon.

[bc-peng]

We’ve released a feature that allows you to bypass the integrity hash values in the local development environment.
You could get it by rebasing your code to the latest master.

[mrosswog]

Thank you. I started over by re-cloning the depository, running "npm ci", then running "npm run dev & npm run dev:server"

I am following the steps outlined in the below article, however it looks like the file system is different now.
https://medium.com/bigcommerce-developer-blog/bigcommerce-checkout-is-now-open-source-39e823bc5b3b

When I add some HTML to packages > core > src > app > checkout > checkout.tsx, the files reload in /build, and have new timestamps, however nothing is changing in the browser.

the HTML i entered is

Testing checkout-js

, directly before {this.renderContent()}

I am using Chrome to review my work.
I also tested it in Safari - Nothing shows up from the app. Only the header and logo at the top.
Same thing in FireFox - nothing showing up below the logo header area.

If you can help me understand what is going wrong, I would greatly appreciate it. Thanks again.

[mrosswog]

When I run npm ci, the results are daunting.

56 vulnerabilities (4 low, 22 moderate, 29 high, 1 critical)

I am running node 20.15.0 and npm 9.0.0

many of the fixes available through npm audit fix --force are "breaking changes". I assume I cannot apply these changes without causing further issues.

others have a fix available via npm audit fix

one has a status of critial and no fix available:

loader-utils <=1.4.1
Severity: critical
Prototype pollution in webpack loader-utils - GHSA-76p3-8jx3-jpfq
loader-utils is vulnerable to Regular Expression Denial of Service (ReDoS) via url variable - GHSA-3rfm-jhwj-7488
loader-utils is vulnerable to Regular Expression Denial of Service (ReDoS) - GHSA-hhq3-ff78-jv3g
No fix available
node_modules/webpack-inject-plugin/node_modules/loader-utils
webpack-inject-plugin *
Depends on vulnerable versions of loader-utils
node_modules/webpack-inject-plugin

I would appreciate any advice you have, Thank You.