-
Notifications
You must be signed in to change notification settings - Fork 30.1k
Description
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.4Which 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 });
}- Access the
localhost:3000/api/emailroute - 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