How to get watchify working?

[passabilities]

I'm having a hard time figuring out how to get this to work with watchify.

package.json

{
  "scripts": {
    "build": "./node_modules/browserify/bin/cmd.js src/scripts/app.js -o src/scripts/bundle.js",
    "watch": "./node_modules/watchify/bin/cmd.js src/scripts/app.js -o src/scripts/bundle.js -v"
  },
  "browserify": {
    "transform": [
      [
        "babelify", {
          "presets": ["es2015"]
        }
      ],
      "hbsfy",
      [
        "scssify", {
          "autoInject": "verbose"
        }
      ]
    ]
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babelify": "^7.3.0",
    "browsify": "0.0.4",
    "handlebars": "^4.0.6",
    "hbsfy": "^2.7.0",
    "scssify": "^2.2.0",
    "watchify": "^3.7.0"
  }
}

app.js

import 'app/styles/app.scss'

Is there something that needs to be done so the scss files are compiled on chang with watchify?

[cody-greene]

Try adding a ./ to the import. e.g. import './app/styles/app.scss', browserify/node imports that don't begin with a . are resolved relative to node_modules e.g node_modules/app/styles/app.scss. Otherwise, if that was just a typo in your post, can you post the actual error you're seeing?

Also I would recommend shortening your build scripts to something like:

"build": "browserify src/scripts/app.js >dist/bundle.js",
"watch": "watchify -v src/scripts/app.js >dist/bundle.js"

since npm run automatically adds node_modules/.bin the $PATH

[passabilities]

So I actually made a symlink in node_modules so what I have works and compiles but it's not "watching" watching for changes. I was lead to believe that this is supposed to listen for changes to the SCSS files.

[cody-greene]

😢 Works fine for me, even with ln -s ../src node_modules/app

You'll have to find a minimal setup that that can reproduce this for me, something like: (except this works)

// package.json
{
  "name": "tmp",
  "private": true,
  "scripts": {
    "postinstall": "rm -f node_modules/app && ln -s ../src node_modules/app",
    "start": "watchify src/app.js -o bundle.js -v"
  },
  "browserify": {
    "transform": ["scssify"]
  },
  "devDependencies": {
    "scssify": "^2.2.0",
    "watchify": "^3.7.0"
  }
}

// src/app.js
require('app/app.scss')

// src/app.scss
.foo{ color: red }

// $ npm install
> tmp@ postinstall /Users/cody/workspace/tmp
> rm -f node_modules/app && ln -s ../src node_modules/app
// $ npm start
1854 bytes written to bundle.js (0.10 seconds)
// $ touch src/app.scss
1854 bytes written to bundle.js (0.02 seconds)

Maybe by stripping things down you'll find where the problem lies, like babel or another plugin or transform.

[cody-greene]

Have you made any progress on this thing? I'd like to close this out but if I can't reproduce the issue then I can't fix it 😢 A complete minimal project that includes package.json, a js file, a scss file, and the npm start script, would be tremendously helpful.