Module not found: Error: Can't resolve '@apollo/client' in '/opt/build/repo/src'

Hi All!
I’m trying to deploy an app that use GraphQL, everything works fine locally but when I deploy on Netlify it keeps telling me the Error as the name of topic Module not found: Error: Can't resolve '@apollo/client' in '/opt/build/repo/src'

I have tried with these build command npm run build and CI= npm run build and CI='' npm run build but all failed with same error.

I also tried to replace ‘@apollo/client’ to ‘@apollo/client/core’ as someone instructed by googling but it wouldn’t help.

My Netlify site name: zippy-taffy-310453

Here’s deploy log:

9:50:54 PM: Build ready to start
9:51:00 PM: build-image version: 2d975aac035b49faec3566497e1a23664999ac04 (focal)
9:51:00 PM: build-image tag: v4.7.0
9:51:00 PM: buildbot version: 51f079eb2b8422b2dd4a536784559216feb9524d
9:51:00 PM: Building without cache
9:51:00 PM: Starting to prepare the repo for build
9:51:00 PM: No cached dependencies found. Cloning fresh repo
9:51:00 PM: git clone https://github.com/lawrence-le/triphap-client
9:51:01 PM: Preparing Git Reference refs/heads/main
9:51:01 PM: Parsing package.json dependencies
9:51:03 PM: Starting build script
9:51:03 PM: Installing dependencies
9:51:03 PM: Python version set to 2.7
9:51:03 PM: v16.14.2 is already installed.
9:51:04 PM: Now using node v16.14.2 (npm v8.5.0)
9:51:04 PM: Started restoring cached build plugins
9:51:04 PM: Finished restoring cached build plugins
9:51:04 PM: Attempting ruby version 2.7.2, read from environment
9:51:06 PM: Using ruby version 2.7.2
9:51:06 PM: Using PHP version 8.0
9:51:06 PM: No npm workspaces detected
9:51:06 PM: Started restoring cached node modules
9:51:06 PM: Finished restoring cached node modules
9:51:07 PM: Installing NPM modules using NPM version 8.5.0
9:51:44 PM: npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
9:51:47 PM: npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
9:51:53 PM: added 1236 packages, and audited 1237 packages in 46s
9:51:53 PM: 170 packages are looking for funding
9:51:53 PM:   run `npm fund` for details
9:51:53 PM: 6 moderate severity vulnerabilities
9:51:53 PM: To address all issues (including breaking changes), run:
9:51:53 PM:   npm audit fix --force
9:51:53 PM: Run `npm audit` for details.
9:51:53 PM: NPM modules installed
9:51:54 PM: Started restoring cached go cache
9:51:54 PM: Finished restoring cached go cache
9:51:54 PM: go version go1.16.5 linux/amd64
9:51:54 PM: go version go1.16.5 linux/amd64
9:51:54 PM: Installing missing commands
9:51:54 PM: Verify run directory
9:51:56 PM: ​
9:51:56 PM: ────────────────────────────────────────────────────────────────
9:51:56 PM:   Netlify Build                                                 
9:51:56 PM: ────────────────────────────────────────────────────────────────
9:51:56 PM: ​
9:51:56 PM: ❯ Version
9:51:56 PM:   @netlify/build 26.5.1
9:51:56 PM: ​
9:51:56 PM: ❯ Flags
9:51:56 PM:   baseRelDir: true
9:51:56 PM:   buildId: 6245bfce66f6ce7fe6c7ab69
9:51:56 PM:   deployId: 6245bfce66f6ce7fe6c7ab6b
9:51:56 PM: ​
9:51:56 PM: ❯ Current directory
9:51:56 PM:   /opt/build/repo
9:51:56 PM: ​
9:51:56 PM: ❯ Config file
9:51:56 PM:   No config file was defined: using default values.
9:51:56 PM: ​
9:51:56 PM: ❯ Context
9:51:56 PM:   production
9:51:56 PM: ​
9:51:56 PM: ────────────────────────────────────────────────────────────────
9:51:56 PM:   1. Build command from Netlify app                             
9:51:56 PM: ────────────────────────────────────────────────────────────────
9:51:56 PM: ​
9:51:56 PM: $ CI= npm run build
9:51:56 PM: > frontend@0.1.0 build
9:51:56 PM: > react-scripts build
9:51:58 PM: Creating an optimized production build...
9:52:01 PM: Failed to compile.
9:52:01 PM: 
9:52:01 PM: Module not found: Error: Can't resolve '@apollo/client' in '/opt/build/repo/src'
9:52:01 PM: ​
9:52:01 PM: ────────────────────────────────────────────────────────────────
9:52:01 PM:   "build.command" failed                                        
9:52:01 PM: ────────────────────────────────────────────────────────────────
9:52:01 PM: ​
9:52:01 PM:   Error message
9:52:01 PM:   Command failed with exit code 1: CI= npm run build (https://ntl.fyi/exit-code-1)
9:52:01 PM: ​
9:52:01 PM:   Error location
9:52:01 PM:   In Build command from Netlify app:
9:52:01 PM:   CI= npm run build
9:52:01 PM: ​
9:52:01 PM:   Resolved config
9:52:01 PM:   build:
9:52:01 PM:     command: CI= npm run build
9:52:01 PM:     commandOrigin: ui
9:52:01 PM:     publish: /opt/build/repo/build
9:52:01 PM:     publishOrigin: ui
9:52:02 PM: Caching artifacts
9:52:02 PM: Started saving node modules
9:52:02 PM: Finished saving node modules
9:52:02 PM: Started saving build plugins
9:52:02 PM: Finished saving build plugins
9:52:02 PM: Started saving pip cache
9:52:02 PM: Finished saving pip cache
9:52:02 PM: Started saving emacs cask dependencies
9:52:02 PM: Finished saving emacs cask dependencies
9:52:02 PM: Started saving maven dependencies
9:52:02 PM: Finished saving maven dependencies
9:52:02 PM: Started saving boot dependencies
9:52:02 PM: Finished saving boot dependencies
9:52:02 PM: Started saving rust rustup cache
9:52:02 PM: Finished saving rust rustup cache
9:52:02 PM: Started saving go dependencies
9:52:02 PM: Finished saving go dependencies
9:52:03 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
9:52:03 PM: Creating deploy upload records
9:52:03 PM: Failing build: Failed to build site
9:52:03 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
9:52:04 PM: Finished processing build request in 1m3.646960726s

Here’s my frontend > src > App.js:

import './App.scss'
import { Routes, Route } from 'react-router-dom'
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
import Home from './components/Pages/Home/Home'
import Buy from './components/Pages/Buy/Buy'
import Rent from './components/Pages/Rent/Rent'
import Navbar from './components/navbar/Navbar'
import Property from './components/Pages/Property/Property'
import Search from './components/Pages/Search/Search'

const client = new ApolloClient({
  uri: 'https://triphap-backend.herokuapp.com/graphql',
  cache: new InMemoryCache(),
})

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <Routes>
          <Route 
            path="*" 
            element={
              <main>
                <Navbar />
                <h1 style={{ marginTop: "3rem", color: "rgb(26,55,58)" }}>404 NOT FOUND</h1>
              </main>
            } 
          />
          <Route path="/" element={<Home />} />
          <Route path="/buy" element={<Buy />} />
          <Route path="/rent" element={<Rent />} />
          <Route path="/search" element={<Search />} />
          <Route path="/property">
            <Route path=":propertyId" element={<Property />} />
          </Route>
        </Routes>
      </div>
    </ApolloProvider>
  );
}

