Update with-react-esi example (type error)

[Quernest]

Examples bug report

Example name

with-react-esi

Describe the bug

Unable to add custom _app.js file into a project. After creating and building the example via docker-compose up, an error occurs:

node_1 | TypeError: Class constructor App cannot be invoked without 'new' node_1 | at new MyApp (/usr/src/app/dist/.next/server/static/QWF1PHuowO_sU-px49ruG/pages/_app.js:196:102) node_1 | at c (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:323) node_1 | at Sa (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:1) node_1 | at a.render (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:467) node_1 | at a.read (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:58) node_1 | at renderToString (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:53:83) node_1 | at render (/usr/src/app/node_modules/next-server/dist/server/render.js:80:16) node_1 | at renderPage (/usr/src/app/node_modules/next-server/dist/server/render.js:237:20) node_1 | at /usr/src/app/dist/.next/server/static/QWF1PHuowO_sU-px49ruG/pages/_document.js:236:17 node_1 | at Generator.next (<anonymous>)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. clone the example
2. add custom _app.js
3. run docker-compose up --build
4. go to the browser (localhost:80)
5. see internal server error

Expected behavior

Wanted to add styled components provider to custom _app.js and run in production.

Screenshots

System information

• OS: Windows 10
• Browser (if applies) Chrome
• Version of Next.js: latest

Additional context

[Timer]

You have incorrectly configured your Babel configuration to cause this error. Be sure to not invoke Babel yourself, as Next already handles compiling these files for you.

[Timer]

Ah, it appears this example was designed incorrectly. @lfades should we delete it?

[Quernest]

@Timer
I have found the solution, but I'm not sure if this is the right choice in this case.
To run a project in production I use @babel/register

index.js

require('@babel/register')({
  presets: ['@babel/preset-env'],
  ignore: ['node_modules', '.next'],
});

module.exports = require('./server.js');

package.json

  "scripts": {
    "start": "NODE_ENV=production node index.js"
  },

React-ESI looks like the best page caching solution. Please, could you fix your example?

[lfades]

the example needs an update, @Quernest @dunglas If you want to update the example please do 🙏

[sushilbansal]

Hi @Timer , this example project is no longer in the example repo.

[dunglas]

@Timer the example wasn't designed incorrectly. This has been discussed in the original PR (#6225 (comment)), and AFAIK, there is no better options right now.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.