升级到 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 文件加载器排除来修复它，每个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 /sf/ask/4670142851/
    exclude: [/\.m?jsx?$/, /\.html$/, /\.json$/, /\.tsx?$/],
    loader: require.resolve("file-loader"),
    options: {
      name: "static/media/[name].[hash:8].[ext]",
    },
  },

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