search

maizzle / framework

Quickly build HTML emails with Tailwind CSS.
https://maizzle.com
MIT License
1.23k stars 49 forks source link

Browser-Sync issues when trying to use @maizzle/framework in NextJS project #1109

Closed aronedwards closed 9 months ago

aronedwards commented 10 months ago

Hi All,

Seems others have managed but not sure how best to get around issues with Browser-sync requirements when trying to just use Maizzle as an API within NextJS ( via the @maizzle/framework library)

Current Error is 

Module not found: Can't resolve 'emitter'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/serve-index/index.js
./node_modules/browser-sync/dist/server/utils.js
./node_modules/browser-sync/dist/browser-sync.js
./node_modules/browser-sync/dist/index.js
./node_modules/@maizzle/framework/src/commands/serve.js
./node_modules/@maizzle/framework/src/index.js

Had a few earlier issues with missing loaders which I fixed by extending NextJS Webpack config


    config.module.rules.push({
      test: /\.(json|map)$/,
      loader: "json-loader",
    });
    config.module.rules.push({
      test: /.node$/,
      loader: "node-loader",
    });
    // Important: return the modified config
    return config;
  },``` 

FYI have had the same error trying to use it in a Remix project

Any advice would be appreciated
cossssmin commented 10 months ago

The render function doesn't use Browsersync, how are you using it exactly?

aronedwards commented 10 months ago

Trying to use Maizzle render in a Next app/api route Only 'maizzle' import in package.json is "@maizzle/framework": "^4.6.1",

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import Maizzle from "@maizzle/framework";

export async function GET(request: NextRequest) {
  const renderedHTML = await Maizzle.render(
    `<!DOCTYPE {{{ page.doctype || 'html' }}}><head><style>
      {{{ page.css }}}
    </style></head><html><body><h1>TEST</h1></body></html>`,
    {
      maizzle: {
        inlineCSS: true,
        build: {
          templates: {
            source: "src/templates",
            destination: {
              extension: "/",
              path: "build_local",
            },
            assets: {
              source: "src/images",
              destination: "images",
            },
          },
        },
        filters: {},
      },
      tailwind: {},
    } as any
  ).catch((error) => console.log(error));

  return NextResponse.json(
    {
      body: renderedHTML ? renderedHTML.html : "fail",
      path: request.nextUrl.pathname,
      query: request.nextUrl.search,
    },
    {
      status: 200,
    }
  );
}
aronedwards commented 10 months ago

Should in theory be only fired server-side and testing does suggest that thats true

cossssmin commented 10 months ago

Maybe it's because you're importing everything, including the serve method.

Try importing the named export only:

- import Maizzle from "@maizzle/framework";
+ import { render } from "@maizzle/framework";

Then:

- const renderedHTML = await Maizzle.render(
+ const renderedHTML = await render(

PS: the build key in the config is not used by the render method, you can safely remove that.

aronedwards commented 10 months ago

One error code down, but getting others now...

Import trace for requested module:
./node_modules/postcss-import/lib/process-content.js
./node_modules/postcss-import/index.js
./node_modules/@maizzle/framework/src/generators/postcss.js
./node_modules/@maizzle/framework/src/index.js
./src/app/api/email/route.ts

./node_modules/posthtml-fetch/lib/index.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/posthtml-fetch/lib/index.js
./node_modules/@maizzle/framework/src/generators/posthtml/index.js
./node_modules/@maizzle/framework/src/generators/output/to-string.js
./node_modules/@maizzle/framework/src/generators/output/index.js
./node_modules/@maizzle/framework/src/commands/build.js
./node_modules/@maizzle/framework/src/index.js
./src/app/api/email/route.ts
 ⚠ ./node_modules/@maizzle/framework/src/utils/helpers.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/@maizzle/framework/src/utils/helpers.js
./node_modules/@maizzle/framework/src/commands/serve.js
./node_modules/@maizzle/framework/src/index.js
./src/app/api/email/route.ts

./node_modules/browserslist/node.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/browserslist/node.js
./node_modules/browserslist/index.js
./node_modules/stylehacks/src/index.js
./node_modules/postcss-merge-longhand/src/lib/decl/borders.js
./node_modules/postcss-merge-longhand/src/lib/decl/index.js
./node_modules/postcss-merge-longhand/src/index.js
./node_modules/@maizzle/framework/src/generators/postcss.js
./node_modules/@maizzle/framework/src/index.js
./src/app/api/email/route.ts

./node_modules/browserslist/node.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/browserslist/node.js
./node_modules/browserslist/index.js
./node_modules/stylehacks/src/index.js
./node_modules/postcss-merge-longhand/src/lib/decl/borders.js
./node_modules/postcss-merge-longhand/src/lib/decl/index.js
./node_modules/postcss-merge-longhand/src/index.js
./node_modules/@maizzle/framework/src/generators/postcss.js
./node_modules/@maizzle/framework/src/index.js
./src/app/api/email/route.ts

./node_modules/postcss-import/lib/process-content.js
Module not found: Can't resolve 'sugarss' in '/Users/aronedwards/Documents/code/email-templater/node_modules/postcss-import/lib'

Import trace for requested module:
./node_modules/postcss-import/lib/process-content.js
./node_modules/postcss-import/index.js
./node_modules/@maizzle/framework/src/generators/postcss.js
./node_modules/@maizzle/framework/src/index.js
./src/app/api/email/route.ts

./node_modules/posthtml-fetch/lib/index.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/posthtml-fetch/lib/index.js
./node_modules/@maizzle/framework/src/generators/posthtml/index.js
./node_modules/@maizzle/framework/src/generators/output/to-string.js
./node_modules/@maizzle/framework/src/generators/output/index.js
./node_modules/@maizzle/framework/src/commands/build.js
./node_modules/@maizzle/framework/src/index.js
./src/app/api/email/route.ts

&

./node_modules/posthtml-fetch/lib/index.js
./node_modules/@maizzle/framework/src/generators/posthtml/index.js
./node_modules/@maizzle/framework/src/generators/output/to-string.js
./node_modules/@maizzle/framework/src/generators/output/index.js
./node_modules/@maizzle/framework/src/commands/build.js
./node_modules/@maizzle/framework/src/index.js
./src/app/api/email/route.ts
 ⨯ SyntaxError: Invalid left-hand side in assignment
    at (rsc)/./node_modules/@maizzle/framework/src/generators/output/to-disk.js (/Users/aronedwards/Documents/code/email-templater/.next/server/vendor-chunks/@maizzle.js:79:1)
    at __webpack_require__ (/Users/aronedwards/Documents/code/email-templater/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/@maizzle/framework/src/generators/output/index.js:2:13)
    at (rsc)/./node_modules/@maizzle/framework/src/generators/output/index.js (/Users/aronedwards/Documents/code/email-templater/.next/server/vendor-chunks/@maizzle.js:69:1)
    at __webpack_require__ (/Users/aronedwards/Documents/code/email-templater/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/@maizzle/framework/src/commands/build.js:3:16)
    at (rsc)/./node_modules/@maizzle/framework/src/commands/build.js (/Users/aronedwards/Documents/code/email-templater/.next/server/vendor-chunks/@maizzle.js:19:1)
    at __webpack_require__ (/Users/aronedwards/Documents/code/email-templater/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/@maizzle/framework/src/commands/serve.js:5:21)
    at (rsc)/./node_modules/@maizzle/framework/src/commands/serve.js (/Users/aronedwards/Documents/code/email-templater/.next/server/vendor-chunks/@maizzle.js:29:1)
    at __webpack_require__ (/Users/aronedwards/Documents/code/email-templater/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/@maizzle/framework/src/index.js:1:15)
    at (rsc)/./node_modules/@maizzle/framework/src/index.js (/Users/aronedwards/Documents/code/email-templater/.next/server/vendor-chunks/@maizzle.js:159:1)
    at __webpack_require__ (/Users/aronedwards/Documents/code/email-templater/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/api/email/route.ts:6:76)
cossssmin commented 10 months ago

Don't know what the fix for that is, sorry, looks like a Webpack or Next issue and I'm not familiar with either :(

EDIT: does module.unknownContextCritical=false in Webpack help? Just found it searching for the error.

aronedwards commented 10 months ago

Sadly not, will try and dig a little deeper if have some time tomorrow, otherwise will just try to host as a simple serverless function

cossssmin commented 9 months ago

I think it's best to host it as a lambda function yes, Maizzle and its dependencies are currently CJS and there could be many other things that don't work in an esm/ts project.