Absolute imports with rollup

Question

I'm trying to get imports like

import { startup } from "applicationRoot/renderUI";

to work, from anywhere in my application. I thought the rollup-plugin-alias would be a good fit for this. I tried configuring

alias({
  applicationRoot: "applicationRoot/"
})

in my plugins array. This came close, but the extension is dropped, so I get the error:

c:\path\to\applicationRoot\renderUI doesn't exist.

Adding in

alias({
  resolve: [".js"],
  applicationRoot: "applicationRoot/"
}),

did not change anything.

Answer 1

You can use rollup-plugin-includepaths.

Add this to your Rollup configuration:

import includePaths from 'rollup-plugin-includepaths';

export default {
  ...
  plugins: [
    ...
    includePaths({ paths: ["./"] })
  ]
};

That will tell Rollup to also resolve imports from the root of your application, so things like

import { startup } from "applicationRoot/renderUI";

will appropriately find an applicationRoot folder where it is.

Answer 2

This is not the answer to the original question, but if you are coming here from search results and are using Typescript, you can set the compilerOptions.baseUrl in tsconfig and it will just work.

{
  ...
  compilerOptions: {
    ...
    "baseUrl": "./"
  },
}

Then if you have a file like `src/lib/util.ts' you can import it:

import util from 'src/lib/util'