Like what we’re doing? Star us on GitHub!

Transpile ESM only package

rrums
4 weeks ago
8

Has anyone transpiled ESM-only package to cjs to use in PayloadCMS?



I need suggestions how to implement this thing. Thank you in advance.



I've tried rollup, but seems cant work, I got

window is not defined

on the package when build

  • thgh
    4 weeks ago

    I have tried to combine Payload with Astro and came across the same issue

  • vladi
    4 weeks ago

    Trying to integrate the Lit components, same issue after building Lit component from ESM to CJS. Not sure if it will work, but in compiled CJS code to create condition not to use window if it is not available?

  • Jesse Sivonen
    4 weeks ago

    @rrums Does it work better if Rollup outputs UMD instead of CJS?



    Another suggestion: if you are using

    window

    variable to access global scope and it must work in back-end (Node.js) and front-end (Browser) try using

    globalThis

    instead.

  • rrums
    4 weeks ago

    @Jesse Sivonen

    window

    variable is in compiled CJS, just tried UMD output. But still the same.



    Error:


    /path/Sites/payload/build/lit.js:5
    })(this, (function (exports) { 'use strict';
      ^
    ReferenceError: window is not defined
        at /path/Sites/payload/build/lit.js:12:12
        at /path/Sites/payload/build/lit.js:2:65
        at Object.<anonymous> (/path/Sites/payload/build/lit.js:5:3)
        at Module._compile (node:internal/modules/cjs/loader:1155:14)
        at Module.m._compile (/path/Sites/payload/node_modules/ts-node/src/index.ts:1056:23)
        at Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
        at Object.require.extensions.<computed> [as .js] (/path/Sites/payload/node_modules/ts-node/src/index.ts:1059:12)
        at Module.load (node:internal/modules/cjs/loader:1033:32)
        at Function.Module._load (node:internal/modules/cjs/loader:868:12)
        at Module.require (node:internal/modules/cjs/loader:1057:19)
  • Jesse Sivonen
    4 weeks ago

    @rrums Aa, I see. You can to import it only to front-end, maybe using dynamic import. Or try to replace window with globalThis using @rollup/plugin-replace:

    https://github.com/rollup/plugins/tree/master/packages/replace
  • rrums
    4 weeks ago

    @Jesse Sivonen I'm trying to implement lit+react to swap payload component or for ui field. I think payload do SSR in this case.



    Tried to replace window with globalThis, then got another one,

    HTMLelement is not defined


    use

    rollup

    along with

    @rollup/plugin-node-resolve

    and set

    exportConditions

    to

    node

    solve my problem

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More