Babel.js 无法读取未定义的属性(阅读“__emotion_real”)

r3i60tvu 于 11个月前发布在 Babel

关注(0)|答案(2)|浏览(163)

我在构建下一个js应用程序时遇到错误：uncurrentdrejection typeerror：cannot read properties of undefined（阅读'__emotion_real'）
这是在我更新了下一个js和emotion库之后发生的：
“@emotion/babel-plugin”：“^11.10.6”，
“@emotion/react”：“^11.11.1”，
“@emotion/styled”：“^11.11.0”，

✓ Linting and checking validity of types
   ▲ Next.js 14.0.3
   - Environments: .env

   Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc.js" https://nextjs.org/docs/messages/swc-disabled
   Using external babel configuration from C:\Projects\travel11\travel-frontend\.babelrc.js
 ⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.        
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
 ✓ Creating an optimized production build
 ✓ Compiled successfully
unhandledRejection TypeError: Cannot read properties of undefined (reading '__emotion_real')
    at createStyled (C:\Projects\travel11\travel-frontend\node_modules\@emotion\styled\base\dist\emotion-styled-base.cjs.prod.js:97:20)
    at C:\Projects\travel11\travel-frontend\.next\server\chunks\837.js:38:144700 {
  type: 'TypeError'
}
   Collecting page data  .

字符串

*.babelrc.js

module.exports = {
  presets: [
    [
      'next/babel',
      {
        'preset-react': {
          runtime: 'automatic',
          importSource: '@emotion/react',
        },
      },
    ],
  ],
  plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],
};

型

package.json

"dependencies": {
    "@emotion/babel-plugin": "^11.10.6",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@hookform/resolvers": "^3.3.2",
    "@next/eslint-plugin-next": "^14.0.3",
    "@svgr/webpack": "^6.5.1",
    "@types/axios": "^0.14.0",
    "antd": "^5.3.2",
    "babel-plugin-macros": "^3.1.0",
    "classnames": "^2.3.2",
    "dayjs": "^1.11.7",
    "eslint": "^8.55.0",
    "eslint-config-next": "^14.0.3",
    "eslint-plugin-import": "^2.29.0",
    "mobx": "^6.8.0",
    "mobx-react-lite": "^3.4.3",
    "next": "^14.0.3",
    "next-sitemap": "^4.2.3",
    "node-fetch": "^3.3.1",
    "prettier": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hash-string": "^1.0.0",
    "react-headroom": "^3.2.1",
    "react-hook-form": "^7.43.7",
    "react-stately": "^3.22.0",
    "react-toastify": "^9.1.1",
    "tailwindcss": "^3.3.6",
    "twin.macro": "^3.4.0",
    "typescript": "^5.3.2",
    "uuid": "^9.0.1",
    "uuidv4": "^6.2.13",
    "validator": "^13.11.0",
    "vest": "^5.2.2"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.23.5",
    "@babel/preset-react": "^7.23.3",
    "@types/jest": "^29.5.11",
    "@types/node": "^20.10.3",
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.2.17",
    "@types/react-headroom": "^3.2.3",
    "@types/validator": "^13.11.7",
  }
}

型

babeljs

来源：https://stackoverflow.com/questions/77615347/unhandledrejection-typeerror-cannot-read-properties-of-undefined-reading-em

2条答案

按热度按时间

afdcj2ne1#

简单的解决办法是降级情绪。你也可以等到下一个14。（他们会打破所有下一个库再次）

赞(0）回复(0）举报 11个月前

lb3vh1jj2#

我已经解决了那个问题
问题是导入的循环依赖，我有一个组件文件夹，里面有一个按钮和一个广告组件。它们都是通过index.ts导出到组件内部的。碰巧广告正在调用自己。
为了看看是否有这样的问题，我下载了插件“circular-dependency-plugin”，并像这样安装在webpack配置中

next.config.js

const CircularDependencyPlugin = require('circular-dependency-plugin');
module.exports = {
...
webpack(config) {
    config.plugins.push(
      new CircularDependencyPlugin({
        // `onStart` is called before the cycle detection starts
        onStart({ compilation }) {
          console.log('start detecting webpack modules cycles');
        },
        // `onDetected` is called for each module that is cyclical
        onDetected({ module: webpackModuleRecord, paths, compilation }) {
          // `paths` will be an Array of the relative module paths that make up the cycle
          // `module` will be the module record generated by webpack that caused the cycle
          compilation.errors.push(new Error(paths.join(' -> ')));
        },
        // `onEnd` is called before the cycle detection ends
        onEnd({ compilation }) {
          console.log('end detecting webpack modules cycles');
        },
      }),
    );

    return config;
  },
...
}

字符串
我正在组装血液循环的确切组成部分

赞(0）回复(0）举报 11个月前

我来回答

Babel.js 无法读取未定义的属性(阅读“__emotion_real”)

2条答案

相关问题

热门标签

最新问答