export default App;

Here’s my package.json :

{
  "dependencies": {
    "@apollo/client": "^3.5.10",
    "graphql": "^16.3.0",
    "pg": "^8.7.3",
    "pg-connection-string": "^2.5.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/netlify-lambda serve src",
    "build": "react-scripts build",
    "frontend": "cd frontend && npm start",
    "backend": "cd backend && nodemon app.js",
    "dev": "concurrently --kill-others-on-fail \"npm run backend\" \"npm run frontend\"",
    "heroku-postbuild": "cd frontend && npm install && npm run build"
  }
}

Please tell me if I need to provide any other piece of code. Thank you!

hey there,

please try moving the apollo dependency you need from the dependencies section in your package.json to the devDepencies section, as i think we do need it at build & deploy time, not at runtime.

1 Like

Hi @perry ,

Sorry I was not being clear with my question. Actually my project is structure like this:

Root folder includes:

  • backend folder,
  • frontend folder

On the threat above I’ve captured code of package.json in the Root folder, when actually the package.json file in frontend folder is where I needed to work on solution (as it is completely lack of “@apollo/client” dependencies). So based on your hint, I’ve tried to 1./ add “@apollo/client” in “devDependencies” and 2./ add “@apollo/client” in “dependencies”. And the result happens when I added “@apollo/client” to “dependencies” in package.json of the frontend folder, the deployment has now done successfully.

Thank you very much for your help! All the best :pray: