question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NPM packages with subfolders don't work?

See original GitHub issue

Trying to include an NPM package with a vendor subfolder, (zipjs-browserify), generates the following error when loading the page in the browser :

Error: Cannot find module ‘zipjs-browserify/vendor/zip’ from ‘zipjs-browserify/index.js’

I’ve create a separate projet without brunch and included zips-browserify manually, it works straight out so I don’t think the issue is with zipjs-browserify.

When looking at the compiled file, I can see code from zipjs-browserify/index.js but no code from the files that are in zipjs-browserify/vendor.

If I add node_modules/zipjs-browserify/vendor to the watched list, the error disappear but I get a new one : ReferenceError: Can't find variable: __dirname (__dirname is used by zipjs-browserify). I think this one is out of scope.

One more thing that may be important : zipjs-browserify is not called directly from my code but from another library (ip-extract-info).

So, do I need to manually add every subfolder of each NPM modules ?

Environment

  1. Brunch: clone from master (@89f71d1)
  2. Node: 7.3.0
  3. NPM: 3.10.10
  4. Operating system: Mac 10.12.1

package.json contents

{
  "dependencies": {
    "clean-css-brunch": "^2.0.0",
    "ipa-extract-info": "^1.2.2",
    "javascript-brunch": "^2.0.0",
    "sass-brunch": "^2.9.0",
    "util": "^0.10.3",
    "zipjs-browserify": "^1.0.1"
  },
  "devDependencies": {
    "admin-on-rest": "^0.6.1"
  }
}

brunch config contents

exports.config = {
  paths: {
    'public': 'web',
    'watched': ['app/Resources/front']
  },
  files: {
    javascripts: {
      joinTo: {
        'js/app.js': /^app/,
        'js/vendor.js': /^(?!app)/
      }
    },
    stylesheets: {
      joinTo: {
        'css/vendor.css': /^(?!app)|app\/Resources\/front\/scss\/base/,
        'css/admin.css': /^app\/Resources\/front\/scss\/admin/,
        'css/download.css': /^app\/Resources\/front\/scss\/download/
      }
    }
  },
  conventions: {
    ignored: [
      /\/_/ // File beginning by "_" like _settings.scss
    ],
    assets: /^app\/Resources\/front\/assets/
  },
  plugins: {
    sass: {
      allowCache: true
    },
    cleancss: {
      keepSpecialComments: 0,
      removeEmpty: true
    }
  }
};

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:2
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
jeffreymaracommented, Jun 8, 2017

Interesting. I am experiencing the same issue as wassafr

1reaction
IvanSanchezcommented, Mar 1, 2017

I tried to reproduce this at https://github.com/IvanSanchez/brunch-bug-1618 , with

var center = require('@turf/center');

but Brunch works as expected.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Import from subfolder of npm package - Stack Overflow
I create subfolders with ES6 source code in the root of the project and publish those dirs to NPM, but I guess this...
Read more >
Subfolders as Dependencies - Gleb Bahmutov
Use subfolders installed as NPM dependencies to avoid long relative paths in require. ... Imagine an NPM project when one file requires another ......
Read more >
folders - npm Docs
When it is not set, it uses the root of the current package, or the current working directory if not in a package...
Read more >
What is the best way to run npm install for nested folders
If you want to run a single command to install npm packages in nested subfolders, you can run a script via npm and...
Read more >
How to support subpath imports using React+Rollup+Typescript
This post documents the steps taken to build a hybrid NPM package ... This tutorial will present how we get subfolder import working...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found