[Bug]: ENOENT: no such file or directory, open 'undefined/templates/base-preview-head.html'

[samvv]

Describe the bug

The following errors occur when using NodeJS version 20.5.0 or above:

 FAIL  lib/core-common/src/utils/__tests__/template.test.ts
  ● server.getPreviewHeadHtml › when .storybook/preview-head.html does not exist › return an empty string

    ENOENT: no such file or directory, open 'undefined/templates/base-preview-head.html'

      26 |   interpolations?: Record<string, string>
      27 | ) {
    > 28 |   const base = fs.readFileSync(`${sync(__dirname)}/templates/base-preview-head.html`, 'utf8');
         |                   ^
      29 |   const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
      30 |
      31 |   let result = base;

      at readFileSync (src/utils/template.ts:28:19)
      at Object.<anonymous> (src/utils/__tests__/template.test.ts:24:44)

  ● server.getPreviewHeadHtml › when .storybook/preview-head.html exists › return the contents of the file

    ENOENT: no such file or directory, open 'undefined/templates/base-preview-head.html'

      26 |   interpolations?: Record<string, string>
      27 | ) {
    > 28 |   const base = fs.readFileSync(`${sync(__dirname)}/templates/base-preview-head.html`, 'utf8');
         |                   ^
      29 |   const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
      30 |
      31 |   let result = base;

      at readFileSync (src/utils/template.ts:28:19)
      at Object.<anonymous> (src/utils/__tests__/template.test.ts:44:44)

  ● server.getPreviewBodyHtml › when .storybook/preview-body.html does not exist › return an empty string

    ENOENT: no such file or directory, open 'undefined/templates/base-preview-body.html'

      10 |   interpolations?: Record<string, string>
      11 | ) {
    > 12 |   const base = fs.readFileSync(`${sync(__dirname)}/templates/base-preview-body.html`, 'utf8');
         |                   ^
      13 |
      14 |   const bodyHtmlPath = path.resolve(configDirPath, 'preview-body.html');
      15 |   let result = base;

      at readFileSync (src/utils/template.ts:12:19)
      at Object.<anonymous> (src/utils/__tests__/template.test.ts:64:44)

  ● server.getPreviewBodyHtml › when .storybook/preview-body.html exists › return the contents of the file

    ENOENT: no such file or directory, open 'undefined/templates/base-preview-body.html'

      10 |   interpolations?: Record<string, string>
      11 | ) {
    > 12 |   const base = fs.readFileSync(`${sync(__dirname)}/templates/base-preview-body.html`, 'utf8');
         |                   ^
      13 |
      14 |   const bodyHtmlPath = path.resolve(configDirPath, 'preview-body.html');
      15 |   let result = base;

      at readFileSync (src/utils/template.ts:12:19)
      at Object.<anonymous> (src/utils/__tests__/template.test.ts:84:44)

This is because of this issue in mock-fs. Short version: NodeJS added an optimisation in 20.5.0 where reading a UTF-8 file uses a dedicated fast path. This breaks mock-fs.

To Reproduce

1. Make sure to use NodeJS version >= 20.5.0
2. Clone this repository
3. Issue yarn test in the project root

System

Storybook Environment Info:

  System:
    OS: Linux 6.2 Ubuntu 23.04 23.04 (Lunar Lobster)
    CPU: (16) x64 AMD Ryzen Threadripper 1900X 8-Core Processor
    Shell: 5.2.15 - /usr/bin/bash
  Binaries:
    Node: 20.5.1 - ~/.local/share/nvm/v20.5.1/bin/node
    Yarn: 4.0.0 - ~/.local/share/nvm/v20.5.1/bin/yarn <----- active
    npm: 9.8.0 - ~/.local/share/nvm/v20.5.1/bin/npm

Additional context

Still trying to work on issue #11486.

[samvv]

backstage/backstage#20436 might also have some interesting thoughts on the topic.