Build storybook produces minified build locally but unminified (and not working) build on the server

[evanhobbs]

For some reason when I build storybook locally:

build-storybook -c src/web/storybook/.config -o .out

it produces a minified bundle that works just fine when I view the static page in the browser. But when run the same command on the server (via a jenkins job) the bundle is unminified and the static sites throw a process.binding is not supported error when I view it in the browser: https://nerdwallet.github.io/js-auth-tools/.

Apologies if this is a bug with my config and not storybook but, as far as I can tell, I'm running the same commands in each. Is there some kind environment issue that might be affecting how the bundle is built (eg minified or not)?

Note: I am using storybook-deployer but as far as I can tell it just runs npm run build-storybook behind the scenes.

[shilman]

@evanhobbs Googling that process.binding error:

facebook/create-react-app#815

Seems like perhaps there is some node dependency that doesn't translate to the browser properly, though it's strange that it's working on your local machine?

And I'm a bit confused, are you using build-storybook or storybook-deployer? And if so, which versions? If the former, I'd encourage you to check out the latest version of @storybook/react. We haven't yet updated storybook-deployer to 3.x @storybook version.

Do you have a public repo I could look at?

[evanhobbs]

@shilman thanks for your response and the link. It lead me to this comment which helped me solve the problem: facebook/create-react-app#1194 (comment). this doesn't appear to be a bug with Storybook but I'll document what the issue was and how I fixed it in case anyone runs into the same issue:

I have an package.json script which runs a shell script (commands lifted from storybook-deployer):

"build-storybook": "build-storybook -c src/web/storybook/.config -o .out",
"deploy-storybook": "./deploy-storybook.sh"

#!/usr/bin/env bash
rm -rf .out
npm run build-storybook
cd .out
git init
git config user.name "GH Pages Bot"
git config user.email "hello@ghbot.com"
git add .
git commit -m "Deploy Storybook to GitHub Pages"
git push --force --quiet git@github.com:XXXX/XXXXX.git master:gh-pages

For some reason when I ran this on my local machine it worked fine but when it ran as part of an automated Jenkins job it produced an unminified javascript bundle which threw a process.binding is not supported error when trying to view it in the browser.

The comment above lead me to check my Jenkins environment variables and see one of them was setting NODE_PATH:

NODE_PATH=/usr/lib/nodejs:/usr/lib/node_modules:/usr/share/javascript

Updating the package.json script above to explicitly set NODE_PATH immediately solved the issue for me:

"deploy-storybook": "NODE_PATH=./node_modules ./deploy-storybook.sh"

Thanks for your help!

[shilman]

Awesome! Glad you got it sorted out! Closing this issue 👍