Thanks to visit codestin.com
Credit goes to github.com

Skip to content

ESM and CommonJS path issue in root package.json exports #157

@lerrybe

Description

@lerrybe

It seems that the current exports field in the package.json for the lottie-player module is defined as follows:

"exports": {
  ".": {
    "import": "./dist/lottie-player.cjs.js",
    "require": "./dist/lottie-player.esm.js"
  },
  "./sw": {
    "import": "./dist/sw/lottie-player.cjs.js",
    "require": "./dist/sw/lottie-player.esm.js"
  },
  // ... same issue for ./gl, ./sw-lite, ./gl-lite
}

After building the WebAssembly and Web Component locally, I found that certain examples (e.g., example/react, example/vue) were unable to resolve the module properly.
(These example/{framework} directories were created while working on [this issue].)

Image

After changing the configuration as below, all examples worked correctly -
(example/react, example/vue, benchmark.html, index.html, lottie.html, software-lite.html, software.html, etc.)

"exports": {
  ".": {
    "import": "./dist/lottie-player.esm.js", // esm
    "require": "./dist/lottie-player.cjs.js" // cjs
  },
  "./sw": {
    "import": "./dist/sw/lottie-player.esm.js",
    "require": "./dist/sw/lottie-player.cjs.js"
  },
  // ... same issue for ./gl, ./sw-lite, ./gl-lite
}
Image

Please take a look and verify this change when possible.
Related: Add automated Cross-Framework testing for Web Component

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions