Custom directory for package.json/node_modules produces error

[joerodrig]

I'm currently working on a Rails project where it's necessary that package.json and our node_modules folder is in /vendor. I believe this requirement is breaking the styleguidist scripts and can't seem to find a way to work around it. Is there anyway to set a custom node directory outside of the root folder?

The error I receive from running
npm run styleguide-server or npm run styleguide-build from within my /vendor folder looks like:

➜  vendor git:(react-styleguidist) npm run styleguide-build

> @ styleguide-build /Users/Joe/Documents/demo-webpacker-react/vendor
> styleguidist build --config ../config/webpack/styleguide.js

/Users/Joe/Documents/demo-webpacker-react/vendor/node_modules/react-styleguidist/bin/styleguidist.js:28
		throw err;
		^

Error: not found
    at Function.module.exports.sync (/Users/Joe/Documents/demo-webpacker-react/vendor/node_modules/findup/index.js:94:9)
    at validateDependencies (/Users/Joe/Documents/demo-webpacker-react/vendor/node_modules/react-styleguidist/scripts/config.js:187:43)
    at getConfig (/Users/Joe/Documents/demo-webpacker-react/vendor/node_modules/react-styleguidist/scripts/config.js:80:2)
    at Object.<anonymous> (/Users/Joe/Documents/demo-webpacker-react/vendor/node_modules/react-styleguidist/bin/styleguidist.js:17:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)

My npm-debug.log contains:

0 info it worked if it ends with ok
1 verbose cli [ '/Users/Joe/.nvm/versions/node/v6.9.1/bin/node',
1 verbose cli   '/Users/Joe/.nvm/versions/node/v6.9.1/bin/npm',
1 verbose cli   'run',
1 verbose cli   'styleguide-build' ]
2 info using npm@3.10.8
3 info using node@v6.9.1
4 verbose run-script [ 'prestyleguide-build',
4 verbose run-script   'styleguide-build',
4 verbose run-script   'poststyleguide-build' ]
5 info lifecycle @~prestyleguide-build: @
6 silly lifecycle @~prestyleguide-build: no script for prestyleguide-build, continuing
7 info lifecycle @~styleguide-build: @
8 verbose lifecycle @~styleguide-build: unsafe-perm in lifecycle true
9 verbose lifecycle @~styleguide-build: PATH: /Users/Joe/.nvm/versions/node/v6.9.1/lib/node_modules/npm/bin/node-gyp-bin:/Users/Joe/Documents/demo-webpacker-react/vendor/node_modules/.bin:/Users/Joe/.gem/ruby/2.3.3/bin:/Users/Joe/.rubies/ruby-2.3.3/lib/ruby/gems/2.3.0/bin:/Users/Joe/.rubies/ruby-2.3.3/bin:/usr/local/sbin:/Users/Joe/.nvm/versions/node/v6.9.1/bin:/usr/local/heroku/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
10 verbose lifecycle @~styleguide-build: CWD: /Users/Joe/Documents/demo-webpacker-react/vendor
11 silly lifecycle @~styleguide-build: Args: [ '-c',
11 silly lifecycle   'styleguidist build --config ../config/webpack/styleguide.js' ]
12 silly lifecycle @~styleguide-build: Returned: code: 1  signal: null
13 info lifecycle @~styleguide-build: Failed to exec styleguide-build script
14 verbose stack Error: @ styleguide-build: `styleguidist build --config ../config/webpack/styleguide.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/Users/Joe/.nvm/versions/node/v6.9.1/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/Users/Joe/.nvm/versions/node/v6.9.1/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid @
16 verbose cwd /Users/Joe/Documents/demo-webpacker-react/vendor
17 error Darwin 16.4.0
18 error argv "/Users/Joe/.nvm/versions/node/v6.9.1/bin/node" "/Users/Joe/.nvm/versions/node/v6.9.1/bin/npm" "run" "styleguide-build"
19 error node v6.9.1
20 error npm  v3.10.8
21 error code ELIFECYCLE
22 error @ styleguide-build: `styleguidist build --config ../config/webpack/styleguide.js`
22 error Exit status 1
23 error Failed at the @ styleguide-build script 'styleguidist build --config ../config/webpack/styleguide.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the  package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     styleguidist build --config ../config/webpack/styleguide.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Currently my folder structure looks like this:

...
|/config
|--/webpack
|----styleguide.js
|/vendor
|--/node_modules
|--package.json
|--yarn.lock

My package.json file looks like this:

{
  "scripts": {
    "styleguide-server": "styleguidist server --config ../config/webpack/styleguide.js",
    "styleguide-build": "styleguidist build --config ../config/webpack/styleguide.js"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-latest": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "coffee-loader": "^0.7.2",
    "coffee-script": "^1.12.3",
    "path-complete-extname": "^0.1.0",
    "rails-erb-loader": "^3.2.0",
    "react-styleguidist": "^4.6.3",
    "webpack": "beta",
    "webpack-dev-server": "beta",
    "webpack-merge": "^2.6.1"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }
}

My styleguide config looks like this:

• config/webpack/styleguide.js.

const path = require('path');

module.exports = {
 title: 'My Great Style Guide',
 components: '../../app/javascript/**/*.js',
 updateWebpackConfig(webpackConfig) {
   // Your source files folder or array of folders, should not include node_modules
   const dir = path.join(__dirname, '../../app/javascript/');
   webpackConfig.module.loaders.push(
     {
       test: /\.jsx?$/,
       include: dir,
       loader: 'babel-loader',
       options: {
         presets: [
           'react',
           [ 'latest', { 'es2015': { 'modules': false } } ]
         ]
       }
     }
   );
   return webpackConfig;
 },
};

• Webpack version: beta
• Reproducible demo: demo styleguidist project.

Issue can be reproduced by this commit: joerodrig/demo-webpacker-react@6e6e012

[n1313]

This is an unusual structure for a project. Would symlinks help?

[joerodrig]

@n1313 This appears to be the decided directory structure that is going to be used within Rails in the 5.1 release unless something major changes(rails/webpacker#72). I've tried using symlinks with some success, but then I realized that I was ultimately just symlinking my entire vendor folder to the root directory to get things working. I'm sure this is just an edge case as most apps will have package.json/node_modules in the root directory, but if support for custom node_module directories is on the radar(if that's actually what the problem is), it'd help us people locked into Rails!

[sapegin]

If that‘s a common file structure for Rails projects it worth trying to fix ;-) Although it‘ll require some investigation ;-)

1. Have you tried React Styleguidist 5.x beta?
2. Have you tried to put style guide config near package.json?

[joerodrig]

I was able to resolve this issue by moving my config to /vendor/config/webpack/styleguide.js. I believe the issue was related to this line. The findup method previously had no way of ever finding the package.json file, which ended up producing the error here I'll look more into what's in the 5.x beta and see if I can contribute in some way!

[sapegin]

I can’t reproduce this in 5.x beta. So it’s either already fixed there or I’m doing something wrong. So closing this for now.