NODE_PATH does not work with isBabelLoader8

[MrHen]

Describe the bug

I have a docker set up to install node_modules somewhere completely unrelated to my source folder. If I set NODE_PATH='../../../modules/node_modules' before starting storybook I get an error similar to the following:

> reporting-client@0.1.0 storybook /opt/centriam/reporting-client
> NODE_PATH='../../../modules/node_modules' start-storybook -p 9009 -s public --ci

info @storybook/react v5.0.6
info 
info => Loading static files from: /opt/centriam/reporting-client/public .
info => Loading presets
info => Loading presets

WARN Broken build, fix the error below.
WARN You may need to refresh the browser.

ERR! Error: Cannot find module 'babel-loader/package.json' from '/opt/centriam/reporting-client'
ERR!     at module.exports (/modules/node_modules/resolve/lib/sync.js:58:15)
ERR!     at isBabelLoader8 (/modules/node_modules/@storybook/core/dist/server/utils/load-custom-babel-config.js:68:52)
ERR!     at _default (/modules/node_modules/@storybook/core/dist/server/utils/load-custom-babel-config.js:88:10)
ERR!     at Object.babel (/modules/node_modules/@storybook/core/dist/server/common/common-preset.js:19:45)
ERR!     at accumulationPromise.then.newConfig (/modules/node_modules/@storybook/core/dist/server/presets.js:74:72)
ERR!     at <anonymous>
ERR!  { Error: Cannot find module 'babel-loader/package.json' from '/opt/centriam/reporting-client'
ERR!     at module.exports (/modules/node_modules/resolve/lib/sync.js:58:15)
ERR!     at isBabelLoader8 (/modules/node_modules/@storybook/core/dist/server/utils/load-custom-babel-config.js:68:52)
ERR!     at _default (/modules/node_modules/@storybook/core/dist/server/utils/load-custom-babel-config.js:88:10)
ERR!     at Object.babel (/modules/node_modules/@storybook/core/dist/server/common/common-preset.js:19:45)
ERR!     at accumulationPromise.then.newConfig (/modules/node_modules/@storybook/core/dist/server/presets.js:74:72)
ERR!     at <anonymous>
ERR!   stack: 'Error: Cannot find module \'babel-loader/package.json\' from \'/opt/centriam/reporting-client\'\n    at module.exports (/modules/node_modules/resolve/lib/sync.js:58:15)\n    at isBabelLoader8 (/modules/node_modules/@storybook/core/dist/server/utils/load-custom-babel-config.js:68:52)\n    at _default (/modules/node_modules/@storybook/core/dist/server/utils/load-custom-babel-config.js:88:10)\n    at Object.babel (/modules/node_modules/@storybook/core/dist/server/common/common-preset.js:19:45)\n    at accumulationPromise.then.newConfig (/modules/node_modules/@storybook/core/dist/server/presets.js:74:72)\n    at <anonymous>',
ERR!   code: 'MODULE_NOT_FOUND' }

I think I've tracked down the problem to here: https://github.com/storybooks/storybook/blob/master/lib/core/src/server/utils/load-custom-babel-config.js#L52

There is a cwd call that assumes babel-loader will be installed somewhere near the current directory. This appears to ignore NODE_PATH completely and, therefore, it cannot find babel-loader.

If I use npm link to create a symlink to the actual location of babel-loader then storybook loads up fine. This isn't tenable in my environment but it does seem to confirm the issue.

I have to use such a strange NODE_PATH because of quirks involving Docker volumes and facebook/create-react-app#6021.

