Build issues when upgrading form "@netlify/plugin-nextjs": "4" to "@netlify/plugin-nextjs": "5"

amish777 · July 15, 2024, 12:23pm

Hi their this is our preview website (https://preview.ionic.money)which is crashing when we are upgrading the @netlify/plugin-nextjs form version 4 to 5 and then it gives this error `Error: Cannot find module ‘next/dist/compiled/next-server/app-page.runtime.dev.js’
Require stack:

/var/task/node_modules/next/dist/build/webpack/plugins/nextjs-require-cache-hot-reloader.js
/var/task/node_modules/next/dist/server/lib/render-server.js
/var/task/node_modules/next/dist/server/lib/router-server.js
/var/task/node_modules/next/dist/server/lib/start-server.js
/var/task/packages/ui/.netlify/dist/run/next.cjs
at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
at /var/task/node_modules/next/dist/server/require-hook.js:55:36
at Function.resolve (node:internal/modules/helpers:190:19)
at Object. (/var/task/node_modules/next/dist/build/webpack/plugins/nextjs-require-cache-hot-reloader.js:41:13)
at Module._compile (node:internal/modules/cjs/loader:1358:14)
at Module._extensions…js (node:internal/modules/cjs/loader:1416:10)
at Module.load (node:internal/modules/cjs/loader:1208:32)
at Module._load (node:internal/modules/cjs/loader:1024:12)
at Module.require (node:internal/modules/cjs/loader:1233:19)
at mod.require (/var/task/node_modules/next/dist/server/require-hook.js:65:28)`

please help

Melvin · July 15, 2024, 1:01pm

Hi @amish777,

Thanks for reaching out and welcome to Netlify’s Support Forums!

For version 5 of the Netlify/Next.js runtime, you’ll want to review this Netlify doc:

We also have a Starter Template here:

With a Netlify form to see how it’s coded. The relevant parts here:

the .html file:

github.com

netlify-templates/next-platform-starter/blob/main/public/__forms.html

<html>
    <head></head>
    <body>
        <form name="feedback" data-netlify="true" hidden>
            <input type="hidden" name="form-name" value="feedback" />
            <input name="name" type="text" />
            <input name="email" type="text" />
            <input name="message" type="text" />
        </form>
    </body>
</html>

and the js/jsx:

github.com

netlify-templates/next-platform-starter/blob/main/components/feedback-form.jsx

'use client';

import { useState } from 'react';
import { Card } from './card';

export function FeedbackForm() {
    const [status, setStatus] = useState(null);
    const [error, setError] = useState(null);

    const handleFormSubmit = async (event) => {
        event.preventDefault();
        try {
            setStatus('pending');
            setError(null);
            const myForm = event.target;
            const formData = new FormData(myForm);
            const res = await fetch('/__forms.html', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams(formData).toString()

This file has been truncated. show original

If you want to compare your code to that of the template.

Could you give that a try and let us know if you continue to have issues?

Topic		Replies	Views
Upgrading Netlify Nextjs Plugine Support nextjs	6	33	October 4, 2024
Error: Cannot find module Netlify functions using Nextjs Build Plugins lambda-functions , nextjs	13	5297	March 27, 2022
Two NextJS builds failing with error "Cannot find module 'next/app'" Support building , deployment , nextjs	2	597	July 22, 2024
Next.js 14 Upgrade Results in 500 Status Code Support lambda-functions , nextjs	29	5041	March 15, 2024
Build and Deploy fail due to missing @netlify/plugin-nextjs Support building , deployment	13	995	October 18, 2022

Build issues when upgrading form "@netlify/plugin-nextjs": "4" to "@netlify/plugin-nextjs": "5"

Related topics