SPFx 1.18 failed to serve - error:0308010C:digital envelope routines::unsupported

[HarminderSethi]

npm run serve command with node 18.17.1 for SPFx 1.18 throws below errors where as it works perfectly fine with Node v16

`ERROR in ./src/webparts/listView/components/ListView.module.scss (./node_modules/spfx-css-modules-typescript-loader!./node_modules/spfx-fast-serve-helpers/node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/spfx-fast-serve-helpers/node_modules/postcss-loader/dist/cjs.js??ref--8-3!./node_modules/clean-css-loader/lib??ref--8-4!./node_modules/sass-loader/dist/cjs.js??ref--8-5!./src/webparts/listView/components/ListView.module.scss)
Module build failed (from ./node_modules/spfx-fast-serve-helpers/node_modules/css-loader/dist/cjs.js):
Error: error:0308010C:digital envelope routines::unsupported
at D:\Learning\listView\src\webparts\listView\components\ListView.module.scss:1:1
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:133:10)
at getHashDigest (D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\loader-utils\lib\getHashDigest.js:46:34)
at D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\loader-utils\lib\interpolateName.js:113:11
at String.replace ()
at interpolateName (D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\loader-utils\lib\interpolateName.js:110:8)
at defaultGetLocalIdent (D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\css-loader\dist\utils.js:208:43)
at generateScopedName (D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\css-loader\dist\utils.js:432:24)
at exportScopedName (D:\Learning\listView\node_modules\postcss-modules-scope\src\index.js:95:28)
at localizeNode (D:\Learning\listView\node_modules\postcss-modules-scope\src\index.js:124:22)
at Array.map ()
at Selector.map (D:\Learning\listView\node_modules\postcss-selector-parser\dist\selectors\container.js:269:23)
at localizeNode (D:\Learning\listView\node_modules\postcss-modules-scope\src\index.js:120:31)
at traverseNode (D:\Learning\listView\node_modules\postcss-modules-scope\src\index.js:152:32)
at Selector.each (D:\Learning\listView\node_modules\postcss-selector-parser\dist\selectors\container.js:159:16)
at traverseNode (D:\Learning\listView\node_modules\postcss-modules-scope\src\index.js:175:18)

ERROR in ./src/webparts/listView/assets/welcome-light.png
Module build failed (from ./node_modules/spfx-fast-serve-helpers/node_modules/file-loader/dist/cjs.js):
de_modules\loader-utils\lib\interpolateName.js:110:8)
at Object.loader (D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\file-loader\dist\index.js:29:48)

ERROR in ./src/webparts/listView/assets/welcome-dark.png
Module build failed (from ./node_modules/spfx-fast-serve-helpers/node_modules/file-loader/dist/cjs.js):
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:133:10)
at getHashDigest (D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\loader-utils\lib\getHashDigest.js:46:34)
at D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\loader-utils\lib\interpolateName.js:113:11
at String.replace ()
at interpolateName (D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\loader-utils\lib\interpolateName.js:110:8)
at Object.loader (D:\Learning\listView\node_modules\spfx-fast-serve-helpers\node_modules\file-loader\dist\index.js:29:48)

ERROR in chunk list-view-web-part [entry]
list-view-web-part.js
D:\Learning\listView\node_modules@microsoft\load-themed-styles\lib\index.js
error:0308010C:digital envelope routines::unsupported`

[slawomirbak]

I have the same problem. In a HelloWorld example I left only an empty div (without scss) and sill I got an error:

[10:52:23] [fast-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
i ｢wds｣: Project is running at https://localhost:4321/
i ｢wds｣: webpack output is served from https://localhost:4321/dist/
i ｢wds｣: Content not from webpack is served from C:\Users\sbak\Desktop\tmp\test2
i ｢wds｣: 404s will fallback to /index.html
× ｢wdm｣: Time: 588ms
Entrypoint hello-world-web-part =

ERROR in chunk hello-world-web-part [entry]
hello-world-web-part.js
C:\Users\sbak\Desktop\tmp\test2\node_modules\ansi-html\index.js
error:0308010C:digital envelope routines::unsupported
i ｢wdm｣: Failed to compile.

Dependecies:
node: v18.17.1
C:\Program Files\nodejs -> .
├── @microsoft/generator-sharepoint@1.18.0
├── corepack@0.18.0
├── gulp-cli@2.3.0
├── npm@9.6.7
└── yo@4.3.1

gulpfile.js

build.addSuppression(Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.);
var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
var result = getTasks.call(build.rig);
result.set('serve', result.get('serve-deprecated'));
return result;
};
/* fast-serve /
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/ end of fast-serve */
build.initialize(require('gulp'));

