Local site is unstyled / style module not found

[beechnut]

Expected Behavior

Following the setup steps should result in a working, styled 18F site.

Actual Behavior

Following the setup steps results in a non-styled 18F site. NPM reports "module not found" errors, included below in Error log. I'm also seeing that it's overwriting the lockfileVersion from 2 to 1.

Steps to reproduce the behavior

With macOS 13.6.4 (Ventura), Ruby 2.3.2, npm 6.13.4, node 10.19.0:

• Follow the steps in local development
• Once the site is serving, visit http://0.0.0.0:4000/site

This issue is done when

• Visiting the local site shows a correctly styled site
• NPM version is specified (if important / relevant to the fix)

Error log:

→  ./serve

> [email protected] uswds-build /Users/username/code/not-project/18f.gsa.gov
> npm run uswds-copy-assets && npm run uswds-compile


> [email protected] uswds-copy-assets /Users/username/code/not-project/18f.gsa.gov
> npx gulp copyAssets

{ Error: Cannot find module 'csso/syntax'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/username/code/not-project/18f.gsa.gov/node_modules/postcss-csso/cjs/index.cjs:3:16)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] uswds-copy-assets: `npx gulp copyAssets`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] uswds-copy-assets 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/username/.npm/_logs/2024-04-11T17_52_30_340Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] uswds-build: `npm run uswds-copy-assets && npm run uswds-compile`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] uswds-build 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/username/.npm/_logs/2024-04-11T17_52_30_372Z-debug.log

> [email protected] uswds-watch /Users/username/code/not-project/18f.gsa.gov
> npx gulp watch

{ Error: Cannot find module 'csso/syntax'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/username/code/not-project/18f.gsa.gov/node_modules/postcss-csso/cjs/index.cjs:3:16)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] uswds-watch: `npx gulp watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] uswds-watch 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/username/.npm/_logs/2024-04-11T17_52_31_336Z-debug.log
⚠️   1

[beechnut]

Ok, after installing the latest Node (v 21.7.3) and NPM (10.5.2), the blog is styled correctly and no longer missing style files.

It looks like lockfileVersion 2 started with Node 7, so I'm guessing we have a minimum Node version that we're not specifying.

[adunkman]

For this ticket, we should specify the minimum node version needed for lockfileVersion 2, and close the issue until it reoccurs (assuming that is the fix).