reactjs - 升级到 Emotion v11 后的 Stylis 编译器错误

Question

我只是按照指南升级到 Emotion v11 - 添加了 eslint 规则，使用了 --fix一切似乎都很好。
根据重命名升级了包，但是当我去构建我的开发版本时，我得到了这个堆栈跟踪并且我的应用程序没有呈现:

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

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

Answer 1

我遇到了同样的问题并通过将 .mjs 添加到我的 webpack file-loader excludes per https://github.com/remirror/remirror/issues/647#issuecomment-687654519 来修复它像这样:

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

文件加载器配置的其余部分(选项、附加排除)可能会有所不同。