To Reproduce
Set NODE_PATH to a location not near the current working directory (e.g., three directories above package.json and attempt to start storybook using npm run storybook.

Expected behavior
storybook should respect NODE_PATH when checking for babel-loader.

Code snippets

package.json:

  "name": "reporting-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "@mdi/font": "^3.5.95",
    "@mdi/js": "^3.5.95",
    "@mdi/react": "^1.1.0",
    "axios": "^0.18.0",
    "codemirror": "^5.45.0",
    "joi": "^14.3.1",
    "js-cookie": "^2.2.0",
    "js-uuid": "0.0.6",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "prop-types": "^15.7.2",
    "query-string": "^6.4.2",
    "react": "^16.8.4",
    "react-codemirror2": "^5.1.0",
    "react-datepicker": "^2.2.0",
    "react-dom": "^16.8.4",
    "react-grid-layout": "^0.16.6",
    "react-moment-proptypes": "^1.6.0",
    "react-redux": "^6.0.1",
    "react-router-dom": "^4.3.1",
    "react-router-prop-types": "^1.0.4",
    "react-scripts": "2.1.8",
    "react-virtualized-select": "^3.1.3",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "victory": "^32.1.0"
  },
  "scripts": {
    "start": "NODE_PATH='../../../modules/node_modules' react-scripts start",
    "build": "NODE_PATH='../../../modules/node_modules' react-scripts build",
    "lint": "eslint . --report-unused-disable-directives --quiet",
    "test": "NODE_PATH='../../../modules/node_modules' react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "NODE_PATH='../../../modules/node_modules' start-storybook -p 9009 -s public --ci",
    "build-storybook": "NODE_PATH='../../../modules/node_modules' build-storybook -s public --ci"
  },
  "eslintConfig": {
    "extends": "react-app",
    "settings": {
      "react": {
        "version": "latest"
      }
    }
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@storybook/addon-actions": "^5.0.6",
    "@storybook/addon-links": "^5.0.6",
    "@storybook/addons": "^5.0.6",
    "@storybook/react": "^5.0.6",
    "babel-loader": "8.0.5",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-filenames": "^1.3.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-lodash": "^5.1.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-unicorn": "^6.0.1"
  }
}

---

Dockerfile:

FROM node:8-stretch
RUN apt-get update && \
    apt-get upgrade -y && \
    apt-get install -y \
        supervisor \
        awscli \
        jq \
    && \
    rm -rf /var/lib/apt/lists/*

RUN mkdir -p /opt/centriam/logs
RUN touch /opt/centriam/logs/supervisord.log

######
# This is a node_modules hack to workaround docker-compose volume quirks
# https://github.com/docker/compose/issues/4934
# https://github.com/docker/compose/issues/2127
#
# We need to run npm install from inside the container and it has far
# fewer problems when running during image build.

# Create a separate location for node_modules
WORKDIR /modules
# Add this location to the NODE_PATH
ENV NODE_PATH /modules/node_modules
# Install using package.json (will break any local dependency references)
COPY package.json .
COPY package-lock.json .

RUN npm install --progress=false --loglevel=notice
# Add .bin to PATH to enable npm run scripts
ENV PATH $PATH:/modules/node_modules/.bin

ARG APP_ENV
ENV APP_ENV ${APP_ENV:-"local"}

ARG APP_ROLE
ENV APP_ROLE ${APP_ROLE:-"client"}

ARG APP_VERSION
ENV APP_VERSION ${APP_VERSION:-"0"}

ARG APP_BUILD_DATE
ENV APP_BUILD_DATE ${APP_BUILD_DATE:-"1970-01-01T00:00:00Z"}

ARG GIT_COMMIT_SHA
ENV GIT_COMMIT ${GIT_COMMIT}

WORKDIR /opt/centriam/reporting-client
COPY . /opt/centriam/reporting-client

ENTRYPOINT ["/opt/centriam/reporting-client/docker-start.sh"]
CMD ["start"]

docker-start.sh uses supervisord to run /usr/local/bin/npm run storybook.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[MrHen]

I wouldn't mind trying to send a PR out that addresses this but I wouldn't be able to confirm that a fix works with excepted workflows. Are there suitable configuration / integration tests?

[shilman]

cc @ndelangen

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[MrHen]

I'm definitely still interested in getting this fixed. I'll start working on something and submit a PR but it will probably be a few weeks before I'll have dedicated time for it.

[ndelangen]

@MrHen let me know if you have time to pair on this at some point?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[MrHen]

I longer use this pattern and don't need to fix the issue. I never got the time to look into fixing it. 😢

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!