NX package dependency

[dbani-dev]

What is the best way to include an NX package? For example, including @the-nx-package/ui in customSetup does not fetch the dependency.

<Sandpack
        customSetup={{
          dependencies: {
            '@the-nx-package/ui': '0.0.0',
          },
        }}
        template="react"
        files={{
          '/App.js': `export default function Example() { return <Button>Hello Sandpack</Button> }`,
        }}
      />

Error: Could not fetch dependencies, please try again in a couple seconds

Is there a way around this issue?

[danilowoz]

Hey @davidbani. Is @the-nx-package/ui a private package, or does it come from a different registry?

• Private packages: https://sandpack.codesandbox.io/docs/faq#how-to-load-local-or-private-dependencies;
• Different registry: currently, we only support npm registry to download the dependency tree, but if that's the case, I'm curious to know how we can support NX;

Hope it helps

[dbani-dev]

@danilowoz it would be coming from a local package (as part of an NX monorepo). The local package doesnt seem available thru node_modules.

[danilowoz]

I see, so you need to use this guide to load local dependencies, otherwise Sandpack will try to fetch dependencies from a public registry

[dbani-dev]

@danilowoz Ok, I have added the private dependency locally (node_module). Have I missed something?

<Sandpack
        template="react"
        files={{
          '/App.js': `
          import {Button} from '@package-name/ui'
          export default function Example() { return <Button>Hello Sandpack</Button> }
          `,
          '/node_modules/@package-name/ui/package.json': JSON.stringify({
            name: '@package-name/ui',
            main: './index.js',
          }),
        }}
      />

Error: /App.js: Could not find dependency: '@package-name/ui' relative to '/App.js' (2:10)

[danilowoz]

Hey, we still need to pass the dependency files, not only the package.json:

<Sandpack
  files={{
    "/App.js": APP_CODE,

     // package.json, which will make the dependency recognizable 
    "/node_modules/fake-library/package.json": JSON.stringify({
      name: "fake-library",
      main: "./index.js",
    }),

    // main file of the dependency
    "/node_modules/fake-library/index.js": `module.exports = {
    hello: (name) => "Hello " + name
  }`,

  // other dependencies files, so on...
  }}
  template="react"
/>

We're trying to find out an easier way to inject local dependencies, as the mentioned suggestion is not perfect and requires a lot of maintenance. I'll let you know when you have a proper solution for local dependencies. Meanwhile, this's the way we recommend going for.

[ericmatthys]

Has there been any progress on an easier way of using local dependencies (either unpublished packages or when the workspace:* version is desired for a local dependency rather than the latest)? I'd love to give Sandpack a try but this seems like a blocker for my use case.

[duytan-hoang-eurostar]

@davidbani Did you manage to get this working? Also having the same issue trying to import a local dependency (from a monorepo).

@danilowoz is there a working example for this scenario? Am a little confused by this particular part:

"/node_modules/fake-library/index.js": module.exports = { hello: (name) => "Hello " + name }

Would the dependency implementation not need to be this?

[danilowoz]

I just wrote a new guide on the Sandpack documentation about how to make it work. Feel free to leave any feedback here

https://sandpack.codesandbox.io/docs/guides/local-dependencies

[airtonix]

@danilowoz hey i've got some.

thanks for writing this up.

I think there's some simple improvements that can be made to make what you're trying to communicate extremely obvious.

Be consistently obvious about what artifacts you're referring to

throughout the document you refer to a package by its filepath and its name, but you're not consistent in this reference

Here it's ./design-system/index.ts so assumptions are:

cwd: ./design-system
package name: design-system
main: ./index.ts

Tip

probably define what the assumptions are up front:

 cwd: ./design-system
 package name: @internals/ds
 main: ./index.ts

Then it gets referred to by several different package names:

• @internals/ds
• ./internals/design-system
• @design-system

This part is particularly confusing since question arise like:

• what is @internals ?
  • i know npm considers it a scope, but is this a magical word that sandpack recognises and does something different with? or are you just using this as an example and we can use any other word we like?
• why is it referred to by different package names?
  • in the App.tsx you're importing @internals/ds but it looks like you define a package whose name is actually just @design-system was this intentional? it's hard to tell if this was a mistake or it's something magical about sandpack.

[thibault-mahe]

Hi @danilowoz
i have an odd issue following the local dependencies guide you gave.

I did import the raw build of my DS:

import reactDist from "~/packages/frameworks/react/dist?raw"

and mocked the library in the sandpack files:

files: {
      // ... alll custom files here
      
      '/node_modules/@design-system/react/package.json': {
        hidden: true,
        code: JSON.stringify({
          name: '@design-system/react',
          main: './index.js',
        }),
      },
      '/node_modules/@design-system/react/index.js': {
        hidden: true,
        code: reactDist,
      },
    },

But somehow sandpack tries to find out the dependency inside the mocked package, ignoring that the mocked package is the dependency. I have the following message:

/Checkbox.js: Could not find dependency: '@design-system/react' relative to '/node_modules/@design-system/react/index.js' (1:0)

> 1 | import { Checkbox } from '@design-system/react'
      ^
  2 | 
  3 | export default function App () {
  4 |   <Checkbox>My checkbox</Checkbox>

Here the '@design-system/react' should not be relative to '/node_modules/@design-system/react/index.js' since in the guide you gave the first is an alias of the second, right ?