[Bug]: error when starting storybook using postcss-url plugin to inline assets

[ciepol]

Describe the bug

When using PostCSS plugin (postcss-url) to inline assets using base64 encoding in url() error pops up during storybook start:

Unhandled promise rejection: TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received '/home/projects/github-txbnpe-gdeiug/\x00/sb-common-assets/nunito-sans-regular.woff2'

Feels like the issue has been introduced while doing #27110

Reproduction link

https://stackblitz.com/edit/github-txbnpe-gdeiug?file=postcss.config.js

Reproduction steps

1. add PostCSS configuration in postcss.config.js:

import url from 'postcss-url';

/** @type {import('postcss-load-config').Config} */
const config = {
  extract: false,
  inject: true,
  plugins: [
    url({
      url: 'inline',
    }),
  ],
  sourceMap: true,
};

export default config;

2. run storybook dev -p 6006

System

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-interactions: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-links: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-onboarding: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/blocks: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/react: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/react-vite: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/test: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    storybook: ^8.3.0-alpha.1 => 8.3.0-alpha.1

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To resolve the issue with postcss-url plugin inlining assets, follow these steps:

1. Update base-webpack.config.ts:

   • Locate the file at /code/builders/builder-webpack5/src/preview/base-webpack.config.ts.
   • Ensure the hasPostcssAddon check correctly identifies the PostCSS addon:

     const hasPostcssAddon = options.presetsList?.some((preset) =>
       /@storybook(\/|\\)addon-postcss/.test(typeof preset === 'string' ? preset : preset.name)
     );

   • Add a rule to handle inlined assets:

     {
       test: /\.(woff|woff2|eot|ttf|otf)$/,
       type: 'asset/inline',
     }

2. Modify addon-postcss.ts:

   • Locate the file at /code/lib/cli/src/automigrate/fixes/addon-postcss.ts.
   • Ensure the addon is correctly identified and prompted for migration if necessary.

3. Test Configuration:

   • Ensure the test at /code/lib/cli/src/automigrate/fixes/addon-postcss.test.ts correctly validates the presence of @storybook/addon-postcss.

These changes should address the issue with inlining assets using the postcss-url plugin.

References

/code/lib/cli/src/automigrate/fixes/addon-postcss.ts
/code/lib/cli/src/automigrate/fixes/addon-postcss.test.ts
/code/builders/builder-webpack5/src/preview/base-webpack.config.ts
/code/lib/core-webpack/package.json
/code/lib/source-loader/README.md

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[Th3S4mur41]

I'm facing a similar issue, but with Vite instead of Webpack

[build:watch] [storybook] Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
[build:watch] [storybook] C:\src\core\node_modules\storybook\bin\index.cjs:23
[build:watch] [storybook]   throw error;
[build:watch] [storybook]   ^
[build:watch] [storybook]
[build:watch] [storybook] TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received 'C:\\src\\core\\\x00\\sb-common-assets\\nunito-sans-regular.woff2'
[build:watch] [storybook]     at Object.access (node:fs:227:10)
[build:watch] [storybook]     at C:\src\core\node_modules\postcss-url\src\lib\get-file.js:21:12
[build:watch] [storybook]     at new Promise (<anonymous>)
[build:watch] [storybook]     at existFileAsync (C:\src\core\node_modules\postcss-url\src\lib\get-file.js:20:12)
[build:watch] [storybook]     at C:\src\core\node_modules\postcss-url\src\lib\get-file.js:32:20
[build:watch] [storybook]     at Array.map (<anonymous>)
[build:watch] [storybook]     at C:\src\core\node_modules\postcss-url\src\lib\get-file.js:31:36
[build:watch] [storybook]     at new Promise (<anonymous>)
[build:watch] [storybook]     at findExistsPath (C:\src\core\node_modules\postcss-url\src\lib\get-file.js:30:12)
[build:watch] [storybook]     at getFile (C:\src\core\node_modules\postcss-url\src\lib\get-file.js:61:12)
[build:watch] [storybook]     at processCopy (C:\src\core\node_modules\postcss-url\src\type\copy.js:57:12)
[build:watch] [storybook]     at C:\src\core\node_modules\postcss-url\src\lib\decl-processor.js:67:9
[build:watch] [storybook]     at process (C:\src\core\node_modules\postcss-url\src\lib\decl-processor.js:95:16)
[build:watch] [storybook]     at replaceUrl (C:\src\core\node_modules\postcss-url\src\lib\decl-processor.js:111:25)      
[build:watch] [storybook]     at C:\src\core\node_modules\postcss-url\src\lib\decl-processor.js:139:35
[build:watch] [storybook]     at String.replace (<anonymous>) {
[build:watch] [storybook]   code: 'ERR_INVALID_ARG_VALUE'
[build:watch] [storybook] }
[build:watch] [storybook]
[build:watch] [storybook] Node.js v20.14.0
[build:watch] [storybook] npm run storybook exited with code 7

[kerryj89]

I tried out Tailwind v4 Beta today with Storybook + Vite setup.
https://tailwindcss.com/docs/v4-beta

Which returns a similar message:

[postcss] The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '\x00/iframe.html?html-proxy&index=1.css'

To isolate the issue, I removed all plugins but Tailwind v4's postcss plugin to make sure it was coming from it:

// postcss.config.js
/** @type {import('postcss-load-config').Config} */
const config = {
    plugins: {
        '@tailwindcss/postcss': {}
    },
};

export default config;

I believe the issue I'm experiencing is related to the one mentioned here.