Gatsby: [gatsby-plugin-preact] Can't resolve 'react-dom' for node_modules package

[atomiks]

Description

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't resolve 'react-dom' in '[...]/node_modules/@tippyjs/react/dist'

Steps to reproduce

1. npx gatsby new bug-repro
2. yarn add @tippyjs/react gatsby-plugin-preact
3. Add the Preact plugin to gatsby.config.js
4. Edit index.js with

import React from "react"
import { Link } from "gatsby"
import Tippy from "@tippyjs/react"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <Tippy content="test">
      <button>test</button>
    </Tippy>
  </Layout>
)

export default IndexPage

Expected result

No error

Actual result

Error

Environment

  System:
    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 75.0
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.20.36 => 2.20.36
    gatsby-image: ^2.2.19 => 2.3.5
    gatsby-plugin-catch-links: ^2.1.9 => 2.2.4
    gatsby-plugin-client-side-redirect: 0.0.2 => 0.0.2
    gatsby-plugin-emotion: ^4.1.18 => 4.2.3
    gatsby-plugin-google-analytics: ^2.1.16 => 2.2.5
    gatsby-plugin-manifest: ^2.2.16 => 2.3.7
    gatsby-plugin-mdx: ^1.1.5 => 1.1.11
    gatsby-plugin-offline: ^3.0.7 => 3.1.5
    gatsby-plugin-preact: ^3.2.4 => 3.2.4
    gatsby-plugin-react-helmet: ^3.1.7 => 3.2.5
    gatsby-plugin-sharp: ^2.2.22 => 2.5.7
    gatsby-redirect-from: ^0.2.1 => 0.2.1
    gatsby-remark-autolink-headers: ^2.1.10 => 2.2.4
    gatsby-remark-vscode: ^2.0.3 => 2.0.3
    gatsby-source-filesystem: ^2.1.22 => 2.2.5
    gatsby-transformer-remark: ^2.6.22 => 2.7.5
    gatsby-transformer-sharp: ^2.2.14 => 2.4.7

[lannonbr]

So looking around in your Tippy react project, it's using portals. Preact's docs comment on how you can use portals in Preact using preact/compat but I'm not sure if there's a way for a Preact project to automatically convert a React portal into a Preact portal without needing to rewrite the react package.

[atomiks]

Shouldn't it just work?

https://github.com/gatsbyjs/gatsby/blob/fb92ede949f67c16a247ea5b0bc96934f0534dd2/packages/gatsby-plugin-preact/src/gatsby-node.js#L17

It would be transformed to import {createPortal} from 'preact/compat'; and the API is the same

[lannonbr]

Yeah you're right. I am gonna dive into your dist bundle for tippyjs/react to see if after bundling it with rollup before you distribute it causes issues with this

[lannonbr]

So diving in a bit it looks like your code is fine, so it's now the question if gatsby-plugin-preact is having the webpack config (or Gatsby's webpack config in general) also run on node modules

[lannonbr]

Hmmm, @wardpeet Do you happen to know if this is a known issue where a reference of react-dom in a 3rd party node module is not being aliased by the gatsby-plugin-preact webpack config alias addition?

[Grsmto]

You need to add preact to your dependencies as well, not just the plugin.

[lannonbr]

Ah always the little things, @Grsmto is correct, added preact into my reproduction for this and it works now.

[atomiks]

Can't believe I missed that 🤦‍♂️, thank you