search

zalify / easy-email-editor

Easy Email Editor is a feature-rich, top open-source SaaS email editor based on React and MJML.
https://email.maocanhua.cn/
MIT License
1.73k stars 350 forks source link

Won't build when part of a Next.js project #88

Closed timbrownls20 closed 2 years ago

timbrownls20 commented 2 years ago

We are getting the below error when building with Next.js

It seems to be the mjml brower - perhaps linked to this issue

https://github.com/mjmlio/mjml/issues/2173

Seems like webpack doesn't like it - though we think that the mjml-browser is already packed.

Any ideas what the issue might be?

Many Thanks

email-engine-ui:build: info  - Loaded env from /Users/timbrown/Documents/development/github/email-engine/apps/ui/.env.local
email-engine-ui:build: info  - Checking validity of types...
email-engine-ui:build: info  - Creating an optimized production build...
email-engine-ui:build: (node:48420) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
email-engine-ui:build: (Use `node --trace-deprecation ...` to show where the warning was created)
email-engine-ui:build: info  - Compiled successfully
email-engine-ui:build: info  - Collecting page data...
email-engine-ui:build: 
email-engine-ui:build: > Build error occurred
email-engine-ui:build: ReferenceError: window is not defined
email-engine-ui:build:     at Object.<anonymous> (/Users/timbrown/Documents/development/github/email-engine/apps/ui/node_modules/mjml-browser/lib/index.js:1:230)
email-engine-ui:build:     at Module._compile (node:internal/modules/cjs/loader:1101:14)
email-engine-ui:build:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
email-engine-ui:build:     at Module.load (node:internal/modules/cjs/loader:981:32)
email-engine-ui:build:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
email-engine-ui:build:     at Module.require (node:internal/modules/cjs/loader:1005:19)
email-engine-ui:build:     at require (node:internal/modules/cjs/helpers:102:18)
email-engine-ui:build:     at Module.<anonymous> (/Users/timbrown/Documents/development/github/email-engine/apps/ui/node_modules/easy-email-core/lib/index.cjs.js:1:677)
email-engine-ui:build:     at Module._compile (node:internal/modules/cjs/loader:1101:14)
email-engine-ui:build:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) {
email-engine-ui:build:   type: 'ReferenceError'
email-engine-ui:build: }
m-Ryan commented 2 years ago

1. import this file

browserMock.ts

import jsdom from 'jsdom';
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
(global as any).window = dom.window;
(global as any).document = dom.window.document;
(global as any).navigator = dom.window.navigator;
(global as any).DOMParser = dom.window.DOMParser;
  1. import mjml from 'mjml'; (not mjml-browser)
timbrownls20 commented 2 years ago

Thanks for this. Much appreciated. We also fixed it on the Next.js side by changing the import of the component that contains easy-email. So

import { EmailTemplateDesigner } from '../EmailTemplateDesigner';

changed to

import dynamic from "next/dynamic";

import type { EmailTemplateDesigner as ComponentType } from '../EmailTemplateDesigner';

const EmailTemplateDesigner = dynamic(() =>
  import('../EmailTemplateDesigner').then((lib) => lib.EmailTemplateDesigner as any),
  { ssr: false }
) as typeof ComponentType;