Mjml or mjml-react not working in serverless function with nextjs

Support
, ,
1

I have tried deploying to vercel without issues so I’m pretty sure this is a netlify problem.

I am making a serverless function that sends a mail using nodemailer.
The mail that is sent is HTML that is rendered on the server from mjml-react.

This is what doesn’t work.

I have isolated this issue as I have deployed to netlify without the mjml to html rendering and just sending plain text in the serverless function, and that works.

These are my dependencies in my package.json:

  "dependencies": {
    "@babel/runtime": "^7.14.6",
    "@contentful/rich-text-react-renderer": "^15.0.0",
    "@contentful/rich-text-types": "^15.0.0",
    "bootstrap": "^5.0.2",
    "contentful": "^8.4.2",
    "mjml": "^4.10.1",
    "mjml-react": "^2.0.0",
    "next": "11.0.1",
    "nodemailer": "^6.6.2",
    "react": "17.0.2",
    "react-bootstrap": "^2.0.0-beta.2",
    "react-dom": "17.0.2",
    "sass": "^1.35.1"
  },
  "devDependencies": {
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.1",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.2"
  }
  • Netlify build settings - Publish directory is set to .next
  • I have entered all environment variables in netlify so that is set up
  • I have target=“serverless” inside next.config.js:
module.exports = {
  reactStrictMode: true,
  target: "serverless",
};
  • Everything is working except for the html rendering with mjml in the serverless function that is named “submission-created”.

The relevant stuff from the deploy log is this:

3:54:29 PM: ────────────────────────────────────────────────────────────────
3:54:29 PM: 1. onPreBuild command from @netlify/plugin-nextjs
3:54:29 PM: ────────────────────────────────────────────────────────────────
3:54:29 PM: ​
3:54:29 PM: ** Warning: support for Next.js >=11.0.0 is experimental **
3:54:30 PM: info - Using webpack 5. Reason: Enabled by default Webpack 5 Adoption | Next.js
3:54:30 PM: No Next.js cache to restore.
3:54:30 PM: ​
3:54:30 PM: (@netlify/plugin-nextjs onPreBuild completed in 719ms)
3:54:30 PM: ​
3:54:30 PM: ────────────────────────────────────────────────────────────────
3:54:30 PM: 2. Build command from Netlify app
3:54:30 PM: ────────────────────────────────────────────────────────────────
3:54:30 PM: ​
3:54:30 PM: $ npm run build

3:54:30 PM: > mysite@0.1.0 build /opt/build/repo

3:54:30 PM: > next build

3:54:31 PM: info - Using webpack 5. Reason: Enabled by default Webpack 5 Adoption | Next.js

3:54:31 PM: warn - No build cache found. Please configure build caching for faster rebuilds. Read more: No Cache Detected | Next.js

3:54:31 PM: info - Checking validity of types…

3:54:34 PM: info - Creating an optimized production build…

3:55:06 PM: (node:1319) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API

3:55:09 PM: warn - Compiled with warnings

3:55:09 PM: ./node_modules/mjml-core/lib/helpers/mjmlconfig.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

3:55:09 PM: ./node_modules/mjml-core/lib/helpers/mjmlconfig.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

3:55:09 PM: ./node_modules/mjml-core/lib/helpers/mjmlconfig.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

3:55:09 PM: ./node_modules/mjml-core/lib/index.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

3:55:09 PM: ./node_modules/next/dist/next-server/server/load-components.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

3:55:09 PM: ./node_modules/next/dist/next-server/server/load-components.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

3:55:09 PM: ./node_modules/next/dist/next-server/server/load-components.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

3:55:09 PM: ./node_modules/next/dist/next-server/server/require.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

3:55:09 PM: ./node_modules/next/dist/next-server/server/require.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

3:55:09 PM: ./node_modules/next/dist/next-server/server/require.js

3:55:09 PM: Critical dependency: the request of a dependency is an expression

And then inside the function log:

3:56:11 PM: 2021-06-30T12:56:11.163Z	undefined	ERROR	Uncaught Exception 	{"errorType":"TypeError","errorMessage":"Cannot read property '1' of undefined","stack":["TypeError: Cannot read property '1' of undefined","    at isFileType (fs.js:178:19)","    at Object.readFileSync (fs.js:367:16)","    at /var/task/nextPage/chunks/543.js:108544:19","    at Array.map (<anonymous>)","    at /var/task/nextPage/chunks/543.js:108543:30","    at Object.35240 (/var/task/nextPage/chunks/543.js:108548:2)","    at __webpack_require__ (/var/task/nextPage/pages/api/submission-created.js:574:43)","    at Object.9044 (/var/task/nextPage/chunks/543.js:23955:16)","    at __webpack_require__ (/var/task/nextPage/pages/api/submission-created.js:574:43)","    at Object.48805 (/var/task/nextPage/chunks/543.js:52390:21)"]}

3:56:11 PM: 2021-06-30T12:56:11.769Z	undefined	ERROR	Uncaught Exception 	{"errorType":"TypeError","errorMessage":"Cannot read property '1' of undefined","stack":["TypeError: Cannot read property '1' of undefined","    at isFileType (fs.js:178:19)","    at Object.readFileSync (fs.js:367:16)","    at /var/task/nextPage/chunks/543.js:108544:19","    at Array.map (<anonymous>)","    at /var/task/nextPage/chunks/543.js:108543:30","    at Object.35240 (/var/task/nextPage/chunks/543.js:108548:2)","    at __webpack_require__ (/var/task/nextPage/pages/api/submission-created.js:574:43)","    at Object.9044 (/var/task/nextPage/chunks/543.js:23955:16)","    at __webpack_require__ (/var/task/nextPage/pages/api/submission-created.js:574:43)","    at Object.48805 (/var/task/nextPage/chunks/543.js:52390:21)"]}

3:56:11 PM: 58e0c140 Duration: 553.00 ms	Memory Usage: 45 MB	

3:56:11 PM: Unknown application error occurred
TypeError

INTERESTINGLY ENOUGH – It works with target:“experimental-serverless-trace” in next.config.js:

module.exports = {
  reactStrictMode: true,
  target: "experimental-serverless-trace",
};

I don’t know why I should use experimental-serverless-trace here, I only tried it.
I believe it shouldn’t be used here, right?

What is the issue? Why doesn’t it work with target: “serverless”?

2

From serverless NextJS docs:

image

That might be a possible explanation?

4

Thanks for your reply!

Well what is this Next.js on Netlify | Netlify Docs
and why is there no documentation on “experimental-serverless-trace” just about anywhere?

I still feel like I should be using target: “serverless” and not some experimental feature for something that seems completely ordinary.

Also, if vercel is using it, why is not netlify using it?

6

Bumping this as I would like to use netlify and therefore hopes this can get resolved

7

Bumping again because no one answers

12

Hi @LB22,

We don’t forget about the threads, sometimes it just takes a little longer to discuss it internally.

It might be a problem with the NextJS plugin, but can’t say for sure. As to why it works with a specific export, we are not sure and you’re probably lucky that it’s at least working somehow.

You could open an issue on GitHub - netlify/next-runtime: The Next.js Runtime allows Next.js to run on Netlify with zero configuration as they could check what’s wrong with the dependency level troubleshooting in some cases.

I know this probably wasn’t the solution you’re looking for, but maybe this will lead you somewhere.

1 Like