https://github.com/garronej/vite-dual-package-repro-repo
Reproduction repo to show how we end up with duplicate copies of emotion in a vite project
https://github.com/garronej/vite-dual-package-repro-repo
Last synced: 3 months ago
JSON representation
Reproduction repo to show how we end up with duplicate copies of emotion in a vite project
- Host: GitHub
- URL: https://github.com/garronej/vite-dual-package-repro-repo
- Owner: garronej
- Created: 2023-05-29T15:54:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-29T18:45:58.000Z (about 2 years ago)
- Last Synced: 2025-02-05T09:17:23.657Z (4 months ago)
- Language: TypeScript
- Size: 49.8 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vite Project Issue Demonstration: Multiple Instances of `@emotion/react` Module
This repository serves as a demonstration for the issue of multiple instances of the `@emotion/react` module occurring within a Vite project.
## Setup
You can clone this repository and run the development server with the following commands:
```bash
git clone https://github.com/garronej/vite-dual-package-repro-repo
cd vite-dual-package-repro-repo
yarn install
yarn dev
```
## Expected Results
Upon running the development server, you should see the following:
If you open the debugger, you should see:
## Problem Description
The issue arises when we use a [third-party module](https://github.com/garronej/a-module-that-uses-emotion) that has `@emotion/react` as a peer dependency and this module is distributed solely in CommonJS (CJS) format.
The internal import of `@emotion/react` within `a-module-that-uses-emotion` results in the CJS distribution of `@emotion/react` being imported. However, the import made in `src/main.tsx` results in the ES Module (ESM) distribution of `@emotion/react` being imported. This causes multiple instances of the same module.
### With Next.js
Note that this behaviour isn't observable in Next.js
### With Node in type: module mode
The same experiment with node in `type: module` will led to having no module duplication because in emotion the `exports.import` condition point to a file
that only re-export the CJS distribution however, the import from within `a-module-that-uses-emotion` of `@emotion/react` result in `exports.default` to be
imported and the import in the main file result in `exports.import` to be imported.
## Comparison
Interestingly, this problem does not occur with `@mui/material`, where only the ESM distribution is used. However, the approach implemented by Material-UI, which involves placing sub `package.json` files in specific import paths instead of using the `exports` field, is incompatible with Node running in `type: module` mode. You can read more about this in the corresponding [issue discussion](https://github.com/mui/material-ui/issues/37335).