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

ciepol commented 1 month ago

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 https://github.com/storybookjs/storybook/pull/27110

Reproduction link

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

Reproduction steps

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

```bash
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[bot] commented 1 month ago

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:

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',
}
```
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.
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](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

Th3S4mur41 commented 1 month ago

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

storybookjs / storybook