question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't get Storybook working (Windows issue?)

See original GitHub 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…

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:28 (26 by maintainers)

github_iconTop GitHub Comments

1reaction
Tobbecommented, Oct 10, 2020

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'],
1reaction
Tobbecommented, Oct 10, 2020

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Storybook not working on Windows 10 - Stack Overflow
When I run the command yarn run storybook, I get an error: Usage Error: Couldn't find a script named "storybook". I have tried...
Read more >
start-storybook seems to run, but then displays "Cannot GET ...
build-storybook works just fine and I can open that in my browser and all the stories load correctly, so the problem here seems...
Read more >
Environment variables - Storybook - JS.ORG
Using environment variables to choose the browser. Storybook allows you to choose the browser you want to preview your stories. Either through a...
Read more >
Fix problems detaching or attaching your Surface Book ...
If you're having trouble detaching or attaching your Surface Book keyboard, here are some steps to try to get things working again.
Read more >
@storybook/react - npm
If you're working on an app that was initialized manually (i.e., without the use of Create React App), ensure that your app has...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found