Problem/Motivation

npm i next@^14.0         
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: ksb-website@1.0.0
npm WARN Found: next@13.5.6
npm WARN node_modules/next
npm WARN   peer next@"^10.0.8 || ^11.0 || ^12.0 || ^13.0 || ^14.0" from @sentry/nextjs@7.76.0
npm WARN   node_modules/@sentry/nextjs
npm WARN     @sentry/nextjs@"^7.65.0" from the root project
npm WARN   5 more (@storybook/nextjs, next-drupal, nextjs-drupal-webform, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer next@"^13.0.0" from nextjs-drupal-webform@1.0.0
npm WARN node_modules/nextjs-drupal-webform
npm WARN   nextjs-drupal-webform@"^1.0.0" from the root project

As next.js 14 does not provide any new APIs it should "just work".

Issue fork next_webform-3397816

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

yobottehg created an issue. See original summary.

yobottehg opened merge request !71

yobottehg’s picture

yobottehg commented

There is currently no cypress-browser docker image with NodeJS 18 >= 18.17 which is the minimum requirement of next.js 14.

Tests are failing on the Node 20 image.

Unsure what is the wanted approach here:

Option 1: Make tests pass on NodeJS 20
Option 2: Use different docker image as test runner on GitLab.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented

Thanks for reporting the issue and working on this! Great work so far btw.

I think it would be great if we could make the tests work with Node.js 20. However, I'm wondering if the problem is Node.js 20 specific. Can you reproduce this locally?

I can see the following error in the CI output which sounds like there's something wrong with the application itself:

> Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

hooroomoo made their first commit to this issue’s fork.

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented

I looked at the test app locally and was getting TypeError: Cannot read properties of null (reading 'useEffect') and "Invalid hook call. Hooks can only be called inside of the body of a function component." along with other errors. It was crashing on this import statement.

import { useEffect, useState, useRef } from 'react';

Seems the error was happening because of:

This happens because both the main project and the submodule have their own instances of React installed in their respective 'node_modules' directories. The problem arises when the code from your submodule tries to use its instance of React, while the rest of your Next.js project uses a different instance.

This situation leads to an infamous error: "Invalid hook call. Hooks can only be called inside of the body of a function component." This happens because React hooks expect to be working with a single instance of React. If there are two or more instances, hooks can't function correctly, causing our application to crash (SOURCE: https://jlte.ch/blogs/solving-module-duplication-issues-nextjs-react-sub...)

with the submodule being our tests/example-app used for testing with its own node modules.

I added new webpack config in tests/example-app/next.config.js from the blog post which instructs webpack to resolve all imports of 'react' to the specific version of React in the node_modules directory.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Active » Fixed

Nice! 👏 Thank you @hooroomoo for fixing this and explaining how you fixed it!

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented

FYI, tagged a new release for this: https://www.npmjs.com/package/nextjs-drupal-webform/v/1.1.0.

yobottehg’s picture

yobottehg commented
Status: Fixed » Needs work

Sorry but somehow the peer dependencies are not working for me.
Trying to install 1.1 on my next project yields the following:

npm i nextjs-drupal-webform     
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ksb-website@1.0.0
npm ERR! Found: next@13.5.6
npm ERR! node_modules/next
npm ERR!   next@"^13.5.6" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^13.0.0 | ^14.0.0" from nextjs-drupal-webform@1.1.0
npm ERR! node_modules/nextjs-drupal-webform
npm ERR!   nextjs-drupal-webform@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Directly upgrading to 14 also does not work:

npm i nextjs-drupal-webform@^1.1.0 next@^14.0.1
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ksb-website@1.0.0
npm ERR! Found: next@14.0.1
npm ERR! node_modules/next
npm ERR!   next@"^14.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^13.0.0 | ^14.0.0" from nextjs-drupal-webform@1.1.0
npm ERR! node_modules/nextjs-drupal-webform
npm ERR!   nextjs-drupal-webform@"^1.1.0" from the root project

From this SO thread i think i did the equation wrong:
https://stackoverflow.com/questions/47309598/make-your-npm-package-suppo...

and it needs to be

  "peerDependencies": {
    "next": "^13.0.0 || ^14.0.0",

yobottehg opened merge request !72

yobottehg’s picture

yobottehg commented
Status: Needs work » Needs review
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Needs review » Fixed

Thank you @yobottehg! Not sure why this was working when I tested it locally but you're right that the dependency constraint is wrong. Making a new release in a moment.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.