Stylis compiler errors after upgrading to Emotion v11

Question

I just followed the guide to upgrade to Emotion v11 - added the eslint rule, used --fix and everything seems fine.

upgraded the packages according to the rename, but when I go to build my dev build, I get this stacktrace and my app doesn't render:

Compiled with warnings.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'COMMENT' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'alloc' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'compile' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'dealloc' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'delimit' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'from' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'identifier' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'middleware' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'next' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'peek' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'peek' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'position' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'prefixer' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'serialize' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'stringify' is not exported from 'stylis'.

./node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
Attempted import error: 'token' is not exported from 'stylis'.

This is the only stacktrace I get.

The emotion packages I use:

    "@emotion/babel-preset-css-prop": "^11.2.0",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@emotion/eslint-plugin": "^11.2.0",
    "@emotion/jest": "^11.2.1",

I have no idea what to try, can't find this error anywhere else.

user_6701595 · Answer

I ran into the same issue and fixed it by adding .mjs to my webpack file-loader excludes per https://github.com/remirror/remirror/issues/647#issuecomment-687654519 like this:

  {
    // Exclude mjs per https://github.com/remirror/remirror/issues/647#issuecomment-687654519
    // otherwise we run into https://stackoverflow.com/questions/66716326/stylis-compiler-errors-after-upgrading-to-emotion-v11
    exclude: [/\.m?jsx?$/, /\.html$/, /\.json$/, /\.tsx?$/],
    loader: require.resolve("file-loader"),
    options: {
      name: "static/media/[name].[hash:8].[ext]",
    },
  },

The rest of your file-loader config (options, additional excludes) might differ.

Stylis compiler errors after upgrading to Emotion v11

1 Answers