Cannot read properties of undefined (reading '_context')

AfterStories commented 5 days ago

重现步骤

node version : v22 2."antd": "^5.18.0", 3.react": "^18.2.0"

我的其他npm包版本package.json： { "name": "ai-demo", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/x": "^1.0.0", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@reduxjs/toolkit": "^1.6.2", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "@types/jest": "^27.0.1", "@types/node": "^16.9.1", "@types/react": "^17.0.20", "@types/react-dom": "^17.0.9", "antd": "^5.18.0", "axios": "^1.4.0", "craco-less": "^1.18.0", "cross-env": "^7.0.3", "echarts": "^5.4.3", "highlight.js": "^11.9.0", "http-proxy-middleware": "^2.0.1", "less": "^4.1.1", "less-loader": "^7.3.0", "markdown-it": "^14.1.0", "markdown-it-highlightjs": "^4.1.0", "markdown-to-jsx": "^7.4.3", "plantuml-encoder": "^1.4.0", "react": "^18.2.0", "react-activation": "^0.9.4", "react-dom": "^18.2.0", "react-highlight-words": "^0.20.0", "react-redux": "^7.2.6", "react-resizable": "^3.0.5", "react-router-dom": "^6.14.1", "react-scripts": "4.0.3", "react-speech-recognition": "^3.10.0", "uid": "^2.0.2", "virtualizedtableforantd4": "^1.1.4", "xlsx": "^0.18.5" }, "scripts": { "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-app-rewired start", "start_ssl": "react-app-rewired --openssl-legacy-provider start", "build_ssl": "react-app-rewired --openssl-legacy-provider build", "build": "react-app-rewired build", "build_prod": "set REACT_APP_TAX_ENV=prod && react-app-rewired build", "build_test": "set REACT_APP_TAX_ENV=test && react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject", "lint": "eslint --ext .js --ext .jsx src" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@babel/plugin-proposal-optional-chaining": "^7.21.0", "babel-plugin-import": "^1.13.3", "customize-cra": "^1.0.0", "eslint": "^7.32.0", "eslint-config-airbnb": "^18.2.1", "eslint-import-resolver-webpack": "^0.13.2", "eslint-plugin-import": "^2.24.2", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.29.4", "eslint-plugin-react-hooks": "^4.5.0", "react-app-rewired": "^2.2.1", "react-error-overlay": "6.0.9" } }

当前行为

报错：

``

预期行为

一开始是npm start有报错： ` Failed to compile.

./node_modules/@ant-design/x/es/conversations/index.js 103:25 Module parse failed: Unexpected token (103:25) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | direction | }

  }, groupInfo.title?.(groupInfo.name, {
| components: { | GroupTitle

看起来是你们的这个库里有部分代码需要用babel处理，于是我在webpack 配置中新增了： path.resolve(__dirname, 'node_modules/@ant-design/x'), 之后就能正常npm start 启动了，配置如下，不过虽然能启动了，但是打开使用这个组件的页面就会报找不到_context的错了，哟： **webpack 配置**： config-overrides.js 文件 const { override, fixBabelImports, addLessLoader, addWebpackAlias, addBabelPlugin, } = require('customize-cra'); const path = require('path');

module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', // style: true, }), addLessLoader({ lessOptions: { javascriptEnabled: true, }, }), addWebpackAlias({ '@api': path.resolve(dirname, './src/api'), '@style': path.resolve(dirname, './src/style'), '@utils': path.resolve(dirname, './src/utils'), '@views': path.resolve(dirname, './src/views'), '@components': path.resolve(dirname, './src/components'), '@router': path.resolve(dirname, './src/router'), '@hooks': path.resolve(dirname, './src/hooks'), '@store': path.resolve(dirname, './src/store'), '@images': path.resolve(__dirname, './src/images'), }),

(config) => { config.module.rules.push({ test: /.mjs$/, include: /node_modules/, type: 'javascript/auto', });

config.module.rules = config.module.rules.map((rule) => {
  if (rule.oneOf) {
    rule.oneOf = rule.oneOf.map((loader) => {
      if (loader.loader && loader.loader.includes('babel-loader')) {
        loader.include = [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules/@ant-design/x'),
        ];
      }
      return loader;
    });
  }
  return rule;
});

return config;

}, addBabelPlugin('@babel/plugin-proposal-optional-chaining'), ); `

上下文

引入使用Conversations 组件就是copy的文档里的示例代码：

