Importing @apollo/client fails in Node

[justinfagnani]

Intended outcome:
Importing and using ApolloClient in Node works

Actual outcome:

An error: Cannot find module 'react'

How to reproduce the issue:

This code seems like it should have a chance of working:

import apolloClient from '@apollo/client';
const {ApolloClient, InMemoryCache, gql} = apolloClient;
const client = new ApolloClient({
  uri: '...',
  cache: new InMemoryCache(),
});

But it triggers the error:

Error: Cannot find module 'react'
Require stack:
- /Users/justinfagnani/Projects/WebComponents/wc-catalog/node_modules/@apollo/client/react/context/context.cjs
- /Users/justinfagnani/Projects/WebComponents/wc-catalog/node_modules/@apollo/client/react/react.cjs
- /Users/justinfagnani/Projects/WebComponents/wc-catalog/node_modules/@apollo/client/main.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
    at Module._load (node:internal/modules/cjs/loader:804:27)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/justinfagnani/Projects/WebComponents/wc-catalog/node_modules/@apollo/client/react/context/context.cjs:6:13)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1022:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/justinfagnani/Projects/WebComponents/wc-catalog/node_modules/@apollo/client/react/context/context.cjs',
    '/Users/justinfagnani/Projects/WebComponents/wc-catalog/node_modules/@apollo/client/react/react.cjs',
    '/Users/justinfagnani/Projects/WebComponents/wc-catalog/node_modules/@apollo/client/main.cjs'
  ]
}

Node.js v18.6.0

Versions

System:
OS: macOS 12.4
Binaries:
Node: 18.6.0 - ~/.nvm/versions/node/v18.6.0/bin/node
npm: 8.14.0 - ~/.nvm/versions/node/v18.6.0/bin/npm
Browsers:
Chrome: 103.0.5060.134
Firefox: 102.0.1
Safari: 15.5

[dylanwulf]

Try importing from @apollo/client/core. See more here: #8190

[justinfagnani]

Thanks!

Importing @apollo/client/core also fails though, with:

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/justinfagnani/Projects/WebComponents/wc-catalog/node_modules/@apollo/client/core' is not supported resolving ES modules imported from /Users/justinfagnani/Projects/WebComponents/wc-catalog/packages/wc-org-server/lib/catalog/catalog.js
Did you mean to import @apollo/client/core/core.cjs?

@apollo/client/core/core.cjs works, but doesn't have any typings associated with it.

[jaydenseric]

@justinfagnani instead of importing from an Apollo Client index module it's better to deep import the exact module you need, e.g:

// Note that this example imports an ESM module.
import { ApolloLink } from "@apollo/client/link/core/ApolloLink.js";

For reasons why importing from an index module is an anti-pattern, see:

https://jaydenseric.com/blog/optimal-javascript-module-design

But, I'm also running into problems with broken types with TypeScript config compilerOptions.module set to nodenext due to imports missing file extensions:

#9890

[alessbell]

Hi @justinfagnani 👋 Hopefully Jayden's fix unblocked you here—I'll go ahead and close this issue for now but feel free to re-open it if needed. Thanks!

[dcolley]

Please re-open, this is not working on the latest version. There is still an dependency on react.

import { ApolloClient } from "@apollo/client/core/ApolloClient.js";
import pkg from '@apollo/client';
const { gql } = pkg;

const apollo = new ApolloClient({
  link: new HttpLink({ uri: 'https://gql.metaspan.io/graphql', fetch }),
  cache: new InMemoryCache(),
});

% node test.js
node:internal/modules/cjs/loader:956
  const err = new Error(message);
              ^

Error: Cannot find module 'react'
Require stack:
- /.../proto/node_modules/@apollo/client/react/context/context.cjs
- /.../proto/node_modules/@apollo/client/react/react.cjs
- /.../proto/node_modules/@apollo/client/main.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
    at Module._load (node:internal/modules/cjs/loader:804:27)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/.../proto/node_modules/@apollo/client/react/context/context.cjs:6:13)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1022:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/.../proto/node_modules/@apollo/client/react/context/context.cjs',
    '/.../proto/node_modules/@apollo/client/react/react.cjs',
    '/.../proto/node_modules/@apollo/client/main.cjs'
  ]
}

Node.js v18.7.0

removing the "type": "module" from package.json and switching to require() seems to work

const { ApolloClient, HttpLink, InMemoryCache, gql } = require('@apollo/client/core');

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.