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!