#i created a nextjs site it's working with GitHub pages but showing errors on deploying cloudflare

1 messages · Page 1 of 1 (latest)

past mason
#

i created a nextjs site it's working with GitHub pages but showing errors on deploying cloudflare

glossy dustBOT
#

Hi @past mason. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, it seems that there might be conflicts between Next.js and Cloudflare's optimizations. For instance, the use of next/image with Cloudflare's Mirage can lead to unexpected behavior (source (https://github.com/vercel/next.js/issues/28810)).

Also, there was an issue reported with deploying Next.js 13 on the DigitalOcean App Platform when using Cloudflare in front of it. The user resolved this by moving their deployment away from the DigitalOcean App Platform and setting up continuous deployment using webhooks on a pre-installed easypanel droplet (source (https://github.com/vercel/next.js/issues/49130)).

Without more specific details about the errors you're encountering, it's hard to provide a more precise solution. However, you might want to check if these issues apply to your situation. If they do, consider adjusting your deployment strategy or configuration accordingly.

If you're still encountering issues, it would be helpful to have more information about the specific errors you're seeing. You might also find it useful to consult the Next.js documentation (https://nextjs.org/docs) or the Vercel documentation (https://vercel.com/docs) for more guidance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mystic briar kapa.ai is still learning and improving, please let us know how it did by reacting below

past mason
#

@glossy dust My package.json file:

{
"name": "profile",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"glob": "^10.2.1",
"globby": "^13.1.4",
"next": "13.3.1",
"next-cloudinary": "^4.4.0",
"next-sitemap": "^4.0.7",
"next-themes": "^0.2.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"react-vertical-timeline-component": "^3.6.0",
"tailwindcss": "3.3.1"
},
"devDependencies": {
"@cloudflare/next-on-pages": "^1.8.3"
}
}

glossy dustBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the provided package.json file, it seems like you have a Next.js project with several dependencies. Here's a brief overview of some key dependencies:

  • "next": "13.3.1": This is the main dependency for your project. Next.js is a React framework that enables features like server-side rendering and generating static websites for React based web applications.

  • "react": "18.2.0" and "react-dom": "18.2.0": These are the core dependencies for any React application. react is the package that allows you to create React components, while react-dom provides DOM-specific methods to use in your web application.

  • "eslint": "8.39.0" and "eslint-config-next": "13.3.1": These are for linting your code. ESLint is a tool for identifying and reporting on patterns in JavaScript, and eslint-config-next is the ESLint configuration used by Next.js.

  • "autoprefixer": "10.4.14" and "postcss": "8.4.23": These are used for processing your CSS. Autoprefixer parses CSS and adds vendor prefixes to CSS rules, and PostCSS is a tool for transforming CSS with JavaScript.

  • "tailwindcss": "3.3.1": This is a utility-first CSS framework for rapidly building custom user interfaces.

  • "@cloudflare/next-on-pages": "^1.8.3": This is a development dependency. It's a Cloudflare Pages plugin for Next.js, which helps with deploying your Next.js application on Cloudflare Pages.

Remember to install your dependencies using npm install or yarn install before running your project. If you encounter any issues, make sure all dependencies are compatible with each other.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mystic briar kapa.ai is still learning and improving, please let us know how it did by reacting below

past mason
#

@glossy dust

Error log on cloudflare after deployment

Cloning repo...
    Restoring from dependencies cache
    Restoring from build output cache
    Detected the following tools from environment: yarn@3.6.3, nodejs@18.17.1
    Installing project dependencies: yarn
    ➤ YN0070: Migrating from Yarn 1; automatically enabling the compatibility node-modules linker 👍
    
    ➤ YN0000: ┌ Resolution step
    ➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
    ➤ YN0002: │ profile@workspace:. doesn't provide @next/env (p6dac0), requested by next-sitemap
    ➤ YN0002: │ profile@workspace:. doesn't provide vercel (pa915c), requested by @cloudflare/next-on-pages
    ➤ YN0002: │ profile@workspace:. doesn't provide wrangler (p0975b), requested by @cloudflare/next-on-pages
    ➤ YN0002: │ react-vertical-timeline-component@npm:3.6.0 doesn't provide react (p5d41b), requested by react-intersection-observer
  ➤YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
    ➤ YN0000: └ Completed in 8s 651ms
    ➤ YN0000: ┌ Post-resolution validation
    ➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
    ➤ YN0000: └ Completed
    ➤ YN0000: Failed with errors in 8s 698ms
    Error: Exit with error code: 1
        at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
    at Object.onceWrapper (node:events:652:26)
        at ChildProcess.emit (node:events:537:28)
        at ChildProcess._handle.onexit (node:internal/child_process:291:12)
Failed: build command exited with code: 1
Failed: error occurred while running build command```
glossy dustBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error log indicates that there are some issues with the dependencies in your project. Here are the key points:

  1. fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged: This warning is related to the fsevents package, which is an optional dependency for many packages and is only applicable on macOS. It's not a critical error and usually can be ignored.

  2. profile@workspace:. doesn't provide @next/env (p6dac0), requested by next-sitemap: This error suggests that the next-sitemap package is expecting @next/env to be provided by your project, but it's not found. You might need to install @next/env or check your project configuration.

  3. profile@workspace:. doesn't provide vercel (pa915c), requested by @cloudflare/next-on-pages: This error suggests that the @cloudflare/next-on-pages package is expecting vercel to be provided by your project, but it's not found. You might need to install vercel or check your project configuration.

  4. profile@workspace:. doesn't provide wrangler (p0975b), requested by @cloudflare/next-on-pages: This error suggests that the @cloudflare/next-on-pages package is expecting wrangler to be provided by your project, but it's not found. You might need to install wrangler or check your project configuration.

  5. react-vertical-timeline-component@npm:3.6.0 doesn't provide react (p5d41b), requested by react-intersection-observer: This error suggests that the react-vertical-timeline-component package is expecting react to be provided by your project, but it's not found. You might need to check your project configuration.

#
  1. The lockfile would have been modified by this install, which is explicitly forbidden.: This error suggests that the installation process attempted to modify the lockfile, which is not allowed. This could be due to a discrepancy between your local environment and the deployment environment.

To resolve these issues, you might need to review your project's dependencies and ensure that all required packages are installed and correctly configured. If the issues persist, consider seeking help from the respective package communities or the Next.js community (https://nextjs.org/community/support).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mystic briar kapa.ai is still learning and improving, please let us know how it did by reacting below

past mason
#

@glossy dust can you please add necessary dependencies to my package.json file and configure it

{
  "name": "profile",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "10.4.14",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "glob": "^10.2.1",
    "globby": "^13.1.4",
    "next": "13.3.1",
    "next-cloudinary": "^4.4.0",
    "next-sitemap": "^4.0.7",
    "next-themes": "^0.2.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.8.0",
    "react-vertical-timeline-component": "^3.6.0",
    "tailwindcss": "3.3.1"
  },
  "devDependencies": {
    "@cloudflare/next-on-pages": "^1.8.3"
  }
}
glossy dustBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the error log you provided, it seems like you need to add @next/env, vercel, and wrangler to your dependencies. Here's how your updated package.json file might look:

{
  "name": "profile",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "10.4.14",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "glob": "^10.2.1",
    "globby": "^13.1.4",
    "next": "13.3.1",
    "next-cloudinary": "^4.4.0",
    "next-sitemap": "^4.0.7",
    "next-themes": "^0.2.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.8.0",
    "react-vertical-timeline-component": "^3.6.0",
    "tailwindcss": "3.3.1",
    "@next/env": "^12.0.7",
    "vercel": "^23.1.2",
    "wrangler": "^1.19.5"
  },
  "devDependencies": {
    "@cloudflare/next-on-pages": "^1.8.3"
  }
}

Please note that the versions of @next/env, vercel, and wrangler I've added are the latest at the time of writing this response. You should check for the latest versions when you're adding these dependencies.

After updating your package.json file, run npm install or yarn install to install the new dependencies.

Remember, this is a suggested solution based on the error log you provided. If you still encounter issues, you might need to further adjust your project configuration or seek help from the respective package communities or the Next.js community (https://nextjs.org/community/support).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mystic briar kapa.ai is still learning and improving, please let us know how it did by reacting below

past mason
#

@glossy dust

Resolving packages...
error Couldn't find any versions for "wrangler" that matches "^1.19.5"
info Visit

glossy dustBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing indicates that the package manager (in this case, Yarn) couldn't find a version of the wrangler package that matches ^1.19.5.

The wrangler package is a command-line tool for Cloudflare Workers, and it's not typically included as a dependency in a package.json file. Instead, it's usually installed globally using the following command:

npm install -g @cloudflare/wrangler

If you need to use wrangler as part of your project's scripts, you can add it as a devDependency using the @cloudflare/wrangler package name:

"devDependencies": {
  "@cloudflare/wrangler": "^1.19.5"
}

Then, you can use it in your scripts like this:

"scripts": {
  "publish": "wrangler publish"
}

Please note that you'll need to check the latest version of @cloudflare/wrangler when you're adding it to your package.json file. If you still encounter issues, consider seeking help from the Cloudflare Workers community (https://community.cloudflare.com/c/developers/workers/57).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mystic briar kapa.ai is still learning and improving, please let us know how it did by reacting below

past mason
#

@glossy dust is everything okay?

{
  "name": "profile",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "publish": "wrangler publish"
  },
  "dependencies": {
    "autoprefixer": "10.4.14",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "glob": "^10.2.1",
    "globby": "^13.1.4",
    "next": "13.3.1",
    "next-cloudinary": "^4.4.0",
    "next-sitemap": "^4.0.7",
    "next-themes": "^0.2.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.8.0",
    "react-vertical-timeline-component": "^3.6.0",
    "tailwindcss": "3.3.1",
    "@next/env": "^12.0.7",
    "vercel": "^23.1.2"
  },
  "devDependencies": {
    "@cloudflare/next-on-pages": "^1.8.3"
    "@cloudflare/wrangler": "^1.19.5"
  }
}
glossy dustBOT
#

Let me check the knowledge base for you. One moment! :books: