How can I import a package inside another one

[ValentinH]

I'd like to know how would you do to use a package inside another one. For example, using a function from core-utils inside ui-utils?

[belgattitude]

Here's a reply with an example here #1347. It basically adds the @your-org/core-lib dependency to the @your-org/ui-lib

Interesting parts are:

1. state your new dep, in dependencies (or peerDependencies)

  "dependencies": {
    "@your-org/core-lib": "workspace:^"
  },

2. inform typescript how to resolve it in tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      // First line allows you to resolve `import {}  from "@your-org/core-lib/folder1/subfolder/file"`
      "@your-org/core-lib/*": ["../../../packages/core-lib/src/*"],
      // Second line resolves the barrel. `import {}  from "@your-org/core-lib"` 
      "@your-org/core-lib": ["../../../packages/core-lib/src/index"]
    }
  }
}

PS : Exposing the barrel (index.ts) or the modules exports is preferred if you intend to publish the package...

Let me know if you want more in-depth and hope it will help you

[ValentinH]

Thanks a lot! I actually did this but had an issue with Storybook. However, you probably had it as well and solved it in #1347. This fix was also what I need.

All good now.

Thanks again for maintaining this very cool example!

[belgattitude]

Yep storybook lags a bit. In the the near future I think those tricks won't be needed. I'm really looking forward to v7 and full webpack 5 support.