Pasha Craydon

Recent Posts

Debugging npm issues in webpack

I setup webpack at my company so I am often asked to debug issues other devs have with npm packages. My debug strategy is pretty straightforward;

  • Ask for a stacktrace of the error
  • Follow it from the bottom to the top

As an example, lets look at this stacktrace I was given.

  ```ERROR in ./~/language-tags/lib/index.js
  Module not found: Error: Cannot resolve module 'language-subtag-registry/data/json/index' in /heron-docker/node_modules/language-tags/lib
  resolve module language-subtag-registry/data/json/index in /heron-docker/node_modules/language-tags/lib
    looking for modules in /heron-docker/static/js
      /heron-docker/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules/sbo-nest/nest/static/js
      /heron-docker/node_modules/sbo-nest/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules
      resolve 'file' or 'directory' data/json/index in /heron-docker/node_modules/language-subtag-registry
        resolve file
          /heron-docker/node_modules/language-subtag-registry/data/json/index.js doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/index doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/index.jsx doesn't exist
        resolve directory
          /heron-docker/node_modules/language-subtag-registry/data/json/index doesn't exist (directory default file)
          /heron-docker/node_modules/language-subtag-registry/data/json/index/package.json doesn't exist (directory description file)
  [/heron-docker/static/js/language-subtag-registry]
  [/heron-docker/node_modules/sbo-nest/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/node_modules/language-subtag-registry/data/json/index.js]
  [/heron-docker/node_modules/language-subtag-registry/data/json/index]
  [/heron-docker/node_modules/language-subtag-registry/data/json/index.jsx]
   @ ./~/language-tags/lib/index.js 14:12-63
  ERROR in ./~/language-tags/lib/index.js
  Module not found: Error: Cannot resolve module 'language-subtag-registry/data/json/registry' in /heron-docker/node_modules/language-tags/lib
  resolve module language-subtag-registry/data/json/registry in /heron-docker/node_modules/language-tags/lib
    looking for modules in /heron-docker/static/js
      /heron-docker/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules/sbo-nest/nest/static/js
      /heron-docker/node_modules/sbo-nest/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules
      resolve 'file' or 'directory' data/json/registry in /heron-docker/node_modules/language-subtag-registry
        resolve file
          /heron-docker/node_modules/language-subtag-registry/data/json/registry doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/registry.js doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/registry.jsx doesn't exist
        resolve directory
          /heron-docker/node_modules/language-subtag-registry/data/json/registry doesn't exist (directory default file)
          /heron-docker/node_modules/language-subtag-registry/data/json/registry/package.json doesn't exist (directory description file)
  [/heron-docker/static/js/language-subtag-registry]
  [/heron-docker/node_modules/sbo-nest/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/node_modules/language-subtag-registry/data/json/registry]
  [/heron-docker/node_modules/language-subtag-registry/data/json/registry.js]
  [/heron-docker/node_modules/language-subtag-registry/data/json/registry.jsx]
   @ ./~/language-tags/lib/index.js 15:15-69
  ERROR in ./~/language-tags/lib/index.js
  Module not found: Error: Cannot resolve module 'language-subtag-registry/data/json/macrolanguage' in /heron-docker/node_modules/language-tags/lib
  resolve module language-subtag-registry/data/json/macrolanguage in /heron-docker/node_modules/language-tags/lib
    looking for modules in /heron-docker/static/js
      /heron-docker/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules/sbo-nest/nest/static/js
      /heron-docker/node_modules/sbo-nest/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules
      resolve 'file' or 'directory' data/json/macrolanguage in /heron-docker/node_modules/language-subtag-registry
        resolve file
          /heron-docker/node_modules/language-subtag-registry/data/json/macrolanguage doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/macrolanguage.js doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/macrolanguage.jsx doesn't exist
        resolve directory
          /heron-docker/node_modules/language-subtag-registry/data/json/macrolanguage doesn't exist (directory default file)
          /heron-docker/node_modules/language-subtag-registry/data/json/macrolanguage/package.json doesn't exist (directory description file)
  [/heron-docker/static/js/language-subtag-registry]
  [/heron-docker/node_modules/sbo-nest/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/node_modules/language-subtag-registry/data/json/macrolanguage]
  [/heron-docker/node_modules/language-subtag-registry/data/json/macrolanguage.js]
  [/heron-docker/node_modules/language-subtag-registry/data/json/macrolanguage.jsx]
   @ ./~/language-tags/lib/index.js 108:6-65
  ERROR in ./~/language-tags/lib/index.js
  Module not found: Error: Cannot resolve module 'language-subtag-registry/data/json/meta' in /heron-docker/node_modules/language-tags/lib
  resolve module language-subtag-registry/data/json/meta in /heron-docker/node_modules/language-tags/lib
    looking for modules in /heron-docker/static/js
      /heron-docker/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules/sbo-nest/nest/static/js
      /heron-docker/node_modules/sbo-nest/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules
      resolve 'file' or 'directory' data/json/meta in /heron-docker/node_modules/language-subtag-registry
        resolve file
          /heron-docker/node_modules/language-subtag-registry/data/json/meta doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/meta.js doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/meta.jsx doesn't exist
        resolve directory
          /heron-docker/node_modules/language-subtag-registry/data/json/meta doesn't exist (directory default file)
          /heron-docker/node_modules/language-subtag-registry/data/json/meta/package.json doesn't exist (directory description file)
  [/heron-docker/static/js/language-subtag-registry]
  [/heron-docker/node_modules/sbo-nest/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js/language-subtag-registry]
  [/heron-docker/node_modules/language-subtag-registry/data/json/meta]
  [/heron-docker/node_modules/language-subtag-registry/data/json/meta.js]
  [/heron-docker/node_modules/language-subtag-registry/data/json/meta.jsx]
   @ ./~/language-tags/lib/index.js 141:8-58
  ERROR in ./~/language-tags/lib/Tag.js
  Module not found: Error: Cannot resolve module 'language-subtag-registry/data/json/index' in /heron-docker/node_modules/language-tags/lib
  resolve module language-subtag-registry/data/json/index in /heron-docker/node_modules/language-tags/lib
    looking for modules in /heron-docker/static/js
      /heron-docker/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules/sbo-nest/nest/static/js
      /heron-docker/node_modules/sbo-nest/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/node_modules
      resolve 'file' or 'directory' data/json/index in /heron-docker/node_modules/language-subtag-registry
        resolve file
          /heron-docker/node_modules/language-subtag-registry/data/json/index doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/index.js doesn't exist
          /heron-docker/node_modules/language-subtag-registry/data/json/index.jsx doesn't exist
        resolve directory
          /heron-docker/node_modules/language-subtag-registry/data/json/index/package.json doesn't exist (directory description file)
          /heron-docker/node_modules/language-subtag-registry/data/json/index doesn't exist (directory default file)
    looking for modules in /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/selenium/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js
      /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)
    looking for modules in /heron-docker/.tox/py27/lib/python2.7/site-packages/nest/static/js
      /

This is a problem compiling javaScript with webpack in docker. Looking at the line second to the bottom I can see that it is complaining about a missing file.

  /heron-docker/.tox/qunit/lib/python2.7/site-packages/nest/static/js/language-subtag-registry doesn't exist (module as directory)

Now looking at the first line in the stacktrace, I can see that the npm module language-tags can’t find the file index in language-subtag-registry.

  Module not found: Error: Cannot resolve module 'language-subtag-registry/data/json/index' in /heron-docker/node_modules/language-tags/lib resolve module language-subtag-registry/data/json/index in /heron-docker/node_modules/language-tags/lib

Looking for dependency

My first thought is that language-subtag-registry is a dependency in language-tags. I visit the npm page for language-tags and sure enough, it lists language-subtag-registry as a dependency.

boom

I ask the dev to install language-subtag-registry via npm.

No luck. The dev gets the same error after installing the package via npm.

Reinstall node-modules

Ok, my next thought is that maybe the devs node-modules folder is out of sync for some reason and a good `ol cache clean + reinstall can solve this. I ask the dev to run this command;

  docker-compose run —rm web rm -rf node_modules && npm cache clear && npm install —production

No luck. Dev gets the same error again.

Dig into npm package code on github

At this point I need to really dig into the code and see whats going on here.

The very first line in the stacktrace (ERROR in ./~/language-tags/lib/index.js) tells me where the problem occurs so I visit the github page for language-tags and look for the index.js in the language-tags/lib directory.

I see that the file is importing language-subtag-registry/data/json/index, which exactly matches the error on the second line of the stacktrace, Module not found: Error: Cannot resolve module 'language-subtag-registry/data/json/index' in /heron-docker/node_modules/language-tags/lib. There is a problem importing index.

  var index = require('language-subtag-registry/data/json/index');

language-tags imports language-subtag-registry/data/json/index

I realize index is a JSON file and webpack needs to look for the .json extension, otherwise, it will think it is a .js file. I ask the dev to include .json in the webpack extensions settings.

This solves the problem.