Posted in Uncategorized

Webpack dependencies fail with npm linked package.

   February 23, 2021  12 Comments on Webpack dependencies fail with npm linked package.

My project depends on a package that works perfectly when installed normally, but when I npm link that package for local development, webpack fails finding dependencies like so:

[14:38:15] Version: webpack 1.5.3
                      Asset     Size  Chunks             Chunk Names
    tcc-ip-client.bundle.js  2690831       0  [emitted]  client
tcc-ip-client.bundle.js.map  3223307       0  [emitted]  client

ERROR in ../blah/src/js/utils/features.js
Module not found: Error: Cannot resolve module 'foobar/src/js/utils/endpoint' in /Users/josephpea/src/blah/src/js/utils
 @ ../blah/src/js/utils/features.js 10:0-109:2

Author: Fantashit

12 thoughts on “Webpack dependencies fail with npm linked package.”

  3. Turning off symlink resolution also makes it so webpack can’t watch for changes in the linked dependency 🙁 Any other solutions?

  4. Actually I’m still having this problem, where I do npm link a-package to another one i’m working on. The symlink works fine but some dependencies inside that linked package don’t get resolved…
    It’s on Webpack”: “4.8.3”.

    Any ideas?

  5. @mesqueeb, I also still experienced this. Tried to play with the symlinks property but it didn’t help.

    What I ended up doing is looking through the node_modules folder, and if a folder was in fact a symlink, I would add the resolved address + node_modules to the modules array.

    For example something like this:

    const path = require('path');
const projectPath = 'full/path/to/project'
const projectNodeModulesPath = path.resolve(projectPath, 'node_modules');
const modules = [ projectNodeModulesPath ];
    
await Promise.all((await fse.readdir(projectNodeModulesPath)).map(async el => {
    const modulePath = path.resolve(projectNodeModulesPath, el);
    if ((await fse.lstat(modulePath)).isSymbolicLink()) {
        const realModulePath = path.resolve(await fse.realpath(modulePath), 'node_modules');
        resolves.push(realModulePath);
    }
}));

  6. Yeah, what I do is usually npm i all dependencies of the package I’m linking to in the package I’m working on. Works like a charm.

    Can we re-open this issue?

  10. This issue should be reopened as it is not properly solved. A module that is linked cannot be debugged with symlinks disabled.

  11. In my case following webpack config worked:
    for development mode – resolve: { modules: [path.resolve("./node_modules")] },
    for production mode – resolve: { symlinks: false, modules: [path.resolve("./node_modules")] }
    Note, I have disabled babel for development and HMR.
    Also my imported module was in ES6 (not transpiled).

  12. @xthilakx that‘s not an option in the case HMR is needed where webpack needs to watch updates inside of the linked package. This is necessary when developing a library together with the client app.

    #811 (comment)

    @fabb I understand that it would be awesome to HMR from the linked package, but you should reconsider your development setup if symlinking packages are the only way for you to develop your lib locally.

Comments are closed.