Transpile ESM only package

default discord avatar
rrums
9 months 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

  • default discord avatar
    thgh
    9 months ago

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

  • default discord avatar
    vladi
    9 months 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?

  • default discord avatar
    Jesse Sivonen
    9 months 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.

  • default discord avatar
    rrums
    9 months 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)
  • default discord avatar
    Jesse Sivonen
    9 months 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
  • default discord avatar
    rrums
    9 months 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
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.