Search code examples
typescriptwebpacklernamonorepo

Configure aliases for webpack with lerna and typescript


I created a repository that shows the issue that I have: https://github.com/vileen/lerna-webpack-typescript-aliases-issue (it won't start the app properly for some reason but it doesn't matter).

Basically the question is how to improve importing from the shared package, even more, to get rid of src part of the import. Or maybe there is a better approach to avoid reexporting?

I tried defining webpack aliases which didn't do anything. What did work was adding "main": "src/index.tsx" to package.json from the shared component but that breaks typescript IntelliSense so it's not a proper solution.

I was thinking about adding definition files, even defining shared module manually but that's not ideal as well since currently I'm able to view the actual code, creating a definition wouldn't bring me that much value and I'd need to update it constantly for every new package.


Solution

  • You need to bundle your code first. It won't work to just pass in the .tsx files. Have a look at this library: https://www.npmjs.com/package/create-react-library

    And yes, if you use typescript you need to make a .d.ts file as well, that says what your consumer can expect to receive.