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
same issue with react-notion-x
Same issue here using semantic-ui-react
there is a reference scheme for react-notion -x: https://github.com/NotionX/react-notion-x/issues/511#issuecomment-1686505610