CODEWITHSUNDEEP
reactjsvite
hans000
hans000

Reputation: 145

can't support "npm link" added local package in vite-cli

I use the "npm link my-package" to redirect my node_module. But I failed to run successfully with "vite dev". Vite Could not resolve my local private package.

Uncaught TypeError: Cannot set property 'my-package' of undefined.

However, it can work if i use "npm i my-package" from npm server.

OS: windows

Upvotes: 12

Views: 7865

Answers (4)

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83666

Here is an expanded answer from Adam Patterson.

  • I encountered this when I was using git submodule to maintain a patched and bug-fixed NPM package using npm link, instead of installing it with npm install
  • Any configuration changes were only needed with vite dev server, not with SvelteKit node.js adapter
  • Just setting rollupOptions did not seem to be enough for vite and you also may need to whitelist the paths of the linked source packages

Here is a more complete example with all the nuances:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, searchForWorkspaceRoot } from 'vite'


/** @type {import('vite').UserConfig} */
export default defineConfig(({ mode }) => {
    let plugins = [sveltekit()];
    
    const options = {
        // ... your code ...
        plugins,
    }

    // Execute only with Vite.js dev server,
    // as Node.js adapter (production mode) works fine
    if(mode == "development") {

        // Tell vite that there exist a package that it
        // cannot figure itself how to pick u
        options["build"] = {
            rollupOptions: {
                external: ['@org/myfixedpackage']
           } 
        }       

        // Whitelist the package or otherwise you may encounter
        // The request url "/Users/moo/code/.../lib/index.mjs" is outside of Vite serving allow list.
        options["server"] = {
            fs: {
                allow: [
                  // search up for workspace root
                  searchForWorkspaceRoot(process.cwd()),
                  // your custom rules
                  `${process.cwd()}/my-dependency-submodules`,
                ],
              },            
        }
    }

    return options;
});

Upvotes: 0

Thomas Urban
Thomas Urban

Reputation: 5071

I had a similar issue involving npm link used to temporarily use an unpublished version of a locally developed library for testing in a consuming application's project which happens to already use a previously published version of that library.

In my case, setting up optimizeDeps wasn't helping either for the issue wasn't about mixing commonjs with ES modules for all code is implemented as ES modules already.

However, the one sentence in that documentation for Vite's optimizeDeps might be important:

When making changes to the linked dep, restart the dev server with the --force command line option for the changes to take effect.

There is a cache in consuming project's node_modules/.vite/deps folder and in my case using npm link didn't trigger vite to update its cache automatically. If restarting with --force doesn't help either, try it the manual way and stop the dev server, remove all content of node_modules/.vite/deps and then restart the dev server. This was working in my case.

Upvotes: 1

Adam Patterson
Adam Patterson

Reputation: 689

I was having the same issue, and while optimizeDeps.include was recommended it did not work for me.

Initially I ran npm link in my package folder, then npm link editorjs-media --save in my project.

This left me with an entry in package.json like this "@adampatterson/editorjs-media": "file:../_packages/editorjs-media",

Building the project resulted in errors

error during build:
RollupError: "default" is not exported by

Installing from Git worked fine.

What ended up working for me was:

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['@adampatterson/editorjs-media']
    }
  },
  // ... other options ...
});

Upvotes: 2

Tamás Katona
Tamás Katona

Reputation: 833

https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-include

Add this to vite config:

optimizeDeps: {
    include: ['my-package'],
},

Upvotes: 11

Related Questions