[Bug] react-apollo can't resolve 'react-dom/server' in 7.0.x

[Knovour]

Reporting a bug?

After updated from 6.3.6 to 7.0.7, react-apollo got problem.

[✓] Site Data Downloaded
  Error: ✖ ｢wdm｣:
  ERROR in ~/Projects/PROJECT_NAME/node_modules/react-apollo/react-apollo.esm.js
  Module not found: Error: Can't resolve 'react-dom/server' in '~/Projects/PROJECT_NAME/node_modules/react-apollo'
   @ ~/Projects/PROJECT_NAME/node_modules/react-apollo/react-apollo.esm.js 1354:20-47 1363:39-66 1404:20-47
   @  ~/Projects/PROJECT_NAME/src/App.jsx
   @ ~/Projects/PROJECT_NAME/src/index.js
   @ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js

Environment

• react-static: 7.0.7
• react & react-dom: 16.8.6
• react-apollo: 2.5.4
• react-hot-loader: 4.8.3

[tannerlinsley]

Does this happen with just react-apollo, or with every/any esm module?

[Knovour]

I'm not sure, my project only use react-apollo right now

But I created a new project and added ApolloProvider again, it still cause the same error.

[tannerlinsley]

Go to the file node_modules/react-static/lib/utils/binHelper.js and comment out these lines:

Module.prototype.require = function (modulePath) {
  // If we are running in the repo, we need to make sure
  // module resolutions coming from other react-static packages
  // are first attempted from the
  var isInWorkspace = needsWorkspaceCheck && inRepo(this); // Only redirect resolutions to non-relative and non-absolute modules

  if (!modulePath.startsWith('.') && !modulePath.startsWith('/')) {
    if ( // If module is in the repo try and redirect
    isInWorkspace || // Always try and redirect react and react-dom resolutions
    ['react', 'react-dom'].some(function (d) {
      return modulePath.includes(d);
    })) {
      try {
        modulePath = resolveFrom(path.resolve(process.cwd(), 'node_modules'), modulePath);
      } catch (err) {//
      }
    }
  }

  return originalRequire.call(this, modulePath);
};

Then let me know if it works.

[Knovour]

Same

  Error: ✖ ｢wdm｣:
  ERROR in /Users/knovour/Projects/my-static-site/node_modules/react-apollo/react-apollo.esm.js
  Module not found: Error: Can't resolve 'react-dom/server' in '/Users/knovour/Projects/my-static-site/node_modules/react-apollo'
   @ /Users/knovour/Projects/my-static-site/node_modules/react-apollo/react-apollo.esm.js 1352:20-47 1361:39-66 1402:20-47
   @ /Users/knovour/Projects/my-static-site/src/App.js
   @ /Users/knovour/Projects/my-static-site/src/index.js
   @ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js

  Error: ✖ ｢wdm｣:
  ERROR in /Users/knovour/Projects/my-static-site/node_modules/react-apollo/react-apollo.esm.js
  Module not found: Error: Can't resolve 'react-dom/server' in '/Users/knovour/Projects/my-static-site/node_modules/react-apollo'
   @ /Users/knovour/Projects/my-static-site/node_modules/react-apollo/react-apollo.esm.js 1352:20-47 1361:39-66 1402:20-47
   @ /Users/knovour/Projects/my-static-site/src/App.js
   @ /Users/knovour/Projects/my-static-site/src/index.js
   @ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js

[tannerlinsley]

Is there a react-dom module located in:

• node_modules?
• node_modules/react-apollo/node_modules?

[Knovour]

in node_modules

[tannerlinsley]

There's a react-dom directory in there? I can't see it.

[Knovour]

Sorry, I mean the react-dom is in the node_modules directory.
react-apollo's node_modules only have ts-invariant package inside

[tannerlinsley]

have you tried deleting your lock file and node_modules and reinstalling?

[tannerlinsley]

react-apollo shouldn't have a problem resolving react-dom if it's right next to it in the node modules directory

[Knovour]

I have tried to delete and reinstall it many times
And it only happens in version 7

[Knovour]

I added a react-dom/server alias in react-static/lib/static/webpack/webpack.config.dev.js.
And the error messages are gone

alias: {
  react: (0, _resolveFrom.default)(config.paths.NODE_MODULES, 'react'),
  'react-dom/server': (0, _resolveFrom.default)(__dirname, '@hot-loader/react-dom/server'),
  'react-dom': (0, _resolveFrom.default)(__dirname, '@hot-loader/react-dom'),
}

[Knovour]

It looks like the same issue in Next.js
vercel/next.js#3711

Delete react-dom alias is working, too

[tannerlinsley]

One reason this could be happening is because of our development alias to hot-loader/react-dom. In master, I've removed this alias for a different implementation and am hoping that that change alleviates this issue. If you have means to do so, please build master and test. Otherwise, wait for the next release and we'll see if this is improved at all.

[Knovour]

You mean change the path to config.paths.NODE_MODULES?

I have tried it before, nothing change. And webpack.config.prod.js has the same error when build.

I think the reason of this error is the resolve-from package will generate react-dom path to /my-static-site/node_modules/react-dom/index.js.

Then react-dom/server would become /react-dom/index.js/server.js.

If I add .replace('index.js', '') to react-dom alias, it works fine.

Browser will have a require error

Uncaught ReferenceError: require is not defined
    at register (nodejsCustomInspectSymbol.mjs:16)
    at Module.../../graphql/language/visitor.mjs (nodejsCustomInspectSymbol.mjs:50)
    at __webpack_require__ (bootstrap:723)
    at fn (bootstrap:100)
    at Module.<anonymous> (bundle.esm.js:1)
    at Module.../../apollo-utilities/lib/bundle.esm.js (bundle.esm.js:1135)
    at __webpack_require__ (bootstrap:723)
    at fn (bootstrap:100)
    at Module.../../../src/App.tsx (react-static-templates.js:12)
    at __webpack_require__ (bootstrap:723)

[Knovour]

Example project here.
https://github.com/Knovour/react-static-apollo

[Knovour]

So...?

[LukeStanislaus]

I am also getting this issue, I can edit the alias but that doesn't fix the problem in my CI 😢

[mtiger2k]

I add
'react-dom/server': (0, _resolveFrom.default)(NODE_MODULES, 'react-dom/server'),
in react-static/lib/static/webpack/webpack.config.dev.js, and the error is gone..
but it still can't work. displaying blank with no error message

[bencpeters]

Getting this error as well.

[mattswart]

For what it's worth: I started getting this error after importing a google font in app.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Orbitron&display=swap')

Edit: After adding font weights to the import to meet heading stylings, the error disappeared.

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Orbitron:400,500,700,900&display=swap');

[tannerlinsley]

The alias has been removed and appears to have fixed things. Reopen if needed. Thanks!