how to resolve absolute imports?

[JuniorAlbuquerque]

in build the files imported with absolute are being generated like this

import { Colors, ThemeKey } from '@/styles/themes/types';

Any idea how this can be resolved?

[rschristian]

Are you setting the --alias flag?

Edit: You could do something like this I believe:

$ ROOT=$PWD microbundle build ... --alias @=$ROOT

[JuniorAlbuquerque]

Hi, thank's for the response!

I tried to use the alias, but without success, now I get an error when trying to import the file

$ microbundle --no-compress --format modern,cjs --alias @=$pwd/src
Error: Could not load /src/utils/strings

[rschristian]

It'd help if you could provide a reproduction.

[JuniorAlbuquerque]

Thank you very much for your help!

I created a project that reproduces the problem.

https://github.com/JuniorAlbuquerque/microbundle-react-lib-example/blob/main/package.json

I created two scripts,

 yarn build

that generated the dist, but without resolving the absolute import

// Text.types.d.ts
import { SomeType } from "@/types";
export type TextType = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span';
export type TextProps = {
    renderAs: TextType;
    text: SomeType;
};

and the script:

yarn build:alias

with the --alias flag it gives me the import error

Error: Could not load /src/utils/strings (imported by src/components/Text/Text.component.tsx): ENOENT: no such file or directory, open '/src/utils/strings'

[rschristian]

So there's a few issues here:

• You've swapped $pwd for the recommended $PWD
  • These are different things! Environment Variables are case sensitive. Swap that to $PWD please and it'll work.
  • As $pwd is non-existent, your alias resolves to <empty>/src, aka, /src. This is what your error messages were trying to tell you.
• TS is it's own beast
  • We use rollup-plugin-typescript2 to do TS transforms, and, from what I can tell, they've chosen not to support using path aliases like this as it's something TS itself seemingly doesn't support and might even be considered misuse of the paths feature.
• You're not setting the JSX transform
  • You haven't ran into this one yet, but Microbundle defaults to h as the JSX pragma. As you're using React, and I don't spot any import React from 'react' statements, I'm guessing you're intending to use the runtime JSX transform. If so, you'll want to append the following to your build command: --jsxImportSource react. This will ensure your JSX is properly transformed to the target you intend.

Hope this helps!

[JuniorAlbuquerque]

Thanks for the help, indeed the $pwd was wrong, and the capitalization worked.
About TS, I will test other approaches and the use of rollup-plugin-typescript2.
And thanks for pointing out the use of react flags in the script for transform JSX.

Thank you so much, Best regards.

[rschristian]

Good luck! Certainly feel free to comment here if you run into any further issues.