Reactjs 升级到情感v11后的样式编译器错误

我只是按照指南升级到了情感v11——添加了eslint规则，使用了

--fix

，一切看起来都很好

根据重命名升级了包，但当我开始构建我的开发版本时，我得到了这个stacktrace，我的应用程序不会呈现：

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'.

这是我得到的唯一线索

我使用的情绪包：

    "@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",

---

我不知道该尝试什么，在其他任何地方都找不到此错误。

我遇到了相同的问题，并通过向我的网页文件加载器添加.mjs来修复它，如下所示：

  {
    // 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]",
    },
  },

文件加载程序配置的其余部分（选项、其他排除项）可能有所不同