同构React / Babel / Apollo-require未定义

Question

我正在构建一个同构的React应用，并且遇到了Babel和import { Query } from 'react-apollo'的问题。 Webpack构建良好，但是我得到了：

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)

这是我的webpack配置：

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',
      },
    ],
  },
}

这是我的.babelrc：

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

具有查询的“我的主页”组件：

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

如果我将import { Query } from 'react-apollo'注释掉，则不会出现此错误。因此，在导入期间，在webpack / babel步骤中发生了一些事情。

"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"