新下载的自定义组件npm run dev和npm run build报错解决

作者在

2021.05.22 16:24发布于技术 - 新手入门

1.01k7

出错说明

笔者之前按照自定义组件教程，成功编写了一个TextBox组件。

但是，再搞第二个自定义组件开始，下载的东西npm run dev和npm run build都报错，查看package.json也能发现，和TextBox组件的有不同之处，一直搞不懂原因。

解决方法

最近才找到了解决方法，就是把TextBox组件的package.json覆盖过来，然后把name和widgetname改为报错的自定义组件的name和widgetname，然后删除后者的node_modules，把TextBox组件的node_modules复制过去，再npm run dev或npm run build就没问题了。

这是我的package.json。

{
  "name": "backlog",
  "widgetName": "Backlog",
  "version": "1.0.0",
  "description": "My widget description",
  "copyright": "2020 Mendix Technology BV",
  "author": "MZK",
  "config": {
    "projectPath": "../..//",
    "mendixHost": "http://localhost:8080",
    "developmentPort": "3000"
  },
  "packagePath": "mendix",
  "scripts": {
    "start": "pluggable-widgets-tools start:server --open",
    "dev": "pluggable-widgets-tools start:web",
    "build": "pluggable-widgets-tools build:web",
    "lint": "pluggable-widgets-tools lint",
    "lint:fix": "pluggable-widgets-tools lint:fix",
    "prerelease": "npm run lint",
    "release": "pluggable-widgets-tools release:web"
  },
  "license": "Apache-2.0",
  "devDependencies": {
    "@mendix/pluggable-widgets-tools": "^8.14.0",
    "@types/big.js": "^4.0.5",
    "@types/classnames": "^2.2.4",
    "@types/react": "~16.9.0",
    "@types/react-dom": "~16.9.0"
  },
  "dependencies": {
    "classnames": "^2.2.6"
  }
}

有不对之处或更好的解决方法，欢迎指出！

作者在

7个回复

倒序看帖

仅看楼主

楼层直达

作者在

2021.05.22 16:29 发布

楼主

本想上传我的node_modules，发现点击后没反应啊，可能是太大了吧。

作者在

2021.05.23 11:50 发布

楼主

这是我的node_modules，存在百度网盘了，需要的自取~

链接：https://pan.baidu.com/s/1zp_WAdifhJxLX0ecDf0gWg
提取码：imuw

作者在

西蒙子大胡子

作者在

2021.05.23 12:33 发布

具体什么错误信息呢？每个自定义组件要分开创建在单独的文件夹中，各组件的依赖不要共用哦

首赞

作者在

西蒙子大胡子

2021.05.24 23:46 发布

楼主

每个组件都有单独的一个文件夹，只是初始化的依赖会报错，需要借用第一个不报错的组件的依赖才能正常。

具体是什么错误，我的技术水平暂时不理解，我给你描述一下。

首先，我第一次按照Mendix自定义组件TextBox教程下载自定义组件时，中间没有报错，后续的编码一切正常。

但当我开始第二个自定义组件的开发时，使用“yo @mendix/widget 组件名”然后配置完信息开始，就出现了许多报错。报错信息截图如下。

图片1.png

图片2.png 图片3.png

图片4.png

图片5.png

在VS Code打开组件所在文件夹，可以看到其package.json中没有dev了。

{
  "name": "test",
  "widgetName": "Test",
  "version": "1.0.0",
  "description": "My widget description",
  "copyright": "2020 Mendix Technology BV",
  "author": "MZK",
  "engines": {
    "node": ">=12"
  },
  "config": {
    "projectPath": "../..//",
    "mendixHost": "http://localhost:8080",
    "developmentPort": "3000"
  },
  "packagePath": "mendix",
  "scripts": {
    "start": "pluggable-widgets-tools start:web",
    "build": "pluggable-widgets-tools build:web",
    "lint": "pluggable-widgets-tools lint",
    "lint:fix": "pluggable-widgets-tools lint:fix",
    "prerelease": "npm run lint",
    "release": "pluggable-widgets-tools release:web"
  },
  "license": "Apache-2.0",
  "devDependencies": {
    "@mendix/pluggable-widgets-tools": "^9.0.0",
    "@types/big.js": "^6.0.2",
    "@types/classnames": "^2.2.4",
    "@types/react": "~17.0.1",
    "@types/react-dom": "~17.0.1"
  },
  "dependencies": {
    "classnames": "^2.2.6"
  }
}

运行npm run build报错如下。

图片6.png

一开始解决时，我将这个package.json替换成第一个成功的组件的package.json，只是修改name和widgetName，然后删掉node_modules，再npm install，还是报错。

图片7.png

最后发现，把node_modules删掉后，替换上第一个成功的组件的node_modules，再npm run dev或npm run build就没有问题了。

首赞

西蒙子大胡子

2021.05.25 23:26 发布

yo @mendix/widget ... 命令生成组件项目脚手架之后会立刻开始用 npm install 安装项目的所有依赖包（也就是从网上拉取 node_modules 里面需要的内容）。所以你的错误应该是某些依赖包下载失败了。由于一些大家都懂的网络原因，这很常见。

你可以试试事先更改 npm 下载依赖包的源，设置为国内的镜像也许会解决你的问题：

npm config set registry https://registry.npm.taobao.org/

在这之后再去用 yo ... 生成项目。

还有就是你的 node.js 版本不要太老，至少要是 12 或是 14 的版本

作者在

西蒙子大胡子

2021.05.26 09:40 发布

楼主

好的，感谢！

首赞

作者在

2021.07.27 11:30 发布

楼主

发现了更好的解决办法，就是下载这个@mendix/generator-widget：

npm install -g @mendix/generator-widget@"<9"

作者在