Transpile ESM only package

rrums2 years ago

6

• 

  thgh.2 years ago

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

• 

  uljanovs2 years 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?

• 

  jessesivonen2 years ago

  @946373741175267329

  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.

• 

  rrums2 years ago

  @378602619431682071

  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)

• 

  jessesivonen2 years ago

  @946373741175267329

  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
• 

  rrums2 years ago

  @378602619431682071

  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