redwood: Can't get Storybook working (Windows issue?)

On a fresh install of RW 0.15.3, when I try to run storybook I get the following output

tobbe@XPS9550 MINGW64 ~/dev/redwood/v153
$ yarn rw storybook
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\v153\node_modules\.bin\rw storybook
$ C:\Users\tobbe\dev\redwood\v153\node_modules\.bin\msw init C:\Users\tobbe\dev\redwood\v153\web\public
$ C:\Users\tobbe\dev\redwood\v153\node_modules\.bin\start-storybook --config-dir ../node_modules/@redwoodjs/core/config/storybook --port 7910 --no-version-updates --ci --static-dir C:\Users\tobbe\dev\redwood\v153\web\public
Initializing the Mock Service Worker at "C:\Users\tobbe\dev\redwood\v153\web\public"...

Service Worker successfully created!
C:\Users\tobbe\dev\redwood\v153\web\public\mockServiceWorker.js

Continue by creating a mocking definition module in your application:

  https://mswjs.io/docs/getting-started/mocks

info @storybook/react v5.3.19
info
info => Loading static files from: C:\Users\tobbe\dev\redwood\v153\web\public .
info => Loading presets
info => Loading presets
info => Loading custom babel config as JS
info => Loading custom babel config as JS
info => Loading config/preview file in "../node_modules/@redwoodjs/core/config/storybook".
info => Adding stories defined in "..\node_modules\@redwoodjs\core\config\storybook\main.js".
info => Using default Webpack setup.
info => Using base config because react-scripts is not installed.
webpack built ab30d37ca5a1eaf7918e in 14155ms
× 「wdm」: Hash: ab30d37ca5a1eaf7918e
Version: webpack 4.44.1
Time: 14155ms
Built at: 2020-08-10 12:04:40
                                  Asset      Size  Chunks                                Chunk Names
       0.ab30d37ca5a1eaf7918e.bundle.js  2.63 KiB       0  [emitted] [immutable]
   0.ab30d37ca5a1eaf7918e.bundle.js.map  1.96 KiB       0  [emitted] [dev]
       1.ab30d37ca5a1eaf7918e.bundle.js  2.18 KiB       1  [emitted] [immutable]
   1.ab30d37ca5a1eaf7918e.bundle.js.map  1.46 KiB       1  [emitted] [dev]
                            iframe.html  2.74 KiB          [emitted]
    main.ab30d37ca5a1eaf7918e.bundle.js  4.13 MiB    main  [emitted] [immutable]  [big]  main
main.ab30d37ca5a1eaf7918e.bundle.js.map  4.48 MiB    main  [emitted] [dev]               main
Entrypoint main [big] = main.ab30d37ca5a1eaf7918e.bundle.js main.ab30d37ca5a1eaf7918e.bundle.js.map
[0] multi ../node_modules/@storybook/core/dist/server/common/polyfills.js ../node_modules/@storybook/core/dist/server/preview/globals.js ../node_modules/@redwoodjs/core/config/storybook/preview.js ../node_modules/@redwoodjs/core/config/storybook/generated-entry.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 76 bytes {main} [built]
[../node_modules/@redwoodjs/core/config/storybook/generated-entry.js] 347 bytes {main} [built]
[../node_modules/@redwoodjs/core/config/storybook/preview.js] 505 bytes {main} [built]
[../node_modules/@redwoodjs/core/dist/storybook/StorybookProvider.js] 1.32 KiB {main} [built]
[../node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {main} [built]
[../node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {main} [built]
[../node_modules/@storybook/react/dist/client/index.js] 1.34 KiB {main} [built]
[../node_modules/airbnb-js-shims/index.js] 40 bytes {main} [built]
[../node_modules/core-js/features/symbol/index.js] 359 bytes {main} [built]
[../node_modules/global/window.js] 232 bytes {main} [built]
[../node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[../node_modules/react/index.js] 190 bytes {main} [built]
[../node_modules/regenerator-runtime/runtime.js] 24 KiB {main} [built]
[../node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] 7.68 KiB {main} [built]
    + 1317 hidden modules

ERROR in ../node_modules/@redwoodjs/core/config/storybook/generated-entry.js
edwood♂153websrc' in 'C:\Users\tobbe\dev\redwood\v153\node_modules\@redwoodjs\core\config\storybook'
 @ ../node_modules/@redwoodjs/core/config/storybook/generated-entry.js 5:25-188
 @ multi ../node_modules/@storybook/core/dist/server/common/polyfills.js ../node_modules/@storybook/core/dist/server/preview/globals.js ../node_modules/@redwoodjs/core/config/storybook/preview.js ../node_modules/@redwoodjs/core/config/storybook/generated-entry.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  5.94 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../node_modules/html-webpack-plugin/lib/loader.js!../node_modules/@storybook/core/dist/server/templates/index.ejs] 2.13 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

Looking in my node_modules folder I can’t find the generated-entry.js file at all There’s something funky going on with edwood♂153websrc, kind of like it originally was \redwood\v153\web\src or something (which looks like a semi-valid Windows path) and then it interpreted the Windows path-separator as an escape character. So \r became carriage return, \v became male sex sign 🤷‍♀️ and \w and \s were not recognized as escape codes, so the backslash was just dropped…

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 28 (26 by maintainers)

Commits related to this issue

Most upvoted comments

What I did find out however, is that if I run StoryBook without specifying a config dir it starts!

I’ve narrowed it down further.

In main.js in the storybook config dir there is a stories export that looks like this

const stories = [`${getPaths().web.src}/**/*.stories.{tsx,jsx,js}`]

On one of my projects that ends up evaluating to this

stories = ['C:\\Users\\tobbe\\dev\\redwood\\rw193\\web\\src/**/*.stories.{tsx,jsx,js}']

If I change that export to just look like this, storybook will start

  stories: [],

But if I change it to this, stuff breaks

  stories: ['C:\\Users\\tobbe\\dev\\redwood\\rw193\\web\\src\\pages\\HomePage\\HomePage.stories.js'],

@dthyresson pointed to this line in the code as potentially problematic on Windows: https://github.com/redwoodjs/redwood/blob/main/packages/cli/src/commands/storybook.js#L15

I’ll dig in to it tomorrow. See what that path resolves to on Windows.