Skip to content

Import MJML breaks the new app router #50042

@razvanbretoiu

Description

@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 });
}
  1. Access the localhost:3000/api/email route
  2. 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
}
Screenshot 2023-05-19 at 13 39 24

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.linear: turbopackConfirmed issue that is tracked by the Turbopack team.locked

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions