error with create-next-app

[brownie11636]

I was using this app really well until one day it started to not work in my project with a message Error: Invariant getCompilationError called outside render worker.
To find the problem, I installed this package on create-next-app and tried to run it, but I got the same error.
The strange thing is that it seems to work well in the sandbox of this repository.

what should i do to use it with create-next-app?

How to reproduce:

$ npx create-next-app
Need to install the following packages:
create-next-app@13.5.3
Ok to proceed? (y) y
√ What is your project named? ... create-next-app
√ Would you like to use TypeScript? ... No 
√ Would you like to use ESLint? ... No 
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias? ... No

npm install next-dev-https

npm run dev  (after edit "dev " script as "next-dev-https --https" )

full error message:

Error: Invariant getCompilationError called outside render worker
    at DevServer.getCompilationError (C:\Users\Admin\create-next-app\node_modules\next\dist\server\dev\next-dev-server.js:578:15)
    at DevServer.findPageComponents (C:\Users\Admin\create-next-app\node_modules\next\dist\server\dev\next-dev-server.js:526:43)
    at async DevServer.renderErrorToResponseImpl (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:1800:26)
Error: Invariant getFallbackErrorComponents called outside render worker
    at DevServer.getFallbackErrorComponents (C:\Users\Admin\create-next-app\node_modules\next\dist\server\dev\next-dev-server.js:567:15)
    at DevServer.renderErrorToResponseImpl (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:1871:51)
    at async pipe.req.req (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:1728:30)
    at async DevServer.pipeImpl (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:825:25)
    at async DevServer.run (C:\Users\Admin\create-next-app\node_modules\next\dist\server\dev\next-dev-server.js:348:28)
    at async DevServer.handleRequestImpl (C:\Users\Admin\create-next-app\node_modules\next\dist\server\base-server.js:756:20)

[remziatay]

The error message is different on Next v13.5.4

TypeError: Cannot read properties of undefined (reading 'getCompilationError')
    at DevServer.invokeDevMethod (/Users/remziatay/demo-shop/node_modules/next/dist/server/dev/next-dev-server.js:98:39)
    at DevServer.getCompilationError (/Users/remziatay/demo-shop/node_modules/next/dist/server/dev/next-dev-server.js:560:27)
    at DevServer.findPageComponents (/Users/remziatay/demo-shop/node_modules/next/dist/server/dev/next-dev-server.js:519:43)
    at async DevServer.renderErrorToResponseImpl (/Users/remziatay/demo-shop/node_modules/next/dist/server/base-server.js:1804:26)
TypeError: Cannot read properties of undefined (reading 'getFallbackErrorComponents')
    at DevServer.invokeDevMethod (/Users/remziatay/demo-shop/node_modules/next/dist/server/dev/next-dev-server.js:98:39)
    at DevServer.getFallbackErrorComponents (/Users/remziatay/demo-shop/node_modules/next/dist/server/dev/next-dev-server.js:553:20)
    at DevServer.renderErrorToResponseImpl (/Users/remziatay/demo-shop/node_modules/next/dist/server/base-server.js:1875:51)
    at async pipe.req.req (/Users/remziatay/demo-shop/node_modules/next/dist/server/base-server.js:1732:30)
    at async DevServer.pipeImpl (/Users/remziatay/demo-shop/node_modules/next/dist/server/base-server.js:826:25)
    at async DevServer.run (/Users/remziatay/demo-shop/node_modules/next/dist/server/dev/next-dev-server.js:348:28)
    at async DevServer.handleRequestImpl (/Users/remziatay/demo-shop/node_modules/next/dist/server/base-server.js:757:20)

[markolazarevic9]

I have the same error message on next v13.5.5

[brownie11636]

@markolazarevic9 @remziatay

in my case, i'm running a simple custom server for https based on below links.
and it works well

vercel/next.js#10935
https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

in fact, next-dev-https presumably works the same way, but I can't figure out why it doesn't work in my case.

anyway, my scripts are like this

server_dev.js:

const { createServer } = require("https");
const { parse } = require("url");
const next = require("next");
const fs = require("fs");
const ip = require("ip");

const hostname = ip.address();
const port = 3000;

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

const httpsOptions = {
  key: fs.readFileSync("./self-assigned-key.pem"),
  cert: fs.readFileSync("./self-assigned.pem"),
};

app.prepare().then(() => {
  createServer(httpsOptions, async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true);
      await handle(req, res, parsedUrl);
    } catch (err) {
      console.error("Error occurred handling", req.url, err);
      res.statusCode = 500;
      res.end("internal server error");
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on https://${hostname}:${port}`);
  });
});

package.json:

...
"scripts": {
    "dev": "next dev -p 3000",
    "dev-https": "node server_dev.js",
    "build": "next build",
    "start": "next start"
  },

[TobiasMelen]

Hey, sorry for neglecting this package. It turns out NextJS server API seems to be quite the moving target, that requires frequent tuning with NextJS releases. The combination of limited time in life, not currently working with NextJS and the fact that this solution is incompatible with Turbopack has made me decided to not continue supporting this package.

Meanwhile NextJS has implemented experimental support for https in the official package, i would recommend trying that solution over this package. vercel/next.js#10935 (comment)

If running into issues when NextJS updates i could also recommend just keeping a server around like @brownie11636 suggest. This package can be used a template: https://github.com/TobiasMelen/next-dev-https/blob/main/src/server.js

Is anyone currently having urgent issues in their project because of this package not working with latest NextJS versions? Will keep the issue around for a couple of days.

[remziatay]

Thank you @brownie11636 @TobiasMelen. I've had some problems with --experimental-https but @brownie11636's suggestion works well 🙂

Anyone who doesn't want to deal with certificates, here is what I ended up with, also copying certificate generation part. Need to install selfsigned npm package

const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const path = require('path');
const { X509Certificate } = require('crypto');
const selfSigned = require('selfsigned');

const hostname = 'localhost';
const port = 4430;

const generateCertificate = () => {
  const certDir = path.join(__dirname, 'certificates');

  if (!fs.existsSync(certDir)) {
    fs.mkdirSync(certDir, { recursive: true });
  }

  const certPath = path.join(certDir, 'cert-sha256.pem');
  const keyPath = path.join(certDir, 'key-sha256.pem');
  const existingCert = fs.existsSync(certPath) && fs.readFileSync(certPath, { encoding: 'utf-8' });
  const existingKey = fs.existsSync(keyPath) && fs.readFileSync(keyPath, { encoding: 'utf-8' });

  if (existingCert && existingKey && new Date(new X509Certificate(existingCert).validTo) > new Date()) {
    return { cert: existingCert, key: existingKey };
  }

  const selfSignedCert = selfSigned.generate(undefined, {
    algorithm: 'sha256',
    keySize: 2048,
  });

  fs.writeFileSync(certPath, selfSignedCert.cert);
  fs.writeFileSync(keyPath, selfSignedCert.private);

  return { cert: selfSignedCert.cert, key: selfSignedCert.private };
};

const app = next({ dev: true, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer(generateCertificate(), async (req, res) => {
    try {
      const parsedUrl = parse(req.url ?? '', true);
      await handle(req, res, parsedUrl);
    } catch (err) {
      console.error('Error occurred handling', req.url, err);
      res.statusCode = 500;
      res.end('internal server error');
    }
  }).listen(port, () => {
    console.log(`Ready on https://${hostname}:${port}`);
  });
});