Closed Tobbe closed 4 years ago
Ah man, this is complicated... I'm not having issues with Storybook at the moment (on OS X).
It looks like something breaks in the build step here.
This looks somewhat related, but I haven't followed the thread yet: https://github.com/storybookjs/storybook/issues/9937
Took a quick look at that thread. So if we're lucky it's solved in the latest 6.0.0 RC. But 6 is a new major, and I have no idea what breaking changes they might have introduced...
@peterp If you give 6.0 a go on OS X and it works, I can try on Windows too
That timing! <3
I tried upgrading to v6.0.0, but still have the same error. But, as I said, I don't know what breaking changes they made between v5 and v6 that might affect us. So please do try to upgrade on OS X first, and I'll try again on Windows
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 v6.0.0
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".
WARN unable to find package.json for @types/babel-core
WARN unable to find package.json for @types/babel-plugin-tester
WARN unable to find package.json for babel-plugin-tester
WARN unable to find package.json for whatwg-fetch
info => Using default Webpack setup.
webpack built 612e9f7ab35305e3f116 in 17239ms
× 「wdm」: Hash: 612e9f7ab35305e3f116
Version: webpack 4.44.1
Time: 17239ms
Built at: 2020-08-11 11:14:25
Asset Size Chunks Chunk Names
0.612e9f7ab35305e3f116.bundle.js 2.63 KiB 0 [emitted] [immutable]
0.612e9f7ab35305e3f116.bundle.js.map 1.96 KiB 0 [emitted] [dev]
1.612e9f7ab35305e3f116.bundle.js 2.18 KiB 1 [emitted] [immutable]
1.612e9f7ab35305e3f116.bundle.js.map 1.46 KiB 1 [emitted] [dev]
2.612e9f7ab35305e3f116.bundle.js 1.66 KiB 2 [emitted] [immutable]
2.612e9f7ab35305e3f116.bundle.js.map 586 bytes 2 [emitted] [dev]
iframe.html 2.79 KiB [emitted]
main.612e9f7ab35305e3f116.bundle.js 4.55 MiB main [emitted] [immutable] [big] main
main.612e9f7ab35305e3f116.bundle.js.map 4.86 MiB main [emitted] [dev] main
Entrypoint main [big] = main.612e9f7ab35305e3f116.bundle.js main.612e9f7ab35305e3f116.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/storybook-init-framework-entry.js ../node_modules/@redwoodjs/core/config/storybook/preview.js-generated-config-entry.js ../node_modules/@redwoodjs/core/config/storybook/generated-stories-entry.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 88 bytes {main} [built]
[../node_modules/@redwoodjs/core/config/storybook/generated-stories-entry.js] 270 bytes {main} [built]
[../node_modules/@redwoodjs/core/config/storybook/preview.js] 505 bytes {main} [built]
[../node_modules/@redwoodjs/core/config/storybook/preview.js-generated-config-entry.js] 2.26 KiB {main} [built]
[../node_modules/@redwoodjs/core/config/storybook/storybook-init-framework-entry.js] 26 bytes {main} [built]
[../node_modules/@redwoodjs/core/node_modules/@storybook/react/dist/client/index.js] 1.34 KiB {main} [built]
[../node_modules/@storybook/client-api/dist/index.js] 4.63 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/core/node_modules/@storybook/client-logger/dist/index.js] 3.66 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/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] 7.68 KiB {main} [built]
+ 1571 hidden modules
ERROR in ../node_modules/@redwoodjs/core/config/storybook/generated-stories-entry.js
edwood♂153websrc' in 'C:\Users\tobbe\dev\redwood\v153\node_modules\@redwoodjs\core\config\storybook'
@ ../node_modules/@redwoodjs/core/config/storybook/generated-stories-entry.js 5:27-190
@ 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/storybook-init-framework-entry.js ../node_modules/@redwoodjs/core/config/storybook/preview.js-generated-config-entry.js ../node_modules/@redwoodjs/core/config/storybook/generated-stories-entry.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
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'
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
This part seems interesting: Chokidar is what we, and a bunch of other people, use to watch files. Maybe something blocked it?
Yeah, I googled that error, and the recommendations on how to solve it are all over the place, but most of them come down to npm issues with one installed package or another. I don't have a local package repository set up. So I can clear caches, re-install, etc, but it's all going to be for RW 0.15.3 then, unless you push a canary release with SB 6
As I said - solutions to this problems are all over the place. So I've tried disabling anti-virus and anti-malware software, I've tried clearing the yarn cache, and I've deleted yarn temp directories. So far nothing has made any difference.
Tomorrow I'll try to go through the storybook tutorial to see if I can get SB working on its own, without RW thrown in to the mix
Strange! Have you tried rebooting?
On Wed, Aug 12, 2020, 12:10 AM Tobbe Lundberg notifications@github.com wrote:
As I said - solutions to this problems are all over the place. So I've tried disabling anti-virus and anti-malware software, I've tried clearing the yarn cache, and I've deleted yarn temp directories. So far nothing has made any difference.
Tomorrow I'll try to go through the storybook tutorial to see if I can get SB working on its own, without RW thrown in to the mix
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/redwoodjs/redwood/issues/954#issuecomment-672309431, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAK6MOL53VIC4AZEFEO5OLSAG6V7ANCNFSM4PZZ7QMA .
No, I actually hadn't. But this morning I woke up to a rebooted computer (forced windows update 😡). So I tried just now, and it's still giving me the same error message
Does this 'C:\DumpStack.log.tmp'
file contain anything interesting?w
I don't know, since I can't read it 😄
tobbe@XPS9550 MINGW64 ~/dev/redwood/v153
$ less /c/DumpStack.log.tmp
/c/DumpStack.log.tmp: Device or resource busy
Tried with a regular filemanager as well, but no luck
Neither Resource Monitor nor Process Explorer finds anyone holding a file lock on that file though 🤔
Weird, I don't suppose you can remove it either?
On Wed, 12 Aug 2020 at 11:34, Tobbe Lundberg notifications@github.com wrote:
Neither Resource Monitor nor Process Explorer finds anyone holding a file lock on that file though 🤔
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/redwoodjs/redwood/issues/954#issuecomment-672766517, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAK6MMY7T7RO62WU3I3XSDSAJO4BANCNFSM4PZZ7QMA .
No, not even as admin
tobbe@XPS9550 C:\
# del /f C:\DumpStack.log.tmp
Could Not Find C:\DumpStack.log.tmp
So, I did manage to remove the file. So now I get this error message instead 🙄
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Had to change a registry setting to be able to delete the DumpStack file. Found the solution here https://www.tenforums.com/general-support/157249-win-10-update-version-1909-2004-a.html#post1921672
Solution was : "set the value "EnableLogFile" = dword: 00000001 under: [HKEY_LOCAL_MACHINE \ SYSTEM \ CurrentControlSet \ Control \ CrashControl] to 0." What I had failed to do was to reboot my computer and then I was able to delete file from C Drive. Then I restored dword back to 1.
It's all very similar to this https://stackoverflow.com/questions/61936085/error-from-chokidar-c-error-ebusy-resource-busy-or-locked-lstat-c-dump But that's about Angular and protractor and npm. Not sure how much translates to RW and storybook and yarn.
Storybook on its own work just fine
So it is something specific to RW itself, or my setup in the project I'm trying to use it
Oh man, I was worried that it was us...
I am having the same issue (as Windows User). Posting my error - maybe it will help:
ERROR in ../node_modules/@redwoodjs/core/config/storybook/generated-entry.js
Module not found: Error: Can't resolve 'C:UsersAdminDocumentsTESTING_Tedwoodblogwebsrc' in 'C:\Users\Admin\Documents\TESTING_THINGS\redwoodblog\node_modules\@redwoodjs\core\config\storybook'
@ ../node_modules/@redwoodjs/core/config/storybook/generated-entry.js 5:25-208
@ 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.96 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.15 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:\hiberfil.sys'
yarn rw info
System:
OS: Windows 10 10.0.19041
Binaries:
Node: 14.5.0 - ~\AppData\Local\Temp\yarn--1599245377237-0.3087070347612604\node.CMD
Yarn: 1.22.4 - ~\AppData\Local\Temp\yarn--1599245377237-0.3087070347612604\yarn.CMD
Browsers:
Chrome: 85.0.4183.83
Edge: Spartan (44.19041.423.0), Chromium (85.0.564.44), ChromiumDev (86.0.622.3)
npmPackages:
@redwoodjs/core: ^0.17.2 => 0.17.2
Just wanted to +1 this here, different file but the same result unable top run storybook
Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\pagefile.sys
@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.
Using ensurePosixPath
like this:
const staticAssetsFolder = ensurePosixPath(path.join(getPaths().web.base, 'public'))
Changed the path from
C:\Users\tobbe\dev\redwood\rw20-2\web\public
to
/c/Users/tobbe/dev/redwood/rw20-2/web/public
But that actually made it worse. Now msw
doesn't work anymore.
What I did find out however, is that if I run StoryBook without specifying a config dir it starts!
$ node_modules/.bin/start-storybook --port 7910 --no-version-updates --ci --static-dir /c/Users/tobbe/dev/redwood/rw20-2/web/public
node_modules/.bin
info @storybook/react v5.3.19
info
info => Loading static files from: C:\Users\tobbe\dev\redwood\rw20-2\web\public .
info => Loading presets
info => Loading presets
info => Using default Webpack setup.
info => Using base config because react-scripts is not installed.
webpack built ed91b445fa582d4a1add in 6263ms
╭────────────────────────────────────────────────────╮
│ │
│ Storybook 5.3.19 started │
│ 7.68 s for manager and 7.11 s for preview │
│ │
│ Local: http://localhost:7910/ │
│ On your network: http://192.168.8.101:7910/ │
│ │
╰────────────────────────────────────────────────────╯
Don't know if it helps or not, but here's my entire Storybook config
sbConfig = {
"mode": "development",
"bail": false,
"devtool": "#cheap-module-source-map",
"entry": [
"C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\@storybook\\core\\dist\\server\\common\\polyfills.js",
"C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\@storybook\\core\\dist\\server\\preview\\globals.js",
"C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\@redwoodjs\\core\\config\\storybook\\preview.js",
"C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\@redwoodjs\\core\\config\\storybook\\generated-entry.js",
"C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\webpack-hot-middleware\\client.js?reload=true&quiet=true"
],
"output": {
"path": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\@storybook\\core\\dist\\public",
"filename": "[name].[hash].bundle.js",
"publicPath": "",
"pathinfo": false
},
"plugins": [
{
"_staticModules": {
"C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\@redwoodjs\\core\\config\\storybook\\generated-entry.js": "\n import { configure } from '@storybook/react';\n module._StorybookPreserveDecorators = true;\n\n configure([require.context('C:\\Users\\tobbe\\dev\\redwood\\rw193\\web\\src', true, /^\\.\\/(?:(?:|[\\\\/]|(?:(?:(?!(?:|[\\\\/])\\.).)*?)[\\\\/])(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(tsx|jsx|js))$/)\n ], module);\n "
}
},
{
"options": {
"template": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\@storybook\\core\\dist\\server\\templates\\index.ejs",
"templateContent": false,
"filename": "iframe.html",
"hash": false,
"inject": false,
"scriptLoading": "blocking",
"compile": true,
"favicon": false,
"minify": {
"collapseWhitespace": true,
"removeComments": true,
"removeRedundantAttributes": true,
"removeScriptTypeAttributes": false,
"removeStyleLinkTypeAttributes": true,
"useShortDoctype": true
},
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"chunksSortMode": "none",
"meta": {},
"base": false,
"title": "Webpack App",
"xhtml": false,
"alwaysWriteToDisk": true
},
"version": 4
},
{
"definitions": {
"process.env": {
"NODE_ENV": "\"development\"",
"NODE_PATH": "\"\"",
"PUBLIC_URL": "\".\""
},
"NODE_ENV": "\"development\""
}
},
{
"nodeModulesPath": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\web\\node_modules"
},
{
"options": {},
"fullBuildTimeout": 200,
"requestTimeout": 10000
},
{
"options": {},
"logger": {},
"pathCache": {},
"fsOperations": 0,
"primed": false
},
{
"profile": false,
"modulesCount": 500,
"showEntries": false,
"showModules": true,
"showActiveModules": true
},
{
"definitions": {}
},
{
"resourceRegExp": {}
},
{
"definitions": {
"React": "react",
"PropTypes": "prop-types",
"gql": "graphql-tag",
"mockGraphQLQuery": [
"@redwoodjs/testing",
"mockGraphQLQuery"
],
"mockGraphQLMutation": [
"@redwoodjs/testing",
"mockGraphQLMutation"
]
}
},
{
"definitions": {
"__REDWOOD__": "true",
"__REDWOOD__API_PROXY_PATH": "\"/.redwood/functions\""
}
},
{
"definitions": {}
}
],
"module": {
"rules": [
{
"oneOf": [
{
"test": [
{},
{},
{},
{}
],
"use": [
{
"loader": "url-loader",
"options": {
"limit": "10000",
"name": "static/media/[name].[hash:8].[ext]"
}
}
]
},
{
"test": {},
"exclude": {},
"use": {
"loader": "babel-loader"
}
},
{
"test": {},
"loader": "svg-react-loader"
},
{
"test": {},
"loader": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": true,
"importLoaders": 0,
"modules": {
"localIdentName": "[path][name]__[local]--[hash:base64:5]"
}
}
}
]
},
{
"test": {},
"loader": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": true,
"importLoaders": 0
}
}
],
"sideEffects": true
},
{
"test": {},
"loader": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": true,
"importLoaders": 1,
"modules": {
"localIdentName": "[path][name]__[local]--[hash:base64:5]"
}
}
},
"sass-loader"
]
},
{
"test": {},
"loader": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": true,
"importLoaders": 1
}
},
"sass-loader"
],
"sideEffects": true
},
{
"test": {},
"loader": "file-loader",
"options": {
"name": "static/media/[name].[hash:8].[ext]"
}
}
]
}
]
},
"resolve": {
"extensions": [
".ts",
".tsx",
".js",
".jsx",
".json"
],
"modules": [
"node_modules"
],
"alias": {
"babel-runtime/core-js/object/assign": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\core-js\\es\\object\\assign.js",
"react": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\react",
"react-dom": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\react-dom",
"@redwoodjs/router$": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\node_modules\\@redwoodjs\\testing\\dist\\MockRouter.js",
"~__REDWOOD__USER_ROUTES_FOR_MOCK": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\web\\src\\Routes.js",
"~__REDWOOD__USER_WEB_SRC": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\web\\src",
"~__REDWOOD__USER_WEB_DEFAULT_CSS": "C:\\Users\\tobbe\\dev\\redwood\\rw193\\web\\src\\index.css"
}
},
"optimization": {
"removeAvailableModules": false,
"removeEmptyChunks": false,
"splitChunks": false
},
"performance": {
"hints": false
}
}
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'],
🎉
PR incoming!
Im experiencing a lot of problems as well on windows with the same exact setup i have on Mac. Git bash as well is not helping ( i thought it was just some path problem, already lost 2 hours on this ). Is there a storybook minimal example for windows somewhere? at work we even have windows servers, cannot push to be adopted storybook like this ( used in previous companies and everything was good, working on a POC for this reason ).
Hi @mastrobardo Sorry to hear you're running into problems. Could you open a new issue that includes examples, errors, and your windows setup? We do have Windows users that are able to run Storybook successfully. We'll just need more information about your case to better diagnose.
Also, if you haven't yet gone through the related Tutorial sections or Redwood Docs, those might be of help:
On a fresh install of RW 0.15.3, when I try to run storybook I get the following output
Looking in my node_modules folder I can't find the
generated-entry.js
file at all There's something funky going on withedwood♂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...