using private NPM packages

[gracegotlost]

I know this has been asked once in the preview discussion here. I tried the suggestion but got an error, I have my code below:

import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

export default function App() {
  return (
    <Sandpack
      template="react"
      files={{
        "/App.js": `
                       import { A } from "@company/design-system";
                       export default function App() {return (<A />)}
         `,
        "/node_modules/@company/design-system/package.json": JSON.stringify({
          name: "@company/design-system",
          main: "lib/index.js"
        }),
        "/node_modules/@company/design-system/lib/index.js": `
          export { A } from "@company/design-system/src/A"
        `,
      }}
    />
  );
}

and below is the error

/App.js: Could not find dependency: '@company/design-system' relative to '/node_modules/@company/design-system/lib/index.js' (3:0)

  1 | import React from 'react';
  2 | import ReactDOM from 'react-dom';
> 3 | import { Alert } from '@company/design-system';

I'm not sure what path should be inside the index file here: export { A } from "@company/design-system/src/A", also how I can directly import the index file of the private package in here instead of manually export them out again?

Any suggestions are very much appreciated!!

[danilowoz]

Hey, actually there is something wrong in your implementation:

export default function App() {
  return (
    <Sandpack
      template="react"
      files={{
        "/App.js": `import { A } from "@company/design-system";

export default function App() {
  return (<A />)
}`,

        // Dependencies
        "/node_modules/@company/design-system/package.json": JSON.stringify({
          name: "@company/design-system",
          main: "lib/index.js"
        }),
        "/node_modules/@company/design-system/lib/index.js": `
          // Importing a third file
          export { A } from "@company/design-system/src/A" 
        `,

        // Missing file
        "/node_modules/@company/design-system/src/A.js": `
          export const A = () => "A";
        `
      }}
    />
  );
}

Hope it makes clear how dependencies work.