Closed aronedwards closed 9 months ago
The render
function doesn't use Browsersync, how are you using it exactly?
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,
}
);
}
Should in theory be only fired server-side and testing does suggest that thats true
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.
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)
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.
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
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.
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
Had a few earlier issues with missing loaders which I fixed by extending NextJS Webpack config