Browser-Sync issues when trying to use @maizzle/framework in SvelteKit project

[socketopp]

• Maizzle Version: ^4.8.4
• Node.js Version:^18.17.0
• Svelte Version: ^5.0.0-next.143

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 SvelteKit (via the @maizzle/framework library)

Current Errors are related to emitter and ERROR: No loader is configured for ".map". Anyone have any ideas how to fix this?

✘ [ERROR] Could not resolve "emitter"

    node_modules/batch/index.js:9:24:
      9 │   var Emitter = require('emitter');
  You can mark the path "emitter" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this "require" call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

[vite] error while updating dependencies:
Error: Build failed with 13 errors:
node_modules/batch/index.js:9:24: ERROR: Could not resolve "emitter"
node_modules/browser-sync/dist/bin.js:137:22: ERROR: No loader is configured for ".map" files: node_modules/browser-sync/dist/cli/command.init.js.map

✘ [ERROR] No loader is configured for ".map" files: node_modules/browser-sync/dist/cli/command.start.js.map
    node_modules/browser-sync/dist/bin.js:137:22:
      137 │     const m = require(`./cli/command.${opts.cli.input[0]}`);

[cossssmin]

If you're doing this:

const Maizzle = require('@maizzle/framework')

that exports several methods, including serve which loads Browsersync:

https://github.com/maizzle/framework/blob/9e64b58b00ad3081c27b02d9fc949ca30bfdc607/src/index.js#L9-L17

Try destructuring it and only get the render export:

const { render } = require('@maizzle/framework')

[cossssmin]

So something like this perhaps:

const { render } = require('@maizzle/framework')

async function renderHtml() {
  let { html } = await render('your HTML', options)

  return html
}

renderHtml()

[socketopp]

const { render } = require('@maizzle/framework')

Do @maizzle/framework support ESM?

import { render } from '@maizzle/framework'

I did this but the errors kept coming.

[cossssmin]

Maizzle is CJS but you should be able to import CJS in ESM.

Make sure you either have "type": "module" in your package.json or just use the .mjs extension for your file where you're importing Maizzle.

[socketopp]

Maizzle is CJS but you should be able to import CJS in ESM.

Make sure you either have "type": "module" in your package.json or just use the .mjs extension for your file where you're importing Maizzle.

Using module. However, I don't think using .mjs will work in my SvelteKit project since rollup have problems parsing it.

[vite] Pre-transform error: Expected ',', got ':'
11:13:18 [vite] Error when evaluating SSR module /src/routes/dashboard/campaigns/+page.svelte: failed to import "/src/lib/emails/maizzle.mjs"
|- RollupError: Expected ',', got ':'

[cossssmin]

I see. Try asking in the Svelte community for a workaround, unfortunately I'm not familiar with it or Rollup, sorry.