-
-
Notifications
You must be signed in to change notification settings - Fork 45
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
Comments
搞个最小重现看看,这样贴没办法看出问题哈~ |
似乎和 #219 这个 issue 类似,可以看下 |
根据你在 #219中 的提示 我也查看下依赖关系 npm ls antd antd @ant-design/x react [email protected] C:\Users\xxx\Desktop\Code\GenAI\frontend |
哥我这个已经是用的官网的示例代码了呀,我觉得问题有应该可能是出在webpack配置或者依赖兼容性上的差别 |
@AfterStories 给一个 github 重现仓库出来? |
@afc163 行,等我晚点有空我弄到一个仓库里哈 |
重现步骤
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
| }
| 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',
});
},
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
The text was updated successfully, but these errors were encountered: