Cannot install/build the project on Windows

[olliejm]

Expected Behaviour

Cloning the repo and running yarn will install the repo and run post-install scripts ready for development. Additionally the the gulp css command will perform the CSS file wrapping.

Actual Behaviour

An error occurs in the process-spectrum-css.js post-install script, printing many UnhandledPromiseRejectionWarning: Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. When I separately try to run yarn build I get another error TypeError in plugin "gulp-wrap" Message: Cannot read property 'split' of undefined.

These problems do not occur on macOS.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

1. Clone repo to windows machine
2. Run yarn or yarn build, to find each of the two problems respectively.

Platform and Version

Microsoft Windows Version 10.0.17763
Node v12.18.4
Yarn 1.22.5

Sample Code that illustrates the problem

Logs taken while reproducing problem

Command line output of first issue:

$ yarn get-ready
yarn run v1.22.5
$ yarn build:clear-cache && run-p spectrum-vars process-icons process-spectrum && yarn build
$ rm -rf packages/*/lib && rm -rf packages/*/tsconfig.tsbuildinfo
$ node ./scripts/spectrum-vars.js && prettier --write 'packages/**/*.css'
$ run-p icons icons:ui icons:workflow
$ node ./scripts/process-spectrum-css.js && prettier --write 'packages/**/*.css'
processing theme C:\Users\ojm\source\repos\spectrum-web-components\node_modules\@spectrum-css\vars\dist\spectrum-lightest.css
processing theme C:\Users\ojm\source\repos\spectrum-web-components\node_modules\@spectrum-css\vars\dist\spectrum-light.css
processing theme C:\Users\ojm\source\repos\spectrum-web-components\node_modules\@spectrum-css\vars\dist\spectrum-dark.css
processing theme C:\Users\ojm\source\repos\spectrum-web-components\node_modules\@spectrum-css\vars\dist\spectrum-darkest.css
processing scale  C:\Users\ojm\source\repos\spectrum-web-components\node_modules\@spectrum-css\vars\dist\spectrum-medium.css
processing scale  C:\Users\ojm\source\repos\spectrum-web-components\node_modules\@spectrum-css\vars\dist\spectrum-large.css
processing core C:\Users\ojm\source\repos\spectrum-web-components\node_modules\@spectrum-css\vars\dist\spectrum-global.css
processing typography
processing typography
processing fonts from commons & typography
complete.
Processing Spectrum Components
[error] No files matching the pattern were found: "'packages/**/*.css'".
(node:8120) ExperimentalWarning: The ESM module loader is experimental.
(node:8120) UnhandledPromiseRejectionWarning: Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:698:11)
    at Loader.resolve (internal/modules/esm/loader.js:97:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
    at Loader.import (internal/modules/esm/loader.js:178:28)
    at importModuleDynamically (internal/modules/cjs/loader.js:1080:27)
    at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:37:14)
    at processComponent (C:\Users\ojm\source\repos\spectrum-web-components\scripts\process-spectrum-css.js:29:41)
    at Walker.<anonymous> (C:\Users\ojm\source\repos\spectrum-web-components\scripts\process-spectrum-css.js:105:35)
    at Walker.emit (events.js:315:20)
    at C:\Users\ojm\source\repos\spectrum-web-components\node_modules\walker\lib\walker.js:98:12
(node:8120) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:8120) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

# This above stack repeats many times, ending with:

$ lerna run --scope @spectrum-web-components/icons-ui build
$ node ./scripts/process-icons.js && prettier --write 'packages/**/*.svg.ts'
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 2)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 4)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 6)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 8)
$ lerna run --scope @spectrum-web-components/icons-workflow build
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 10)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 12)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 14)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 16)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 18)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 20)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 22)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 24)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 26)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 28)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 30)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 32)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 34)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 36)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 38)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 40)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 42)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 44)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 46)
(node:8120) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 48)
ERROR: "spectrum-vars" exited with 2.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

The gulp command output is:

$ yarn build
yarn run v1.22.5
$ gulp css && tsc --build packages/**/tsconfig.json
[17:12:40] Using gulpfile ~\source\repos\spectrum-web-components\gulpfile.js
[17:12:40] Starting 'css'...
[17:12:41] css packages\accordion\src\accordion-item.css
[17:12:41] css packages\accordion\src\accordion.css
[17:12:41] css packages\accordion\src\spectrum-accordion-item.css
[17:12:41] css packages\accordion\src\spectrum-accordion.css
[17:12:41] css packages\action-group\src\action-group.css
[17:12:41] css packages\action-group\src\spectrum-action-group.css
[17:12:41] css packages\action-menu\src\action-menu.css
[17:12:41] css packages\actionbar\src\actionbar.css
[17:12:41] css packages\actionbar\src\spectrum-actionbar.css
[17:12:41] css packages\asset\src\asset.css
[17:12:41] 'css' errored after 1.12 s
[17:12:41] TypeError in plugin "gulp-wrap"
Message:
    Cannot read property 'split' of undefined
Details:
    domainEmitter: [object Object]
    domainThrown: false

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[Westbrook]

Hi @olliejm thanks for this issue. We definitely don't do enough work with the repo on Windows, so my apologies that we allowed this to get into the repo. Not being "in office" chasing this repro and getting an actual fix may take longer than normal, but hopefully we can get this corrected for you soon!

[olliejm]

No worries, thanks for looking into it. I'll be continuing to look into it myself tomorrow, so will update the issue if I make any progress also.

…

-------- Original Message --------

On 28 Sep 2020, 17:26, Westbrook Johnson wrote: Hi ***@***.***(https://github.com/olliejm) thanks for this issue. We definitely don't do enough work with the repo on Windows, so my apologies that we allowed this to get into the repo. Not being "in office" chasing this repro and getting an actual fix may take longer than normal, but hopefully we can get this corrected for you soon! — You are receiving this because you were mentioned. Reply to this email directly, [view it on GitHub](#909 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/ADBHWKCX2RBQWDD3RA6Z63DSIC2LFANCNFSM4R4WTCLA).

[olliejm]

The first error is because of this:
nodejs/node#31710

This line: https://github.com/adobe/spectrum-web-components/blob/main/scripts/process-spectrum-css.js#L29

Must become:

const { default: spectrumConfig } = await import(`file://${configPath}`);

There's then a problem with running prettier in the package.json scripts, each script which does this: https://github.com/adobe/spectrum-web-components/blob/main/package.json#L21

Needs e.g. prettier --write 'packages/**/*.css' to use double instead of single quotes: prettier --write "packages/**/*.css".

That still leaves the gulp css issue which I'm looking into. I also didn't check yet if these changes break anything back on a macOS/Linux environment. Maybe also worth noting that the use of rm in the package scripts means the build process doesn't run outside of a git bash shell on Windows.

[olliejm]

The gulp command error was because of the use of platform-specific path separator in the function whichDst of build-css.js.

It was resolved by using path.sep like:

function whichDst(file, t) {
    const dirname = path.dirname(file.path);
    const component = dirname
        .split(`packages${path.sep}`)[1]
        .split(path.sep)[0];
    const name = file.relative.split(path.sep)[2];
    const base = file.base;
    file.path = path.join(base, name);
    t.through(gulp.dest, [
        `packages${path.sep}${component}${path.sep}src${path.sep}`,
    ]);
}

I still now have one further problem, with the command tsc --build packages/**/tsconfig.json. Output:

error TS5083: Cannot read file 'C:/Users/ojm/source/repos/spectrum-web-components/packages/**/tsconfig.json'.

I presume it's something to do with the globs not being interpreted correctly on Windows - though I am still using git bash