Hi!
I’ve been trying to add a form to my website and I have followed the guides but I have encountered issues with the build process when I add data-netlify="true" or netlify attributes to the form.
Is this known, or am I doing something wrong?
This is how to code looks like:
<form
className="flex flex-col gap-6 items-start w-full max-w-lg"
onSubmit={onSubmit}
name="contact-portfolio-v2"
data-netlify="true"
method="POST"
>
And this is the build log
Removing the data-netlify="true" fixes the build but makes the form useless. I’m using Next.js and the build tag is 67ca004155307a00084ca8e5
@daniellupascu It’s hard to see as you’ve only provided a partial screenshot, but it may be being caused by the lint warnings shown at the top.
If there is no actual error then try changing your build command to CI= npm run build
See:
https://answers.netlify.com/t/new-ci-true-build-configuration-treating-warnings-as-errors-because-process-env-ci-true/14434
Thanks for responding! I’m afraid it’s not a lint error causing this. As I mentioned previously, removing the data-netlify=true fixes the issue. Here’s the full log:
9:00:27 PM: build-image version: 9a361c83c6a43010ba0aa3ea38214accc0223b2c (noble)
9:00:27 PM: buildbot version: 9a4374dc9e2c1cbd2a152e441d69a3a6d7e12511
9:00:28 PM: Fetching cached dependencies
9:00:28 PM: Starting to download cache of 555.9MB
9:00:31 PM: Finished downloading cache in 3.001s
9:00:31 PM: Starting to extract cache
9:00:37 PM: Finished extracting cache in 6.137s
9:00:37 PM: Finished fetching cache in 9.192s
9:00:37 PM: Starting to prepare the repo for build
9:00:37 PM: Preparing Git Reference refs/heads/main
9:00:39 PM: Starting to install dependencies
9:00:40 PM: Started restoring cached mise cache
9:00:43 PM: Finished restoring cached mise cache
9:00:43 PM: Python version set to 3.13.2
9:00:43 PM: Ruby version set to 2.7.2
9:00:44 PM: Go version set to 1.19
9:00:44 PM: Using PHP version 8.3
9:00:46 PM: Started restoring cached Node.js version
9:00:46 PM: Finished restoring cached Node.js version
9:00:47 PM: v18.20.7 is already installed.
9:00:47 PM: Now using node v18.20.7 (npm v10.8.2)
9:00:47 PM: Enabling Node.js Corepack
9:00:47 PM: Started restoring cached build plugins
9:00:47 PM: Finished restoring cached build plugins
9:00:47 PM: Started restoring cached corepack dependencies
9:00:47 PM: Finished restoring cached corepack dependencies
9:00:47 PM: No npm workspaces detected
9:00:47 PM: Started restoring cached node modules
9:00:47 PM: Finished restoring cached node modules
9:00:47 PM: Installing npm packages using npm version 10.8.2
9:00:48 PM: up to date, audited 563 packages in 1s
9:00:48 PM: 159 packages are looking for funding
9:00:48 PM: run `npm fund` for details
9:00:49 PM: 1 moderate severity vulnerability
9:00:49 PM: To address all issues, run:
9:00:49 PM: npm audit fix --force
9:00:49 PM: Run `npm audit` for details.
9:00:49 PM: npm packages installed
9:00:49 PM: Successfully installed dependencies
9:00:49 PM: Starting build script
9:00:50 PM: Detected 1 framework(s)
9:00:50 PM: "next" at version "15.0.4"
9:00:50 PM: Section completed: initializing
9:00:51 PM:
9:00:51 PM: Netlify Build
9:00:51 PM: ────────────────────────────────────────────────────────────────
9:00:51 PM:
9:00:51 PM: ❯ Version
9:00:51 PM: @netlify/build 29.59.2
9:00:51 PM:
9:00:51 PM: ❯ Flags
9:00:51 PM: accountId: 5e90ba0a5776528c8f818da9
9:00:51 PM: baseRelDir: true
9:00:51 PM: buildId: 67cb505260423700086b7d43
9:00:51 PM: deployId: 67cb505260423700086b7d45
9:00:52 PM:
9:00:52 PM: ❯ Current directory
9:00:52 PM: /opt/build/repo
9:00:52 PM:
9:00:52 PM: ❯ Config file
9:00:52 PM: No config file was defined: using default values.
9:00:52 PM:
9:00:52 PM: ❯ Context
9:00:52 PM: production
9:00:52 PM:
9:00:52 PM: ❯ Using Next.js Runtime - v5.9.4
9:00:53 PM: Next.js cache restored
9:00:53 PM:
9:00:53 PM: Build command from Netlify app
9:00:53 PM: ────────────────────────────────────────────────────────────────
9:00:53 PM:
9:00:53 PM: $ npm run build
9:00:53 PM: > next-app-template@0.0.1 build
9:00:53 PM: > next build
9:00:54 PM: ▲ Next.js 15.0.4
9:00:54 PM: Creating an optimized production build ...
9:01:01 PM: ✓ Compiled successfully
9:01:01 PM: Linting and checking validity of types ...
9:01:03 PM: ./app/layout.tsx
9:01:03 PM: 41:28 Warning: Insert `,` prettier/prettier
9:01:03 PM: ./components/emoji.tsx
9:01:03 PM: 96:5 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 98:7 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 99:7 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: ./components/footer.tsx
9:01:03 PM: 1:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 1:1 Warning: `@/config/site` import should occur after import of `react` import/order
9:01:03 PM: ./components/funFacts.tsx
9:01:03 PM: 3:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 62:13 Warning: Visible, non-interactive elements with click handlers must have at least one keyboard listener. jsx-a11y/click-events-have-key-events
9:01:03 PM: ./components/link.tsx
9:01:03 PM: 27:7 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: ./components/navbar.tsx
9:01:03 PM: 13:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 34:85 Warning: Insert `,` prettier/prettier
9:01:03 PM: ./components/sections/aboutSection.tsx
9:01:03 PM: 1:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 4:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 5:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 6:1 Warning: `../funFacts` import should occur before import of `@/utils` import/order
9:01:03 PM: 18:7 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 66:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 69:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: ./components/sections/careerSection.tsx
9:01:03 PM: 12:41 Warning: Shorthand props must be listed before all other props react/jsx-sort-props
9:01:03 PM: 15:7 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 108:11 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 109:11 Warning: Shorthand props must be listed before all other props react/jsx-sort-props
9:01:03 PM: ./components/sections/contactSection.tsx
9:01:03 PM: 3:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 5:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 6:1 Warning: `@heroui/input` import should occur before import of `../pageSection` import/order
9:01:03 PM: 7:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 7:1 Warning: `@heroui/button` import should occur before import of `../pageSection` import/order
9:01:03 PM: 30:45 Warning: Shorthand props must be listed before all other props react/jsx-sort-props
9:01:03 PM: 33:7 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 42:11 Warning: Callbacks must be listed after all other props react/jsx-sort-props
9:01:03 PM: 53:13 Warning: Shorthand props must be listed before all other props react/jsx-sort-props
9:01:03 PM: 61:13 Warning: Shorthand props must be listed before all other props react/jsx-sort-props
9:01:03 PM: 69:13 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 71:33 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: ./components/sections/skillsSection.tsx
9:01:03 PM: 1:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 11:41 Warning: Shorthand props must be listed before all other props react/jsx-sort-props
9:01:03 PM: 14:7 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 19:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 21:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 22:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 29:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 31:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 32:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 39:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 41:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 42:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 49:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 51:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 52:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 59:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 61:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 62:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 69:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 71:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 72:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 79:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 81:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 82:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 89:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 91:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 92:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 99:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 101:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 102:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 109:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 111:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 112:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 119:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 121:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 122:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 129:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 131:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 132:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 139:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 141:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 142:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 150:13 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
9:01:03 PM: 152:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 153:15 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: ./components/sections/welcomeSection.tsx
9:01:03 PM: 1:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 5:1 Warning: There should be at least one empty line between import groups import/order
9:01:03 PM: 6:10 Warning: 'siteConfig' is defined but never used. unused-imports/no-unused-imports
9:01:03 PM: 6:10 Warning: 'siteConfig' is defined but never used. @typescript-eslint/no-unused-vars
9:01:03 PM: 15:39 Warning: Shorthand props must be listed before all other props react/jsx-sort-props
9:01:03 PM: 34:45 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: 35:37 Warning: Props should be sorted alphabetically react/jsx-sort-props
9:01:03 PM: info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/app/building-your-application/configuring/eslint#disabling-rules
9:01:04 PM: Collecting page data ...
9:01:07 PM: Generating static pages (0/8) ...
9:01:07 PM: Generating static pages (2/8)
9:01:07 PM: Generating static pages (4/8)
9:01:07 PM: Generating static pages (6/8)
9:01:07 PM: ✓ Generating static pages (8/8)
9:01:08 PM: Finalizing page optimization ...
9:01:08 PM: Collecting build traces ...
9:01:17 PM: Route (app) Size First Load JS
9:01:17 PM: ┌ ○ / 18.7 kB 148 kB
9:01:17 PM: ├ ○ /_not-found 898 B 101 kB
9:01:17 PM: ├ ○ /about 155 B 100 kB
9:01:17 PM: ├ ○ /blog 155 B 100 kB
9:01:17 PM: ├ ○ /docs 155 B 100 kB
9:01:17 PM: └ ○ /pricing 155 B 100 kB
9:01:17 PM: + First Load JS shared by all 100 kB
9:01:17 PM: ├ chunks/4bd1b696-348790fe13a9d914.js 52.5 kB
9:01:17 PM: ├ chunks/517-e21c7022248377f7.js 45.6 kB
9:01:17 PM: └ other shared chunks (total) 1.95 kB
9:01:17 PM: ○ (Static) prerendered as static content
9:01:17 PM:
9:01:17 PM: (build.command completed in 24.1s)
9:01:18 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
9:01:18 PM: Next.js cache saved
9:01:18 PM: Next.js cache saved
9:01:18 PM:
9:01:18 PM: Plugin "@netlify/plugin-nextjs" failed
9:01:18 PM: ────────────────────────────────────────────────────────────────
9:01:18 PM:
9:01:18 PM: Error message
9:01:18 PM: Error: Failed assembling prerendered content for upload
9:01:18 PM: @netlify/plugin-nextjs@5 requires migration steps to support Netlify Forms. Refer to https://ntl.fyi/next-runtime-forms-migration for migration example.
9:01:18 PM:
9:01:18 PM: Plugin details
9:01:18 PM: Package: @netlify/plugin-nextjs
9:01:18 PM: Version: 5.9.4
9:01:18 PM: Repository: git+https://github.com/opennextjs/opennextjs-netlify.git
9:01:18 PM: npm link: https://www.npmjs.com/package/@netlify/plugin-nextjs
9:01:18 PM: Report issues: https://github.com/opennextjs/opennextjs-netlify/issues
9:01:18 PM:
9:01:18 PM: Error location
9:01:18 PM: In "onBuild" event in "@netlify/plugin-nextjs" from Netlify app
9:01:18 PM:
9:01:18 PM: Resolved config
9:01:18 PM: build:
9:01:18 PM: command: npm run build
9:01:18 PM: commandOrigin: ui
9:01:18 PM: publish: /opt/build/repo/.next
9:01:18 PM: publishOrigin: ui
9:01:18 PM: plugins:
9:01:18 PM: - inputs: {}
9:01:18 PM: origin: ui
9:01:18 PM: package: '@netlify/plugin-nextjs'
9:01:18 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
9:01:18 PM: Failing build: Failed to build site
9:01:18 PM: Finished processing build request in 50.955s
You did mention that, but you also provided no log for the alternative execution and the extremely cropped partial screenshot for the failed build displayed only one warning.
Looking at it more closely, my attention is drawn to:
9:01:18 PM: Error message
9:01:18 PM: Error: Failed assembling prerendered content for upload
9:01:18 PM: @netlify/plugin-nextjs@5 requires migration steps to support Netlify Forms. Refer to https://ntl.fyi/next-runtime-forms-migration for migration example.
Have you visited:
https://ntl.fyi/next-runtime-forms-migration
The documentation Netlify tend to point people towards for Netlify Forms + Next is here:
https://opennext.js.org/netlify/forms
1 Like
