Tsdx: Absolute imports / TS Paths aliases get treated as externals

[vvav3]

Hi. I am trying to create a small components lib + styleguidist playground.

Playground works fine (it uses webpack), but my build is broken. I created a dist folder, npm pack-ed it, installed locally in another project.

import { Button } from "components-lib";

Module not found: Can't resolve 'components/Button'

My index.ts looks like this:

export { default as Button } from "components/Button";
export { default as Checkbox } from "components/Checkbox";
export { default as Icon } from "components/Icon";
export { default as SideMenu } from "components/SideMenu";

I get no errors during build.

My tsconfig:

{
  "include": ["src", "@types", "test"],
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "importHelpers": true,
    "declaration": true,
    "sourceMap": true,
    "rootDir": "./",
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "*": ["src/*", "node_modules/*"]
    },
    "jsx": "react",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": true,
  }
}

[vvav3]

I also don't see any static assets 😔

// tsdx.config.js
const image = require('@rollup/plugin-image');

module.exports = {
  rollup(config) {
    config.plugins = [
      image({ incude: ['**/*.png', '**/*.jpg', '**/*.svg'] }),
      ...config.plugins,
    ];
    return config;
  },
};

[lpolito]

Module not found: Can't resolve 'components/Button'

This could be related with how externals are configured (which I found recently):
https://github.com/jaredpalmer/tsdx/issues/6#issuecomment-593146533

1. Marks all imports as external if they are not relative / are absolute (seen here).

Try using relative imports, e.g.

export { default as Button } from "./components/Button";
export { default as Checkbox } from "./components/Checkbox";
export { default as Icon } from "./components/Icon";
export { default as SideMenu } from "./components/SideMenu";

Same goes for your static assets, assuming you're importing them.

[vvav3]

Seems to be the case for components, assets (svg) are still missing. Maybe they are included inline in build? Edit: they are

Also how can I fix imports? I tried with aliases and it still didn't work. I don't want to look at '../../'

[lpolito]

Yeah unfortunately the rollup config has a lot to be desired in that way.

For rollup aliases appear to be possible, see: https://github.com/rollup/plugins/tree/master/packages/alias

[vvav3]

Many thanks!

[agilgur5]

Yep as @lpolito said, non-relative imports are treated as externals.

Regarding aliases, you can check out the HOWTO on that at https://github.com/jaredpalmer/tsdx/issues/379#issuecomment-568202209 .

Potentially related, there was a PR for TS paths -> alias support, but the TypeScript team's position is that paths shouldn't be used like that (only for type information and not for aliasing), so it's currently only unofficially supported by various workarounds.
TSDX could have it built-in but I'm not sure that's a rabbit hole worth digging into. There are a lot of issues around it however -- this sounds like a duplicate of #91
Can read more at https://github.com/jaredpalmer/tsdx/pull/374#issuecomment-569369106