Unable to compile SCSS using Gulp

[jauschalley]

My team is having trouble with the initial installation of USWDS 3.0 with React 18 and Node 16.10. When running npx gulp init We are dying on the following error though the directory it is claiming is missing is definitely in the correct location;

[16:08:43] Starting 'buildSprite'...
[16:08:43] 'buildSass' errored after 362 ms
[16:08:43] Error: spawn /app/node_modules/sass-embedded/dist/lib/src/vendor/dart-sass-embedded/dart-sass-embedded ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
    at onErrorNT (node:internal/child_process:477:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
[16:08:43] 'init' errored after 13 s

Here is our Gulpfile

const uswds = require("@uswds/compile");

/**
 * USWDS version
 * Set the version of USWDS you're using (2 or 3)
 */

uswds.settings.version = 3;

/**
 * Path settings
 * Set as many as you need
 */

uswds.paths.dist.css = './assets/css';
uswds.paths.dist.sass = './sass';

/**
 * Exports
 * Add as many as you need
 */

exports.init = uswds.init;
exports.compile = uswds.compile;

Our package.json;

{
  "name": "blueprint_ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "@uswds/uswds": "^3.0.0",
    "gulp-sass": "^5.1.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.4.1",
    "prettier": "^2.6.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "sass-embedded": "^1.50.1",
    "web-vitals": "^2.1.4"
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint",
      "prettier --write"
    ],
    "src/**/*.{ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install",
    "pre-commit": "lint-staged"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@uswds/compile": "^1.0.0-beta.2",
    "husky": "^7.0.0"
  }
}

This is a brand new application so there isn't much else going on. Let me know if you'd like more details.

[dmethvin-gov]

This is on Windows? Where is the repo located, is it really deep in the directory structure? Windows has a limit of 260 chars in a path name for many operations. The partial path it's complaining about is /app/node_modules/sass-embedded/dist/lib/src/vendor/dart-sass-embedded/dart-sass-embedded which is 90 chars. So if the path above that point is more than 170 chars it might cause an error where it doesn't see a file or path that is obviously there.

EDIT: Microsoft docs on the issue and a Windows 10 registry option to enable longer paths: https://docs.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation

[jauschalley]

Thanks for taking a look. I've been running this in a Docker container via a MacOS. It's a pretty simple setup as the app is brand new: Dockerfile:

# base image
FROM node:16.10.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json

RUN npm install

# start app
CMD ["npm", "start"]

[thisisdano]

This is possibly related to a bug in the theme files in USWDS 3.0.0 that could cause an init compile to fail. Can you try again with USWDS 3.0.1 and see if it has any effect?

[jauschalley]

@thisisdano Thanks for the tip. I installed the patch but it did not resolve the issue. The readout is the same as before.

[thisisdano]

OK, thanks — we'll keep at it

[dmethvin-gov]

This case looks very similar, but is unresolved AFAICT: https://issues.joomla.org/tracker/joomla-cms/33170#event-602508

What kind of Mac is this? Is it an M1?

[jauschalley]

I'm on the old intel core 7 (2019) but this issue was repeated on the various macs of my coworkers.

[mejiaj]

Related to #20.

[smustgrave]

@jauschalley could you try the fix I did in https://github.com/uswds/uswds-compile/pull/23

We are also having an issue compiling inside docker and the issue appears to be with the sass-embedded node module.

[brunerae]

Can close in favor of https://github.com/uswds/uswds-compile/issues/32