next.js: NextJS app directory is not handling Babel LOOSE properties properly

Verify canary release

  • 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

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 5
  • Comments: 19

Most upvoted comments

same issue with react-notion-x

Same issue here using semantic-ui-react

same issue with react-notion-x

there is a reference scheme for react-notion -x: https://github.com/NotionX/react-notion-x/issues/511#issuecomment-1686505610