[node-build-scripts] fix(sass-compile): source map file paths

[zachkirsch]

Fixes #5416

Checklist

• Includes tests
• Update documentation

Changes proposed in this pull request:

When running a react app with the latest version of blueprint, I get errors like:

Failed to parse source map from '/home/circleci/project/packages/icons/src/generated/20px/blueprint-icons-20.css' file: Error: ENOENT: no such file or directory, open '/home/circleci/project/packages/icons/src/generated/20px/blueprint-icons-20.css'

Source maps are generated with absolute paths to the source files (hence the /home/circleci paths).

Blueprint is using renderSync to generate source maps.

blueprint/packages/node-build-scripts/sass-compile.ts

Line 60 in 3c4daa7

const result = sass.renderSync({

Per sass/dart-sass#1437, this right fix is to manually change the absolute paths to be relative.

Reviewers should focus on:

Screenshot

[adidahiya]

I can't seem to load Sass sourcemaps when I run yarn dev in packages/docs-app now:

The error says:

Could not load content for webpack://./core/src/components/card/_card.scss (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

[adidahiya]

this approach seems cleaner, so I'm on board with the general direction of this PR so far 👍🏽

[zachkirsch]

Thanks for taking a look @adidahiya! I'm not able to run yarn dev in the docs app.

$ cd packages/docs-app
$ yarn dev

yarn run v1.22.18
$ webpack-dev-server --config ./webpack.config.js --host 0.0.0.0
ℹ ｢wds｣: Project is running at http://0.0.0.0:9000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./src
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: ERROR in ./src/index.scss (../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!../../node_modules/sass-loader/dist/cjs.js!./src/index.scss)
Module build failed (from ../../node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
4 │ @import "~@blueprintjs/colors/lib/scss/colors";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../docs-theme/src/styles/_variables.scss 4:9  @import
  src/index.scss 22:9                           root stylesheet
 @ ./src/index.scss 8:6-257 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-227 83:0-227 84:22-29 84:33-47 84:50-64 61:4-74:5

ERROR in ../core/lib/esm/common/index.js 30:0-45
Module not found: Error: Can't resolve '@blueprintjs/colors' in '/Users/zachkirsch/Dropbox/Mac/Documents/blueprint/packages/core/lib/esm/common'
 @ ../core/lib/esm/index.js 19:0-25 19:0-25
 @ ./src/components/blueprintDocs.tsx 22:0-80 26:17-29 62:62-79 75:40-52 84:60-76 94:93-111 97:52-64 101:36-51 109:36-39 117:54-72
 @ ./src/index.tsx 22:0-59 28:36-49



<lots more errors>



ERROR in ./src/tags/reactExamples.ts 19:44-69
TS2307: Cannot find module '@blueprintjs/docs-theme' or its corresponding type declarations.
    17 | import * as React from "react";
    18 |
  > 19 | import { IExampleMap, IExampleProps } from "@blueprintjs/docs-theme";
       |                                            ^^^^^^^^^^^^^^^^^^^^^^^^^
    20 |
    21 | import { getTheme } from "../components/blueprintDocs";
    22 | import * as CoreExamples from "../examples/core-examples";

ERROR in ./src/tags/reactExamples.ts 42:21-26
TS7006: Parameter 'props' implicitly has an 'any' type.
    40 |         const fileName = exampleName.charAt(0).toLowerCase() + exampleName.slice(1) + ".tsx";
    41 |         ret[exampleName] = {
  > 42 |             render: props => React.createElement(example, { ...props, data: { themeName: getTheme() } }),
       |                     ^^^^^
    43 |             sourceUrl: [SRC_HREF_BASE, `${packageName}-examples`, fileName].join("/"),
    44 |         };
    45 |     }

Found 376 errors in 8644 ms.

Any ideas?

[adidahiya]

@zachkirsch you have to run yarn compile from the root of the repo first. Then you can run yarn dev in app bundles like docs-app and demo-app.

[zachkirsch]

Ahh thanks!

[zachkirsch]

Hey @adidahiya,

After some investigation:

• this was working before because the source maps mapped to absolute paths on the file system (e.g. file:///Users/...). So Chrome would load them straight from disk, and not go through the webpack bundle at all. (But of course, this would break downstream consumers, since the absolute path isn't portable).
• Switching to a relative path caused Chrome to ask webpack for the file, but this didn't work (webpack didn't include the .scss source files in the bundle).

After trying lots of different things, this seems to be fixed by me adding sourceMapContents: true when generating the source maps. Not sure if that's the best/right solution

[adidahiya]

sourceMapContents: true seems to be fine... I guess it increases the size of the .map file but that's not a problem for production builds. Sourcemaps are now working in local dev 👍🏽