(plugin-alias) Can't get preact/compact to replace react imports

[mjarkk]

I'm trying to add graphiql to my sapper (svelte + ssr) application by dynamically importing preact and graphiql but i can't get preact/compat working so i can use react components in a preact project.

I use the rollup config provided by sapper and added alias to it:

  // ...
  alias({
    entries: [
      { find: "react", replacement: path.resolve(__dirname, "node_modules/preact/compat/dist/compat.js") },
      { find: "react-dom", replacement: path.resolve(__dirname, "node_modules/preact/compat/dist/compat.js") },
    ]
  }),
  resolve({
    browser: true,
    dedupe,
  }),
  commonjs(),
  // ...

After adding that sapper starts without any errors, but when opening the web server i get a wired error:

preact.js:formatted:1 Uncaught (in promise) TypeError: Cannot convert object to primitive value
    at j (preact.module.js:formatted:1)
    at T (preact.module.js:formatted:1)
    at preact.module.js:formatted:1
    at b (preact.module.js:formatted:1)
    at b (preact.module.js:formatted:1)
    at _ (preact.module.js:formatted:1)
    at T (preact.module.js:formatted:1)
    at E (preact.module.js:formatted:1)
    at show (graphiql.js:7)

My svelte code (to test the react to preact/compat alias i'm using react-greeting):

<script>
  import { onMount } from 'svelte';
  let rootEl;

  onMount(async() => {
    const { h, Component, render, createElement } = await import('preact');
    const Greeting = await import('react-greeting');

    render(createElement(Greeting, {}, null), rootEl);
  });
</script>

<div bind:this={rootEl} />

Also placing this code in a js file and dynamically importing that or directly importing and dynamically calling the code in there gives the same result.

[shellscape]

Hey thanks for opening an issue. Unfortunately this isn't the right place to ask for support. Citing the issue templates:

Hey there! If you need help or tech support then this is not the place to
ask. Please head to the Rollup Gitter
instead or post a question to https://stackoverflow.com/questions/tagged/rollupjs.

👉🏽 Need help or tech support? Please don't open an issue!
Head to https://gitter.im/rollup/rollup or https://stackoverflow.com/questions/tagged/rollupjs

Apologies, but we don't have the bandwidth to service both support requests and technical issues for Rollup. Please try one of the avenues mentioned above (and in the issue templates).

[mjarkk]

Sorry, i indeed read that issue template but i found it better to ask this here.

Maybe i had to call it a feather request because it seems like it's currently not possible to do a module alias like this:

{ find: "react-dom", replacement: "preact/compat" }

And for preact users that use it in production this seems like an important thing to have in a js module bundler and thus why i was asking it here.
If path.resolve(__dirname, "node_modules/...") is the currently the way to fix this i won't use this library again for a preact project because this looks more like a hack than a solution.

[shellscape]

@mjarkk we're very open to feature requests. would you be up for creating a new Feature Request issue for that? it would also be super helpful to have a very minimal repo put together that attempted to do what you're looking to do. that would provide a proof of failure/missing feature and a testbed for implementing the new feature!

[shellscape]

I'm also going to create a new repo-management issue to pursue "recipes" (aka How-To) for commonly performed tasks, such as the one you reference. It will be a "help wanted" / "todo", long-running issue for people to request recipes as well.

[mjarkk]

Np, i'll see if i can create an example repo next week with a minimal example of how this should work.

I ended up deciding yesterday to move over to another framework (also another bundler 😞) because the rollup config for sapper is really different from all react rollup example configs with as results one fix for an error created another and that did go on for at least 6 hours so i was quite frustrated at the end of the day.

[shellscape]

Well I'm sorry for your frustration. My job here over the next year is to try to prevent that from happening with others. Hopefully we can get documentation to a point where you might give it another shot. We'd really, really appreciate any help you're willing to give to improve the plugins and the docs - and creating that example repo is a huge help.

[mjarkk]

hmmm i think i'm wrong here,
today I've tried to re-create the most minimal version of a react to preact alias in a clean environment and it just seems to work.

Rollup config and main js file:

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import alias from '@rollup/plugin-alias'

export default {
	input: 'main.js',
	output: {
		file: 'bundle.js',
		format: 'iife',
		sourcemap: true
	},
	plugins: [
		resolve(),
		commonjs(),
		alias({
			entries: [
				{ find: 'react-dom', replacement: 'preact/compat' },
				{ find: 'react', replacement: 'preact/compat' },
			]
		}),
	],
};

// main.js
import { h, createElement, render } from 'preact'
import Hello from 'react-greeting'

const HelloElement = createElement(Hello, { text: 'Preact' })
const app = h('div', null, HelloElement)

render(app, document.getElementById('app'))

I don't have the time sadly to debug this issue further to see what my issue was in the first place.
But still thanks for the friendly responses very welcoming for new users 😃, i'll probably use rollup in my next personal preact project now that i know it's possible to alias react to preact!

Also the a repo with examples would be great then it's easy to know if something is possible and how it's dune.

[shellscape]

Thanks for following up. Look for some recipes to make it into the repo after the new year. I've floated the idea to folks and there's a lot of support for it.

It might be worth opening an issue with Sapper as well, since you were able to distill this to a simple working example, and your sapper implementation had issues. I'd wager that would give the Sapper folks something to look at. At the very least they might be able to point out what is conflicting. Generally speaking the Svelte/Sapper and Rollup projects communicate pretty well between them.

[mjarkk]

I'm not going to ask the svelte folks for advice without knowing where the problem is.
I've already messed up this issue out of confusion and i don't want to create another one just to have the same story, i'll try to find some time to debug this further and see what the problem exactly is.