Import MJML breaks the new app router

[razvanbretoiu]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.10.0
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.3-canary.3
      eslint-config-next: 13.4.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

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

App directory (appDir: true), Turbopack (--turbo)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/razvanbretoiu/nextjs-mjml-bug

To Reproduce

1.. Install mjml library (npm install mjml)
2. Create a route in the app directory for the /api/email path
3. In the route use the mjml2html(template) to convert the mjml template into HTML

export async function GET(request: Request) {
  const template = `<mjml><mj-body><mj-section><mj-column><mj-text>Template</mj-text></mj-column></mj-section></mj-body></mjml>`
  const htmlParseResult = mjml2html(template);
  const html = htmlParseResult.html;

  return NextResponse.json({ html });
}

4. Access the localhost:3000/api/email route
5. The route cannot be compiled and the API throws a 404.

Describe the Bug

I cannot use the MJML library with app router, because when I try to access the mjml library, the server throws the below error:

./node_modules/mjml-core/lib/helpers/mjmlconfig.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/mjml-core/lib/helpers/mjmlconfig.js
./node_modules/mjml-core/lib/index.js
./node_modules/mjml/lib/index.js
./src/app/api/email/route.ts

This is the code used in the app/api/email/route.ts file

import {NextResponse} from "next/server";
import mjml2html from "mjml";

export async function GET(request: Request) {
  const template = `<mjml><mj-body><mj-section><mj-column><mj-text>Template</mj-text></mj-column></mj-section></mj-body></mjml>`
  const htmlParseResult = mjml2html(template);
  const html = htmlParseResult.html;

  return NextResponse.json({ html });
}

I've tried to use the MJML library in a server component and it's not working as well. The server throws the following error when I'm trying to access a RSC page

 - error Error: ENOENT: no such file or directory, open '(sc_server)/./node_modules/uglify-js/lib/utils.js'
    at Object.openSync (node:fs:595:3)
    at Object.readFileSync (node:fs:463:35)
    at eval (webpack-internal:///(sc_server)/./node_modules/uglify-js/tools/node.js:18:19)
    at Array.map (<anonymous>)
    at eval (webpack-internal:///(sc_server)/./node_modules/uglify-js/tools/node.js:17:30)
    at eval (webpack-internal:///(sc_server)/./node_modules/uglify-js/tools/node.js:22:2)
    at (sc_server)/./node_modules/uglify-js/tools/node.js (/Users/razvanbretoiu/Workspace/Linnify/learning/ari/.next/server/app/dashboard/orders/page.js:9243:1)
    at __webpack_require__ (/Users/razvanbretoiu/Workspace/Linnify/learning/ari/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/html-minifier/src/htmlminifier.js:7:16)
    at (sc_server)/./node_modules/html-minifier/src/htmlminifier.js (/Users/razvanbretoiu/Workspace/Linnify/learning/ari/.next/server/app/dashboard/orders/page.js:5345:1) {
  digest: undefined
}

Pages Router working fine

I've run the same code using pages router and it's working fine.

import {NextApiRequest, NextApiResponse} from "next";
import mjml2html from "mjml";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const template = `<mjml><mj-body><mj-section><mj-column><mj-text>Template</mj-text></mj-column></mj-section></mj-body></mjml>`
  const htmlParseResult = mjml2html(template);
  const html = htmlParseResult.html;

  return res.status(200).json({ html });
}

So, the problem is happening only in the App Router and not in the Pages Router

Expected Behavior

The application should compile and navigate successfully to the /api/email app route, same as the /api/email-v2 which is using the pages router

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

locally

_WEB-1078

[sannajammeh]

Had the same issue with other dependencies.

[amosbastian]

I'm having the same issue when trying to use mailing.run, which uses @faire/mjml-react. You can add the uglify-js package to experimental.serverComponentsExternalPackages in your next.config.js, which will probably stop the error, but might cause it to not work either (at least in my case it did).

[AliMejbar]

Maybe we can try using react email instead.

[nickcanarelli]

Maybe we can try using react email instead.

This is what I ended up doing and it works flawlessly.

[kristianeboe]

Been fighting this in various different ways for a few days. It took a while to identify that importing mjml, or even using a function that depended upon it, inside of the authOptions object is what caused everything to crash. For us it was a custom sendgrid magicLink provider and the createUser event.

We prevailed by setting up an internal API endpoint that receives email and magicLink as parameters, and then called this endpoint in a fetch request inside the sendgrid magicLink sendVerificationRequest function.

Best of luck!

[balazsorban44]

Hi, after having a closer look at this, this is not related to Turbopack.

The issue is similar to what is described in #52876 (comment)

So adding the following to next.config.js

module.exports = {
  experimental: {
    serverComponentsExternalPackages: ["mjml"],
  },
};

will solve the issue. (Note, we are currently exploring if we can detect these cases automatically)

I verified that the reproduction works with the suggested change. If this is not the case for you, please open a new issue with your (minimal) reproduction, thanks!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.