-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issues using emotion/styled with ES Modules #2730
Comments
The |
@Andarist This issue is not resolved after #2819 ( $ node --version
v18.6.0
$ npm --version
8.13.2
$ git clone https://github.com/maddijoyce/emotion-esm-issue
$ cd emotion-esm-issue
$ rm package-lock.json # remove lock file so that npm can install the latest version
$ npm install
$ npm list
emotion-esm-issue@1.0.0 /private/tmp/emotion-esm-issue
└── @emotion/styled@11.10.0
$ npm run test
npm run test
> emotion-esm-issue@1.0.0 test
> node index.js
[ 'default' ]
This should not be the case, this should be h1, h2, etc
So that we can do `styled.h1...`
Right now we would need to do `styled.default.h1...` By adding some $ echo 'console.log("node_modules/@emotion/styled/dist/emotion-styled.cjs.js")' >> node_modules/@emotion/styled/dist/emotion-styled.cjs.js
$ echo 'console.log("node_modules/@emotion/styled/dist/emotion-styled.esm.js")' >> node_modules/@emotion/styled/dist/emotion-styled.esm.js
$ npm run test
> emotion-esm-issue@1.0.0 test
> node index.js
node_modules/@emotion/styled/dist/emotion-styled.cjs.js
[ 'default' ]
This should not be the case, this should be h1, h2, etc
So that we can do `styled.h1...`
Right now we would need to do `styled.default.h1...` As someone already mentioned, we need to use |
Yes, you are right - my bad. This issue here won't be fixed soon though. The only viable strategy for us that would "fix" this would be switching to named exports. |
Switching (adding) named exports should be a practicable solution for now. Eventually, I think it's better to fix this on the preconstruct side, by bundling |
You're right, see #2819 (comment) |
We'd be open to accepting a PR that would add a named export "alias" for all our default exports.
The problem is not on the preconstruct side here but instead in each project using it. Changing to |
I'm having the same issue with emotion/cache. Is there a workaround in the meantime? |
The workaround is to do this: import _createCache from '@emotion/cache'
const createCache = _createCache.default |
Another solution is to patch the package locally. See example for @reduxjs/toolkit. Btw. pnpm has built-in support for patching packages. |
Hi, how could I fix the problem with .cjs file?
I'm having this issue. |
For those who are not using I use Typescript, so this is important for me that everything works properly and there are no type errors
|
For those who came here trying to make work emotion-js + vite (which using ESM by default) here is solution: import react from '@vitejs/plugin-react';
import { UserConfig } from 'vite';
import { cjsInterop } from 'vite-plugin-cjs-interop';
const config: UserConfig = {
plugins: [
cjsInterop({
dependencies: [
'@emotion/styled/base',
'@emotion/*',
],
}),
react({
jsxRuntime: 'automatic',
jsxImportSource: '@emotion/react',
babel: {
plugins: [
'babel-plugin-graphql-tag',
'babel-plugin-macros',
['@emotion/babel-plugin', {}],
],
},
},
),
],
};
export default config; The |
@thekip that helped me. thank you ❤️ |
@thekip it helped me a lot. Thanks :) |
this is still not fully working even with latest emotion packages. What is the update here? |
Current behavior:
When using
import styled from "@emotion/styled"
, in a package setup to use esm, styled has a single keydefault
To reproduce:
Expected behavior:
As in the above example, using
import styled from "@emotion/styled"
, styled should have styled.h1, styled.h2, etcEnvironment information:
Some additional background:
Issue first discovered here - jestjs/jest#12571
The text was updated successfully, but these errors were encountered: