Storybook fails to boot with TypeError when it can't write to node_modules

[agconti]

Describe the bug
Storybook fails to compile files and start the development server with the following error when its unable to write to the node_modules folder. When it's able to write to the node_modules folder it succeeds.

Error:

storybook_1  | ERR! TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
storybook_1  | ERR!     at validateString (internal/validators.js:118:11)
storybook_1  | ERR!     at Object.join (path.js:1039:7)
storybook_1  | ERR!     at _default (/app/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:148:32)
storybook_1  | ERR!     at Object.managerWebpack (/app/node_modules/@storybook/core/dist/server/manager/manager-preset.js:37:38)
storybook_1  | ERR!     at /app/node_modules/@storybook/core/dist/server/presets.js:261:72
storybook_1  | ERR!  TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
storybook_1  | ERR!     at validateString (internal/validators.js:118:11)
storybook_1  | ERR!     at Object.join (path.js:1039:7)
storybook_1  | ERR!     at _default (/app/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:148:32)
storybook_1  | ERR!     at Object.managerWebpack (/app/node_modules/@storybook/core/dist/server/manager/manager-preset.js:37:38)
storybook_1  | ERR!     at /app/node_modules/@storybook/core/dist/server/presets.js:261:72 {
storybook_1  | ERR!   stack: 'TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined\n' +
storybook_1  | ERR!     '    at validateString (internal/validators.js:118:11)\n' +
storybook_1  | ERR!     '    at Object.join (path.js:1039:7)\n' +
storybook_1  | ERR!     '    at _default (/app/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:148:32)\n' +
storybook_1  | ERR!     '    at Object.managerWebpack (/app/node_modules/@storybook/core/dist/server/manager/manager-preset.js:37:38)\n' +
storybook_1  | ERR!     '    at /app/node_modules/@storybook/core/dist/server/presets.js:261:72',
storybook_1  | ERR!   code: 'ERR_INVALID_ARG_TYPE'
storybook_1  | ERR! }

To Reproduce
Steps to reproduce the behavior:

1. Clone the example github repository that reproduces the error: git clone https://github.com/agconti/storybook-node-modules-in-docker-compose-failure
2. Start the project with docker-compose up
3. See the error in the console on build
4. Navigate to the volume definition in the docker-compose file: https://github.com/agconti/storybook-node-modules-in-docker-compose-failure/blob/master/docker-compose.yaml#L13
5. Comment out the node_modules volume mount. (( this makes node_modules writable ))
6. Restart the project with docker-compose up and see that it succeeds in starting up

Expected behavior
I should be able to start the project without giving write access to my node_modules folder.

Screenshots

Code snippets

version: '3'
services:
  storybook:
    build: .
    restart: always
    command: npm run storybook
    ports:
      - "3000:3000"
    volumes: 
      - .:/app
      # storybook fails to load because it cant create a file here
      # uncomment this link to see it succeed
      - /app/node_modules 

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 13.7.0 - /usr/local/bin/node
    npm: 6.13.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-actions: ^5.3.9 => 5.3.9 
    @storybook/addon-links: ^5.3.9 => 5.3.9 
    @storybook/addons: ^5.3.9 => 5.3.9 
    @storybook/preset-create-react-app: ^1.5.2 => 1.5.2 
    @storybook/react: ^5.3.9 => 5.3.9 

[shilman]

@gaetanmaisse are you looking at this in the context of yarn v2 support?

[agconti]

@shilman thanks for the help!

For some added context here, I'm not using yarn 2, I'm using vanilla npm that comes with Node. You can see that in my Dockerfile. This is just a basic reproduction of how anyone might dockerize storybook.

Do you know why the path variable is undefined in this case?

Please let me know if I can give you any more info that might help!

[shilman]

@agconti I brought up yarn 2 because I believe it also requires immutable node_modules, and we're actively working to support yarn 2 right now. That work could also possibly solve your problem. Just trying to loop into somebody closer to the problem.

[gaetanmaisse]

@shilman you're 💯right, with Yarn 2 dependencies are read-only:

Packages are now kept within their cache archives. For safety and to prevent cache corruptions, those archives are mounted as read-only drives and cannot be modified under normal circumstances

@agconti I'm currently working on making SB compatible with Yarn 2 (#9667), to do so I moved webpack's output from node_modules/@storybook/core/ to node_modules/.cache/storybook/, which is more or less the standard for cache folder and is already use d by other parts of Storybook. So Storybook core package will not write inside itself anymore. However, it will still need to have write access to node_modules/.cache.

In your case, the error is already about node_modules/.cache. We are using find-cache-dir to get Storybook cache directory, this package returns undefined if package.json was never found or if the node_modules directory is unwritable. As Storybook will always need to write things in a cache directory I don't know if you have other choices than make node_modules writable.

[agconti]

@gaetanmaisse thanks for your response!

Unfortunately, I can't make node_modules writable for the sake of things like node_sass who's binding are dependent on the host's operating system. For example, the osx buildings for node_sass that work on my mac won't work in the Linux environment of my docker container when I try to run storybook through compose. Making the node_modules folder read-only prevents those bindings from being overwritten in the container so the correct bindings for node_sass are preserved.

As a workaround I've tried making the directories you specified, node_modules/.cache, node_modules/@storybook/core/ writable, but I'm still running into the same error. I don't think this is a continued problem with find-cache-dir because I can see that the directories are being written to as expected.

Here's the updated commit in my example repo that reproduces this error:
agconti/storybook-node-modules-in-docker-compose-failure@5b5f204

Here's where those directories are made writable:

version: '3'
services:
  storybook:
    build: .
    restart: always
    command: npm run storybook
    ports:
      - "3000:3000"
    volumes: 
      - .:/app
      # storybook fails to load because it cant create a file here
      # uncomment this link to see it succeed
      - /app/node_modules 
      - ./node_modules/.cache:/app/node_modules/.cache
      - ./node_modules/@storybook/core/:/app/node_modules/@storybook/core/

Here's confirmation that files are actually being written to those dirs:

Do you know if I need to make any additional directories writable?

[gaetanmaisse]

I'm a docker newbie so my question is maybe irrelevant but why not use node user during the copy and so it will have write access when running SB? And so there is no need for volumes for the node_modules.

Dockerfile:

...
COPY --chown=node:node . .
...

docker-compose:

version: '3'
services:
  storybook:
    build: .
    restart: always
    command: npm run storybook
    ports:
      - "3000:3000"
    volumes: 
      - .:/app

[agconti]

@gabrielcsapo you're right! that was the problem.

Removing the USER node line from the Dockerfile gave storybook the access to node_modules it needed, even without the additional rw file mounts.

Thanks so much for helping me solve this problem! 💖

[shilman]

Also thanks @gaetanmaisse 😈