`import React from 'react'; import { Conversations } from '@ant-design/x'; import { EditOutlined, DeleteOutlined, GithubOutlined, AlipayCircleOutlined, DockerOutlined, } from '@ant-design/icons'; import { message, } from 'antd';

const items = [ { key: 'demo1', label: 'What is Ant Design X ?', icon: , group: 'Group1', }, { key: 'demo2', label: (

Getting Started: {' '} Ant Design !

),
icon: <AlipayCircleOutlined />,
group: 'Group1',

}, { key: 'demo4', label: 'In Docker, use 🐑 Ollama and initialize', icon: , group: 'Group2', }, { key: 'demo5', label: 'Expired, please go to the recycle bin to check', group: 'Group2', }, ];

const ConversationsList = () => { const menuConfig = (conversation) => ({ items: [ { label: 'Rename', key: 'Rename', icon: , }, { label: 'Delete', key: 'Delete', icon: , danger: true, }, ], onClick: (menuInfo) => { message.info(Click ${conversation.key} - ${menuInfo.key}); }, }); return (

); };

export default ConversationsList; `

版本

1.0.0

您在哪些浏览器上遇到了这个问题？

Chrome

zombieJ commented 5 days ago

搞个最小重现看看，这样贴没办法看出问题哈~

YumoImer commented 5 days ago

似乎和 https://github.com/ant-design/x/issues/219 这个 issue 类似，可以看下

AfterStories commented 5 days ago

似乎和 #219 这个 issue 类似，可以看下

根据你在 #219中的提示我也查看下依赖关系看起来好像是你们用的 create-react-context 和 react-node-key，需要React "^0.14.0 || ^15.0.0 || ^16.0.0" 版本，但我用的是 "react": "^18.2.0", 如果是这个问题引起的，想请教是不是应该能有什么其他版本的create-react-context 替代？毕竟react的18版本我也用了快2年了吧也不算很新了，你只用react16的话就尬住了，

npm ls antd antd @ant-design/x react 输出如下:

ai-demo@0.1.0 C:\Users\xxx\Desktop\Code\GenAI\frontend ├─┬ @ant-design/x@1.0.0 │ ├─┬ @ant-design/cssinjs-utils@1.1.1 │ │ └── react@18.2.0 deduped │ ├─┬ @ant-design/cssinjs@1.22.0 │ │ └── react@18.2.0 deduped │ ├─┬ @ant-design/icons@5.5.1 │ │ └── react@18.2.0 deduped │ ├── antd@5.18.0 deduped │ ├─┬ rc-motion@2.9.3 │ │ └── react@18.2.0 deduped │ ├─┬ rc-util@5.43.0 │ │ └── react@18.2.0 deduped │ └── react@18.2.0 deduped ├─┬ @reduxjs/toolkit@1.9.5 │ └── react@18.2.0 deduped ├─┬ @testing-library/react@11.2.7 │ └── react@18.2.0 deduped ├─┬ antd@5.18.0 │ ├─┬ @ant-design/react-slick@1.1.2 │ │ └── react@18.2.0 deduped │ ├─┬ @rc-component/color-picker@1.5.3 │ │ └── react@18.2.0 deduped │ ├─┬ @rc-component/mutate-observer@1.1.0 │ │ └── react@18.2.0 deduped │ ├─┬ @rc-component/tour@1.15.0 │ │ ├─┬ @rc-component/portal@1.1.2 │ │ │ └── react@18.2.0 deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context │ │ └── react@18.2.0 deduped │ ├─┬ @rc-component/trigger@2.2.0 │ │ └── react@18.2.0 deduped │ ├─┬ qrcode.react@3.1.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-cascader@3.26.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-checkbox@3.3.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-collapse@3.7.3 │ │ └── react@18.2.0 deduped │ ├─┬ rc-dialog@9.4.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-drawer@7.2.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-dropdown@4.2.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-field-form@2.2.1 │ │ └── react@18.2.0 deduped │ ├─┬ rc-image@7.8.1 │ │ └── react@18.2.0 deduped │ ├─┬ rc-input-number@9.1.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-input@1.5.1 │ │ └── react@18.2.0 deduped │ ├─┬ rc-mentions@2.13.2 │ │ └── react@18.2.0 deduped │ ├─┬ rc-menu@9.14.0 │ │ ├─┬ rc-overflow@1.3.2 │ │ │ └── react@18.2.0 deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context │ │ └── react@18.2.0 deduped │ ├─┬ rc-notification@5.6.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-pagination@4.0.4 │ │ └── react@18.2.0 deduped │ ├─┬ rc-picker@4.5.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-progress@4.0.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-rate@2.13.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-resize-observer@1.4.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-segmented@2.3.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-select@14.14.0 │ │ ├─┬ rc-virtual-list@3.14.2 │ │ │ └── react@18.2.0 deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context │ │ └── react@18.2.0 deduped │ ├─┬ rc-slider@10.6.2 │ │ └── react@18.2.0 deduped │ ├─┬ rc-steps@6.0.1 │ │ └── react@18.2.0 deduped │ ├─┬ rc-switch@4.1.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-table@7.45.7 │ │ ├─┬ @rc-component/context@1.4.0 │ │ │ └── react@18.2.0 deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context │ │ └── react@18.2.0 deduped │ ├─┬ rc-tabs@15.1.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-textarea@1.7.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-tooltip@6.2.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-tree-select@5.21.0 │ │ └── react@18.2.0 deduped │ ├─┬ rc-tree@5.8.7 │ │ └── react@18.2.0 deduped │ ├─┬ rc-upload@4.5.2 │ │ └── react@18.2.0 deduped │ └── react@18.2.0 deduped ├─┬ markdown-to-jsx@7.4.3 │ └── react@18.2.0 deduped ├─┬ react-activation@0.9.12 │ ├─┬ create-react-context@0.3.0 │ │ └── react@18.2.0 deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context │ ├─┬ react-node-key@0.3.2 │ │ └── react@18.2.0 deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context │ └── react@18.2.0 deduped ├─┬ react-dom@18.2.0 │ └── react@18.2.0 deduped ├─┬ react-highlight-words@0.20.0 │ └── react@18.2.0 deduped ├─┬ react-redux@7.2.9 │ └── react@18.2.0 deduped ├─┬ react-resizable@3.0.5 │ ├─┬ react-draggable@4.4.6 │ │ └── react@18.2.0 deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context │ └── react@18.2.0 deduped ├─┬ react-router-dom@6.16.0 │ ├─┬ react-router@6.16.0 │ │ └── react@18.2.0 deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context │ └── react@18.2.0 deduped ├─┬ react-scripts@4.0.3 │ └── react@18.2.0 deduped ├─┬ react-speech-recognition@3.10.0 │ └── react@18.2.0 deduped ├── react@18.2.0 └─┬ virtualizedtableforantd4@1.3.1 ├── antd@5.18.0 deduped └── react@18.2.0 deduped

