Awkward ES6 imports

[RobertSandiford]

Current behavior:

Importing createCache from @emotion/cache in an ES6 environment (type: module in package.json) does not import the function, but an object with a default property is the function

import createCache from '@emotion/cache'

const cache =  createCache({
    key: 'css',
})

Output:

TypeError: createCache is not a function

package.json

{
  "name": "emotion-cache-es6-imports",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module",
  "dependencies": {
    "@emotion/cache": "^11.6.0"
  }
}

To reproduce:

Repro repo: https://github.com/RobertSandiford/emotion-cache-es6-imports

yarn
node index

Expected behavior:

The create cache function is exported to createCache

Other notes:

When packed with webpack the above code will work.

Getting the create cache function in ES6 requires accessing the default property.

This requires code like this to work server side + client side.

import emotionCache from '@emotion/cache'
const createCache = ('default' in emotionCache ) ? emotionCache.default : emotionCache

const cache = createCache({})

It's likely that this issues exists in other places too. I had issues with @emotion/server/create-instance too. Currently I have this code

import emotionServerCreateInstance from '@emotion/server/create-instance/dist/emotion-server-create-instance.cjs.js'
const { default: createEmotionServer } = emotionServerCreateInstance

Environment information:

• @emotion/cache version: 11.6
• Node: v16.13.0

[Andarist]

We are aware of the "issue". The way how node has implemented support for modules creates a ripple effect on the whole ecosystem - what worked for years in other tools suddenly doesn't work in node.

We'll think about solutions for this, but the problem is that it's very hard to pull off a solution that would just work for every possible combination of environments and tools. And on top of that making changes around this might require a major bump.

[RobertSandiford]

@Andarist

Sure. I would try to help, but I don't know the details of how node handles it.

The way that @mui handles it is with an index.js file which acts as a giant barrel file, exporting everything for ES6. CJS is handled via "main" which points to a cjs file in a subdirectory. I don't know if that's helpful to you.

[rtritto]

Any update?

[eagleera]

any update on this?