alibaba / alibaba/lowcode-engine

自定义组件在物料工程导入react-grid-layout组件,运行报错

Open
#3,003 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

我想自定义布局,在物料工程导入react-grid-layout组件,运行报错。
这个错误信息是 Webpack 在编译项目时产生的,指出在处理 ./node_modules/react-grid-layout/build/utils.js 和 ./node_modules/react-grid-layout/build/ReactGridLayout.js 这两个模块文件时遇到了未预期的语法(Unexpected token),从而导致模块解析失败。具体来说,Webpack 遇到了它当前配置下无法识别或转换的 ECMAScript 语法特性。

在提供的代码片段中,Webpack 对于“可选链操作符”(?.) 这一ES2020新特性似乎没有正确处理,因为没有合适的加载器来转换这种语法以使其能够在不支持该特性的浏览器或环境中运行。
![image](https://github.com/alibaba/lowcode-engine/assets/55010951/ad0ace87-055c-40bf-90fd-e9bd280ff18e)

然后我尝试配置babel 的@babel/plugin-proposal-optional-chaining插件好像都不可行,在物料工程怎么配置babel插件呢?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the Webpack error paths node_modules/react-grid-layout/build/utils.js and build/ReactGridLayout.js, then inspect how Babel is configured for the material project. Reproduce the import and verify that the project runs without the Unexpected token error when the optional-chaining syntax is encountered.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, react, webpack
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.