AfterStories commented 5 days ago

搞个最小重现看看，这样贴没办法看出问题哈~

哥我这个已经是用的官网的示例代码了呀，我觉得问题有应该可能是出在webpack配置或者依赖兼容性上的差别

afc163 commented 5 days ago

@AfterStories 给一个 github 重现仓库出来？

AfterStories commented 5 days ago

@afc163 行，等我晚点有空我弄到一个仓库里哈

AfterStories commented 4 days ago

我想我解决了这个问题: 把node_moudules文件夹删掉，删掉package-lock.json ，然后重新npm install ，看起来npm 会自动帮我安装适合的一些依赖包，然后页面就能正常使用ant-design/x组件了。

但应该有必要复述一下我遇到这个问题的场景，毕竟看到有其他issue提到了类似的状况，也许有助于你们排查

如果只是单独 npm install @ant-design/x ，或者npm install 安装所有依赖包，我都会看到如下警告：

npm warn ERESOLVE overriding peer dependency npm warn While resolving: create-react-context@0.3.0 npm warn Found: react@18.2.0 npm warn node_modules/react npm warn react@"^18.2.0" from the root project npm warn 62 more (@ant-design/cssinjs, @ant-design/cssinjs-utils, ...) npm warn npm warn Could not resolve dependency: npm warn peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from create-react-context@0.3.0 npm warn node_modules/create-react-context npm warn create-react-context@"^0.3.0" from react-activation@0.9.12 npm warn node_modules/react-activation npm warn npm warn Conflicting peer dependency: react@16.14.0 npm warn node_modules/react npm warn peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from create-react-context@0.3.0 npm warn node_modules/create-react-context npm warn create-react-context@"^0.3.0" from react-activation@0.9.12 npm warn node_modules/react-activation

看起来是React18.2和create-react-context@0.3.0这个东西之间版本不兼容，那么页面打开的时候看到的红色错误信息也是相关的Cannot read properties of undefined (reading '_context')

我是把node_moudules清空然后再重新npm install安装全部搞定的

wkABXY commented 4 days ago

我umi项目也这样，哈哈哈

wkABXY commented 4 days ago

我umi项目也这样，哈哈哈

删了node_modules和yarn.lock 重新 yarn install 好了，

ant-design / x