doesn't work with `rollup-plugin-alias`

[hronro]

I'm using preact and preact-compat.
I don't use react directly in my code, but some of my dependencies are based on react rather than preact, so I need to map react and react-dom to preact-compat.
here is my rollup config:

import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
import alias from 'rollup-plugin-alias';

const config = {
  plugins: [
    nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs({
      include: 'node_modules/**',
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
    }),
    alias({
      react: 'preact-compat',
      'react-dom': 'preact-compat',
    }),
  ]
};

And I got this error when I run rollup:

[!] Error: Could not load preact-compat (imported by ....../node_modules/react-slick/lib/slider.js): ENOENT: no such file or directory, open 'preact-compat'

[newlifeyh]

I think you can have a full path alias, like:

alias({
   react: path.resolve(__dirname, 'node_modules/preact-compat')
})

[allex]

Actually, rollup stoped resolve lifecycle if the importee resolved by any plugin.
i've add alias options for builtin support alias.

import nodeResolve from '@allex/rollup-plugin-node-resolve'
...
 nodeResolve({
  ...
  alias: {
    react: 'preact-compat',
    'react-dom': 'preact-compat'
  }
})
...

[rmacklin]

I just ran into this as well. Having the two plugins not work together means I cannot use rollup-plugin-alias as a replacement for webpack's resolve.alias configuration, so it's making it difficult to switch from webpack to rollup. Does it seems like a reasonable goal to have a a solid replacement in the rollup ecosystem for resolve.alias?

@allex Have you considered opening a PR with your changes?

[lukastaegert]

Just a note if anyone feels up to this: I should not be too difficult to enhance rollup-plugin-alias to further resolve aliases via other plugins. Rollup provides this.resolveId to plugins to do just that. It just takes someone to take the initiative here.

[rmacklin]

@lukastaegert I'm not experienced with rollup plugins but would be interested in helping solve this. Can you share an example of an existing plugin that uses another plugin to further resolve import identifiers? Or if that doesn't exist, is there a general example to follow of how a plugin should call another plugin? That would be helpful in getting started on this.

[lukastaegert]

I am on a trip and only have a phone so I can only give you some pointers for now. Not sure if there are plugins in the wild that use the relatively new resolveId helper on the plugin context. It is documented here: https://rollupjs.org/guide/en#plugin-context

Basically what should happen is that you pass the value the alias stands for to this.resolveId as importee in the plugin. The open question is what you should use as importer. I assume the rollup-plugin-alias is resolving either relative to the current working directory, the rollup config file or the importing file so you could pass the name of a non-existing dummy file at that location. This could also make some custom logic in rollup-plugin-alias obsolete. Here is a very simplified version what this could look like:

export default () => ({
  resolveId(importee, importer) {
    if (importee === someAlias) {
      return this.resolveId(whatTheAliasStandsFor, process.cwd());
    }
    return null;
  }
});

[rmacklin]

Thanks for the pointers! I was having trouble with it because there's logic in rollup-plugin-alias that does not work well with the aliases I am using:

{
  mitt: 'mitt/src',
  'preact-portal': 'preact-portal/src/preact-portal',
  'preact-router': 'preact-router/src'
}

Basically, it would turn an import like
import Router from 'preact-router'
into
import Router from 'preact-router/src'
(correctly), but then it would recurse and turn that into
import Router from 'preact-router/src/src'
and then
import Router from 'preact-router/src/src/src'
and so on.

I was adding code to fix that, but as I got deeper into the code it seemed like rollup-plugin-alias was really meant for aliasing relative path imports, which does not match my use case. For me, this simple custom plugin:

const rollupAlias = aliases => ({
  resolveId(importee) {
    const alias = aliases[importee];

    return alias ? this.resolveId(alias) : null;
  }
});

is sufficient, so I'm going with that instead of rollup-plugin-alias for now.

[dima-takoy-zz]

Can be closed now.

[vpalos]

The alias plugin no longer resolves module names, but you can easily use require.resolve to achieve this:

alias({
    "react": require.resolve("preact/compat"),
    "react-dom": require.resolve("preact/compat")
})

[viT-1]

@vpalos Please show us full rollup configuration example (with rollup-plugin-node-resolve and may be rollup-plugin-typescript2).

[RobbieTheWagner]

Would love an example here as well. I cannot figure out how to use preact-compat with rollup at all.