Transpile ESM only package

rrums

9 months ago

8

• 

  thgh

  9 months ago

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

• 

  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?

• 

  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.

• 

  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)

• 

  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
• 

  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