Storybook: CRA .env and NODE_PATH

[gihrig]

Does current Storybook/react support NODE_PATH? - Yes it does. See next entry below.

I see this was implemented in #528, That was merged nearly a year ago, using webpack 1? It's not working for me with current Storybook. The specified NODE_PATH works for CRA and its provided Jest, but storybook complains: Error: Can't resolve 'components/...'

See demo repo here
git clone https://github.com/gihrig/storybook-node-path.git && cd storybook-node-path
yarn
yarn test - CRA Jest all tests pass
yarn start - CRA demo app works as expected
yarn storybook - Error:

ERROR in ./src/components/Header/index.js
Module not found: Error: Can't resolve 'components/H2' in '.../storybook-node-path/src/components/Header'
 @ ./src/components/Header/index.js 11:9-33
 @ ./stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

Step to reproduce:

1. create-react-app storybook-path-test
2. getstorybook
3. Create ./.env containing NODE_PATH=src
4. Create H2 and Header components in ./src/components/, including tests.
5. Modify ./App.js

import Header from 'components/Header';
...
<Header text="Welcome to React"/>

1. Modify ./stories.index.js to include new components.

OS X: 10.11.6
node: 8.2.1
CRA: 1.3.3
Storybook/react: 3.2.3

[gihrig]

My problem came from assuming that because CRA reads and operates on an .env file with NODE_PATH that Storybook should do the same since it reads CRA's webpack.

Using default webpack setup based on "Create React App".

That assumption is wrong: the NODE_PATH environment variable must be set prior to running Storybook. e.g. this, works:

export NODE_PATH=src && yarn storybook

[Lehakos]

@gihrig Why do you close it? It is real bug. I have same error.

[gihrig]

@Lehakos did the solution above not work for you?

You could also set that variable more permanently and forget about it.

I'm not sure CRA failing to share its .env contents with the OS environment is actually a bug, or just a missing feature, but either way it seems to me that this would be a CRA issue, not a Storybook issue.

The dotenv project should work to load CRA's .env contents into the environment, I haven't tried this though.

[Lehakos]

@gihrig NODE_PATH from .env work perfectly when we run yarn start, but not work when we run yarn storybook. But it should be work https://github.com/storybooks/storybook/issues/468

[gihrig]

@Lehakos CRA (yarn start) supports NODE_PATH from an .env file. Storybook (yarn storybook) does not. It seems logical that they should both work the same, but they don't. That confused me in the beginning too.

528 (from #468) provides support for Storybook to read an OS environment var NODE_PATH. This requires that NODE_PATH be set in the OS environment before executing yarn storybook. This is not the same as putting NODE_PATH in the .env file.

If you want Storybook to read environment vars from an .env file, like CRA, that would be a new issue, IMO.

[pauldcollins]

Thanks @gihrig.

Does anyone have an example to implement this? So far I've tried the following steps, but I can't get my absolute path to work:

• Using create-react-app and storybook
• Ejected create-react-app
• In both the webpack.config.dev.js and webpack.config.dev.js files, under resolve, I've added the following line:

root: [path.resolve(__dirname, './src')]

• Starting server with npm run storybook command.

And just in case, I've even added a .env file to the root of the project, with NODE_PATH=src/

I still cannot get my absolute paths to work. Would greatly appreciate any help!

[gihrig]

@pauldcollins Apparently, Storybook only reads from the OS environment, and CRA does not set OS environment vars from it's .env file.

Did you try

export NODE_PATH=src && yarn storybook

If that works, The dotenv project should work to load CRA's .env contents into the environment, I haven't tried this though.

I've even added a .env file to the root of the project, with NODE_PATH=src/

I do not have a trailing /, e.g. NODE_PATH=src

[pauldcollins]

Thanks for your quick reply @gihrig

I tried removing the slash in the .env file, but it didn't work.

Where would I put this line of code? In the .env file or somewhere else?

export NODE_PATH=src && yarn storybook

Thanks again

[gihrig]

Paste that code into the terminal. That should start Storybook with src as a default search path import statements.

[pauldcollins]

That's working now, great stuff! Thanks for your help @gihrig

[soriyath]

.env should work out of the box.