NextJS app directory is not handling Babel LOOSE properties properly

jvenki commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64
Binaries:
  Node: 18.12.1
  npm: 8.19.2
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.1.2-canary.0
  eslint-config-next: 13.0.7
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/jvenki/nextjs-evaluation

To Reproduce

Just start the server

npm run dev

You will see the errors in the console. If you access http://localhost:3000/home-app, you will get the same error.

Describe the Bug

Same code works perfectly in pages directory but doesnt work if ported appropriately into the app directory

Pages Directory Commit - https://github.com/jvenki/nextjs-evaluation/commit/b31c6c7b6870e12e8ae2c83ca25c413f11a13ccd App Directory Commit - https://github.com/jvenki/nextjs-evaluation/commit/eba15dd6dc0812d951b451f521769805acb92b82

Looks like Transpilation configuration (either through Babel or SWC) is working correctly for code inside pages but not if i is inside app. I get the error

TypeError: Cannot read properties of undefined (reading 'prototype')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
prototype
node_modules/@babel/runtime/helpers/inheritsLoose.js (3:48)
RefFindNode
node_modules/@fluentui/react-component-ref/dist/commonjs/RefFindNode.js (40:31)
React
node_modules/@fluentui/react-component-ref/dist/commonjs/RefFindNode.js (99:2)
(sc_server)/./node_modules/@fluentui/react-component-ref/dist/commonjs/RefFindNode.js
file:///Users/venkateshj/Workspace/Programs/temp/nextjs-evaluation/.next/server/app/home-app/page.js (955:1)

This is a 3rd Party Library and it is distributed with inheritsLoose runtime helper of Babel. This works properly within pages but not within app.

Note that I tried with Babel also by explicitly having babel.config.js file.

Expected Behavior

Should work without the above mentioned error

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

jvenki commented 1 year ago

Please note that the URL http://localhost:3000/home-pages continues tot work fine even after enabling app

jasongalvin commented 1 year ago

I'm seeing the exact same error. In my case the error goes away when I remove all the semantic-ui-react components from my pages in the app directory.

jvenki commented 1 year ago

But I want to use this library even from the pages inside app directory.

jasongalvin commented 1 year ago

Yes, me too. I am simply adding info to your error report in hopes it helps someone figure out what is causing this error.

jvenki commented 1 year ago

Any updates?

jvenki commented 1 year ago

It is not fixed in latest canary also

npx --no-install next info

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64
Binaries:
  Node: 18.12.1
  npm: 8.19.2
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.1.7-canary.8
  eslint-config-next: 13.0.7
  react: 18.2.0
  react-dom: 18.2.0

codescalar commented 1 year ago

Using SemanticUI here as well and also running into the same issue. Adding the 'use client' pragma does seem to fix it but of course you lose the benefit of Server Components.

Zerquix18 commented 1 year ago

Same issue here using semantic-ui-react

pierratono commented 1 year ago

same issue @nextui-org/react

achimkoellner commented 1 year ago

Same Issue, we tried overriding the @babel/runtime to pin to version 7.22.5 (in semantic-ui-react) but this did not work

ktgerg commented 1 year ago

Same here, I wanted to port over an internal facebook create react app without changing the css library and was extremely interested in using next js

connorpwilliams commented 1 year ago

Seems like I can only get semantic ui to work when adding the 'use client' directive at the top of any component. Trying to learn Next now, coming from React/Express in past projects. Not sure why having to specify use client at the top is solving this for me.