Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read properties of undefined (reading '_context') #253

Open
AfterStories opened this issue Nov 27, 2024 · 6 comments
Open

Cannot read properties of undefined (reading '_context') #253

AfterStories opened this issue Nov 27, 2024 · 6 comments
Labels
bug Something isn't working

Comments

@AfterStories
Copy link

AfterStories commented Nov 27, 2024

重现步骤

  1. 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" } }

当前行为

报错:

image

``

预期行为

一开始是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: ,
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

@AfterStories AfterStories added the bug Something isn't working label Nov 27, 2024
@zombieJ
Copy link
Member

zombieJ commented Nov 27, 2024

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

@YumoImer
Copy link
Collaborator

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

@AfterStories
Copy link
Author

AfterStories commented Nov 27, 2024

似乎和 #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
输出如下:

[email protected] C:\Users\xxx\Desktop\Code\GenAI\frontend
├─┬ @ant-design/[email protected]
│ ├─┬ @ant-design/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @ant-design/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @ant-design/[email protected]
│ │ └── [email protected] deduped
│ ├── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @reduxjs/[email protected]
│ └── [email protected] deduped
├─┬ @testing-library/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @ant-design/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @rc-component/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @rc-component/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @rc-component/[email protected]
│ │ ├─┬ @rc-component/[email protected]
│ │ │ └── [email protected] deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context
│ │ └── [email protected] deduped
│ ├─┬ @rc-component/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├─┬ @rc-component/[email protected]
│ │ │ └── [email protected] deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^0.14.0 || ^15.0.0 || ^16.0.0" from node_modules/create-react-context
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├── [email protected]
└─┬ [email protected]
├── [email protected] deduped
└── [email protected] deduped

@AfterStories
Copy link
Author

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

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

@afc163
Copy link
Member

afc163 commented Nov 27, 2024

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

@AfterStories
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants