Encountering npm build issues during app deployment on Digital Ocean (client directory)

Other Questions NPM
1

I’m currently struggling to deploy my application. After completely setting up both the server and client directories, I run npm install, followed by npm run build. Unfortunately, this results in an error that’s new to me and quite frustrating at this stage of the process. I can share my Package.Json from the client folder for reference. Here are the relevant logs from the build process:

npm run build  
> [email protected] build  
> next build  

info  - Loaded environment variables from /home/ibraradmin/client/.env.local  
info  - Utilizing webpack 5. For more details, visit nextjs.org/docs/messages/webpack5  
warn  - Found next.config.js, but no configuration has been exported. More info at nextjs.org/docs/messages/empty-configuration  
info  - Validating types  
warn  - ESLint configuration is missing. Consider running next lint to set it up  

> Build error encountered  
Error: > The build directory is not writable. Refer to nextjs.org/docs/messages/build-dir-not-writeable  
    at /home/ibraradmin/client/node_modules/next/dist/build/index.js:275:19  
    at async Span.traceAsyncFn (/home/ibraradmin/client/node_modules/next/dist/telemetry/trace/trace.js:60:20)  
    at async Object.build [as default] (/home/ibraradmin/client/node_modules/next/dist/build/index.js:77:25)  
info  - Beginning to create an optimized production build

The package.json structure is as follows:

{  
  "name": "client",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "dev": "node server.js",  
    "build": "next build",  
    "start": "next start",  
    "lint": "next lint"  
  },  
  "author": "Xidas Studios",  
  "license": "MIT",  
  "dependencies": {  
    "@ant-design/icons": "^4.6.4",  
    "@emotion/react": "^11.4.1",  
    "@emotion/styled": "^11.3.0",  
    "@material-ui/icons": "^4.11.2",  
    "@mui/material": "^5.0.0",  
    "@stripe/stripe-js": "^1.20.3",  
    "antd": "^4.16.13",  
    "axios": "^0.21.4",  
    "axois": "^0.0.1-security",  
    "bootstrap": "^5.1.1",  
    "express": "^4.17.1",  
    "fs": "^0.0.1-security",  
    "http-proxy-middleware": "^2.0.1",  
    "install": "^0.13.0",  
    "next": "10.2.0",  
    "next-csrf": "^0.1.2",  
    "npm": "^8.0.0",  
    "react": "^17.0.2",  
    "react-bootstrap": "^2.0.0-rc.0",  
    "react-dom": "^17.0.2",  
    "react-image-file-resizer": "^0.4.7",  
    "react-markdown": "^7.0.1",  
    "react-native-popup-confirm-toast": "^2.0.3",  
    "react-native-status-bar-height": "^2.6.0",  
    "react-player": "^2.9.0",  
    "react-router-dom": "^5.3.0",  
    "react-toastify": "^8.0.2",  
    "request": "^2.79.0",  
    "simple-react-footer": "^1.0.2",  
    "styled-components": "^5.3.1"  
  }  
}

Any assistance would be greatly appreciated.

2

Hi Bob_Clever,

The error you encountered during the build process seems to point towards a permission issue with the build directory. Here's a practical solution to resolve this:

  1. Check Directory Permissions: Ensure the directory intended for the build process is writable. You can do this by running: 
    chmod -R 775 /path/to/your/build/directory
    Adjust the path to point to your actual build directory.
  2. Correct Environment Setup: Double-check your environment variables and make sure they are properly loaded during the build. Sometimes, a missing or incorrect configuration can cause unexpected errors.
  3. Verify Dependencies: I noticed a typo in your package.json dependencies. "axois" should be corrected to "axios". Having incorrect dependencies can sometimes lead to installation and build issues.
  4. Run Lint Configuration: Consider running next lint to set up and verify ESLint configuration as this can sometimes provide insights into further issues.

Let me know if these steps resolve your issue!

3

Hey Bob_Clever,

Here's a quick fix for your build error:

  1. Permission Fix: The build directory must be writable. Try: 
    chmod -R 775 /home/ibraradmin/client/.next
    Adjust path if needed.
  2. Correct Typos: In your package.json, change "axois" to "axios."
  3. Next.js Config: Export an empty object in your next.config.js: 
    module.exports = { }

Try these and see if it resolves your issue!

4

Hi Bob_Clever,

Your build issue seems common during deployment, especially if the directory permissions aren't set correctly or configuration files are misconfigured. Let’s go through some actionable steps to resolve this efficiently:

  1. Adjust Directory Permissions: It appears the build directory isn't writable. You can modify the permissions using: 
    chmod -R 775 /path/to/your/project/.next
    Ensure that the path points to your .next directory specifically.
  2. Package Correction: You've a minor typo in your package.json dependencies— "axois" should be "axios." Correcting this will ensure all packages are properly installed.
  3. Next Configuration Export: If you haven't added a configuration, doing so will remove warnings: 
    module.exports = { };
  4. Verify Environment Variables: Double-check your environment variables are consistent and correctly set for production as an inconsistent setup may cause problems.
  5. Check Version Compatibility: Given that you're using npm v8.0.0 alongside older Next.js, ensure that there are no breaking changes which may be affecting your build.

Let me know if these steps help fix the problem. It should make a difference by addressing common permission and configuration issues efficiently.