Isomorphic React/Babel/Apollo - require is not defined

Question

I’m building an isomorphic react app and I’m running into issues with Babel and import { Query } from 'react-apollo'. Webpack builds fine, but I’m getting:

Uncaught ReferenceError: require is not defined at eval (external_"stream":1) at Object.stream (bundle.js:2323) at __webpack_require__ (bundle.js:20) at eval (react-dom-server.node.development.js:28) at eval (react-dom-server.node.development.js:2814) at Object../node_modules/react-dom/cjs/react-dom-server.node.development.js (bundle.js:1667) at __webpack_require__ (bundle.js:20) at eval (server.node.js:4) at Object../node_modules/react-dom/server.node.js (bundle.js:1715) at __webpack_require__ (bundle.js:20)

Here is my webpack config:

const path = require('path')

module.exports = {
  mode: 'development',
  target: 'node',
  entry: './src/client/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './build'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            'env',
            'stage-2',
            'react',
          ],
          plugins: [
            'babel-plugin-transform-react-jsx',
            'graphql-tag',
            'import-graphql',
          ],
        },
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader',
      },
    ],
  },
}

Here is my .babelrc:

{
  "presets": [
    "env",
    "stage-2",
    "react"
  ],
  "plugins": [
    "babel-plugin-transform-react-jsx",
    "graphql-tag",
    "import-graphql"
  ]
}

My Home component that has the Query:

import React from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'

const Projects = () => (
  <Query query={gql`
    {
      projects {
        name
      }
    }
  `}
  >
    {({ loading, error, data }) => {
      console.log('data: ', data)
      if (loading) return <p>Loading...</p>
      if (error) return <p>Error: {error}</p>

      return data.projects.map(({
        name,
      }) => (
        <div key={name}>
          <h2>{name}</h2>
        </div>
      ))
    }}
  </Query>
)

const Home = () => (
  <div>
    <h1>Home</h1>
    <Projects />
  </div>
)

export default Home

If I comment out import { Query } from 'react-apollo', I do not get this error. So something is happening at the webpack/babel step during that import.

"apollo-cache-inmemory": "^1.2.5",
"apollo-client": "^2.3.5",
"apollo-link-schema": "^1.1.0",
"apollo-server": "^2.0.0-rc.5",
"apollo-server-express": "^2.0.0-rc.5",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.5",
"babel-loader": "^7.1.5",
"babel-plugin-graphql-tag": "^1.6.0",
"babel-plugin-import-graphql": "^2.6.2",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"graphql": "^0.13.2",
"graphql-tag": "^2.9.2",
"graphql-tools": "^3.0.5",
"react": "^16.4.1",
"react-apollo": "^2.1.0-beta.3",
"react-dom": "^16.4.1",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.3.1",
"webpack": "^4.13.0",
"webpack-cli": "^3.0.8"