fast-server/config.json:

{
"$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.latest.schema.json",
"cli": {
"isLibraryComponent": false
}
}

fast-server/webpack.extend.js

const path = require('path');
const webpackConfig = {};
const transformConfig = function (initialWebpackConfig) {
initialWebpackConfig.resolve.modules.push(path.resolve(__dirname, './../src'));
return initialWebpackConfig;
};
module.exports = {
webpackConfig,
transformConfig
};

package.json -> from template + "spfx-fast-server-helpers": "^1.18.0"

Thanks in advance for investigating!

[s-KaiNet]

Thank you for reporting. I have some ideas how to fix it, most likely will publish a fix tomorrow.

[kbeeveer46]

Just wanted to chime in and say I have the same issue. Upgraded to SPFx 1.18.0, Node 18.17.1, and SPFx Fast Serve Helpers 1.18.0. Gulp serve works fine but npm run serve does not. Here's my terminal log after running the command

PS C:\RespositoriesGit\CP\clientportalsharepoint> npm run serve

> client-portal@1.0.0 serve
> gulp clean && gulp bundle --custom-serve --max_old_space_size=8192 && fast-serve

Build target: DEBUG
[13:06:13] Using gulpfile C:\RespositoriesGit\CP\clientportalsharepoint\gulpfile.js
[13:06:13] Starting 'clean'...
[13:06:13] Starting gulp
[13:06:13] Starting subtask 'clean'...
[13:06:14] Finished subtask 'clean' after 530 ms
[13:06:14] Finished 'clean' after 534 ms
[13:06:14] ==================[ Finished ]==================
[13:06:15] Project client-portal version:1.0.0
[13:06:15] Build tools version:3.18.0
[13:06:15] Node version:v18.17.1
[13:06:15] Total duration:3.61 s
[13:06:15] Node flags detected: --max_old_space_size=8192
[13:06:15] Respawned to PID: 108972
Build target: DEBUG
[13:06:18] Using gulpfile C:\RespositoriesGit\CP\clientportalsharepoint\gulpfile.js
[13:06:18] Starting 'bundle'...
[13:06:18] Starting gulp
[13:06:18] Starting subtask 'pre-copy'...
[13:06:18] Finished subtask 'pre-copy' after 66 ms
[13:06:18] Starting subtask 'copy-static-assets'...
[13:06:18] Starting subtask 'sass'...
[13:06:18] Finished subtask 'sass' after 102 ms
[13:06:18] Starting subtask 'lint'...
[13:06:18] [lint] eslint version: 8.49.0
[13:06:18] Starting subtask 'tsc'...
[13:06:18] [tsc] typescript version: 4.5.5
[13:06:19] Finished subtask 'copy-static-assets' after 402 ms
[13:06:33] Finished subtask 'lint' after 14 s
[13:06:37] Finished subtask 'tsc' after 18 s
[13:06:37] Starting subtask 'save-webpack-config'...
[13:06:37] Finished subtask 'save-webpack-config' after 708 μs
[13:06:37] Starting subtask 'post-copy'...
[13:06:37] Finished subtask 'post-copy' after 239 μs
[13:06:37] Starting subtask 'configure-webpack'...
[13:06:37] Finished subtask 'configure-webpack' after 576 ms
[13:06:37] Starting subtask 'webpack'...
[13:06:58] Finished subtask 'webpack' after 21 s
[13:06:58] Finished 'bundle' after 40 s
[13:06:59] ==================[ Finished ]==================
[13:06:59] Project client-portal version:1.0.0
[13:06:59] Build tools version:3.18.0
[13:06:59] Node version:v18.17.1
[13:06:59] Total duration:43 s
[13:07:01] [fast-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
i ｢wds｣: Project is running at https://localhost:4321/
i ｢wds｣: webpack output is served from https://localhost:4321/dist/
i ｢wds｣: Content not from webpack is served from C:\RespositoriesGit\CP\clientportalsharepoint
i ｢wds｣: 404s will fallback to /index.html
× ｢wdm｣: Time: 14544ms
Entrypoint admin-manage-permissions-web-part =
Entrypoint common-document-library-web-part =
Entrypoint common-iframe-web-part =
Entrypoint home-about-web-part =
Entrypoint home-banner-web-part =
Entrypoint home-documents-web-part =
Entrypoint home-links-web-part =
Entrypoint home-marketing-web-part =
Entrypoint home-videos-web-part =
Entrypoint home-page-web-part =
Entrypoint pt-dashboard-web-part =
Entrypoint pt-reports-web-part =
Entrypoint pt-search-web-part =
Entrypoint site-create-web-part =
Entrypoint site-request-site-web-part =
Entrypoint site-select-web-part =
Entrypoint ttc-carry-forward-web-part =
Entrypoint ttc-compliance-summary-web-part =
Entrypoint ttc-dashboard-web-part =
Entrypoint ttc-documents-web-part =
Entrypoint ttc-filing-calendar-web-part =
Entrypoint ttc-notices-web-part =
Entrypoint ttc-on-demand-reports-web-part =
Entrypoint ttc-prepayment-web-part =
Entrypoint ttc-rate-validation-web-part =
Entrypoint ttc-tax-returns-web-part =

ERROR in chunk 0
chunk.0.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\asyncToGenerator.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk 1
chunk.1.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\jspdf\node_modules\dompurify\dist\purify.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk admin-manage-permissions-web-part [entry]
admin-manage-permissions-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk common-document-library-web-part [entry]
common-document-library-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk common-iframe-web-part [entry]
common-iframe-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk fileSaver
chunk.fileSaver.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\file-saver\dist\FileSaver.min.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk home-about-web-part [entry]
home-about-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@fluentui\date-time-utilities\lib\dateFormatting\dateFormatting.defaults.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk home-banner-web-part [entry]
home-banner-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@fluentui\date-time-utilities\lib\dateFormatting\dateFormatting.defaults.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk home-documents-web-part [entry]
home-documents-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@fluentui\date-time-utilities\lib\dateFormatting\dateFormatting.defaults.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk home-links-web-part [entry]
home-links-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@fluentui\date-time-utilities\lib\dateFormatting\dateFormatting.defaults.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk home-marketing-web-part [entry]
home-marketing-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@fluentui\date-time-utilities\lib\dateFormatting\dateFormatting.defaults.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk home-page-web-part [entry]
home-page-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk home-videos-web-part [entry]
home-videos-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@fluentui\date-time-utilities\lib\dateFormatting\dateFormatting.defaults.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk pt-dashboard-web-part [entry]
pt-dashboard-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\arrayLikeToArray.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk pt-reports-web-part [entry]
pt-reports-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk pt-search-web-part [entry]
pt-search-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\arrayLikeToArray.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk site-create-web-part [entry]
site-create-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk site-request-site-web-part [entry]
site-request-site-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk site-select-web-part [entry]
site-select-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-carry-forward-web-part [entry]
ttc-carry-forward-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-compliance-summary-web-part [entry]
ttc-compliance-summary-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-dashboard-web-part [entry]
ttc-dashboard-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\arrayLikeToArray.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-documents-web-part [entry]
ttc-documents-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-filing-calendar-web-part [entry]
ttc-filing-calendar-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-notices-web-part [entry]
ttc-notices-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-on-demand-reports-web-part [entry]
ttc-on-demand-reports-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-prepayment-web-part [entry]
ttc-prepayment-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-rate-validation-web-part [entry]
ttc-rate-validation-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk ttc-tax-returns-web-part [entry]
ttc-tax-returns-web-part.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\esm\assertThisInitialized.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk vendors~exceljs
chunk.vendors~exceljs.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\exceljs\dist\exceljs.min.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk vendors~html2canvas
chunk.vendors~html2canvas.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\html2canvas\dist\html2canvas.js
error:0308010C:digital envelope routines::unsupported

ERROR in chunk vendors~jspdf
chunk.vendors~jspdf.js
C:\RespositoriesGit\CP\clientportalsharepoint\node_modules\@babel\runtime\helpers\typeof.js
error:0308010C:digital envelope routines::unsupported
i ｢wdm｣: Failed to compile.
Issues checking in progress...
No issues found.

[s-KaiNet]

spfx-fast-serve-helpers@1.18.1 with the fix was published.
Please run npm update spfx-fast-serve-helpers or just install explicitly npm i spfx-fast-serve-helpers@1.18.1 -DE, then make sure that the right version is installed by running npm list spfx-fast-serve-helpers and checking that the version is 1.18.1. After that run and see if the issue is still reproducible.

[HarminderSethi]

@s-KaiNet Thanks for fixing the issue. It is working fine for me now after the update.

[s-KaiNet]

Thanks, will close the issue for now, if anybody still see this error, please feel free to reopen.

[c-eiser13]

@s-KaiNet I can open a new issue is needed , but I am getting the same error, but only in node v18, fast-serve works fine in node 16. I upgraded my project from 1.17.4 to 1.18.2, then I updated fast serve helpers to 1.18.4, and when I run fast serve on node 16, all is well, but if I run on node 18, I get the error mentioned above. More details below:

node versions: 16.13.2 (works), 18.17.1 (does not work) 18.19.0 (does not work)

Error:

The error is referencing places where I am using require() to load an asset, such as an image that resides in the assets folder within the web part.

from node_modules in my project

I've also tried 1.18.7 of spfx-fast-serve-helpers and get the same error when on node 18. If there are any other details or screenshots I can provide, let me know.

[s-KaiNet]

@c-eiser13 do you still experience this issue?

[c-eiser13]

@s-KaiNet, thanks for the follow up, I've found a solution that is working for now. I had to add this to the serve command, without this line, I still get the error when trying to serve on node 18.

This post led me to this solution.

[s-KaiNet]

That's strange, because that exactly what I'm doing inside fast-serve in order to unlock node 18. I have a feeling that something wrong with your dependencies and you somehow install the old version of fast-serve. Have you tried deleting node_modules and package.json and reinstalling dependencies?

[c-eiser13]

@s-KaiNet yes, I deleted node_modules and pnpm-lock.yaml many times, trying different versions of spfx-fast-serve-helpers. Could be something related to environment variables, I also tried this inside the glupfile, which did not work:

The only way it would work is if I manually ran that set command before running serve, or once I figured I could use that set command in the serve command within package.json. If you have any suggestions I could check further to see if it is something on my end, I'd be happy to. I'm currently running 1.18.4 of the -helpers.

[s-KaiNet]

Could you tell me what is your OS?

[c-eiser13]

@s-KaiNet sorry, I'm on Windows 11 Pro

[s-KaiNet]

@c-eiser13 I'm also on W11 Pro, just out of curiosity, if you have time, could you clone this repository and try to run advanced sample. You just need to npm install and npm run serve. Will the error appear?

Could you also tell me the command line tool you use for running npm run serve command?

[c-eiser13]

@s-KaiNet I am running Cmder and using NVM for node. I cloned the repo, installed deps and the project runs successfully. I even added a line in scss to load an image file from an assets folder using url() and it still runs correctly.

I went back and re-traced my steps and when I upgraded my project to 1.18.2, I did so on a fork, but thought I was on node 16. I still had the fork so went and was able to run serve command on node 18 without the set NODE_OPTIONS line. It is something on my end on my main project, if you have any other suggestions of where I can look, I will do so, otherwise using set in the serve command in package.json has me unblocked on node 18 for now. Appreciate your assistance!

[s-KaiNet]

@c-eiser13 maybe somehow the old version of spfx-fast-serve-helpers is used in your project, you can check the version installed by running npm list spfx-fast-serve-helpers. If it shows at least 1.18.4, then it should be ok. Otherwise I'm running out of ideas.

[c-eiser13]

@s-KaiNet seems to be an issue with pnpm, if I install dependencies with npm, it runs fine. When I run npm list spfx-fast-serve-helpers, I get some errors regarding @pnp/spfx-controls-react and @pnp/spfx-property-controls requesting version 1.18.3 of spfx-fast-serve-helpers, but I also see these errors in my working fork, so not sure that is the root cause. I'm going to continue using the set command in my serve cmd in package.json until I have some more time to troubleshoot further. Appreciate all the feedback.