node.js - 我的包在 CodeSandBox 上导入时给出“ModuleNotFoundError”
问题描述
我今天发布了一个 npm 包,想在 CodeSandBox 上尝试一下。如果我npm install package-name
在本地机器上但在 CodeSandBox 项目上导入相同的依赖项会出现此错误,则它可以工作:
包.json
{
"name": "package-name",
"version": "1.0.20",
"private": false,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.1",
"@testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"keywords": [
"react"
],
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"repository": {
"type": "git",
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.4",
"@babel/runtime": "^7.8.4"
}
}
我编译的文件在顶部有这些类型的导入:
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
我按照本教程进行操作。运行后,会在主目录中创建npm run build
一个文件夹。dist
然后我npm publish
。我确实npm install package-name
在本地机器上尝试过,它可以工作,但正如我所说,它在 CodeSandBox 上不起作用。
解决方案
尝试将您添加devDependencies
到dependencies
. devDependencies
没有在构建中导出,这就是为什么你可能babel/runtime
失败了。
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.1",
"@testing-library/user-event": "^7.2.1",
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.4",
"@babel/runtime": "^7.8.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
}
然后构建并尝试。
推荐阅读
- episerver - 过滤内容区域项目
- python - Python 脚本中的 UnicodeDecodeError
- android - 使用 Espresso 进行 Android 移动应用程序 UI 测试 - Chrome 停止运行
- r - 当多个为真时,如何限制用户可以使用 R Shiny 中的 selectInput 选择的选项数量?
- c# - C# Visual Studio Share a View Across Projects in a Solution 说 Shared 类在当前上下文中不存在
- javascript - 检查对象数组是否包含整数数组的所有值
- java - 无法打印或进入 for 循环
- python - 在 python 中同时使用显式参数和 **kwargs
- reactjs - 如何从传递给孩子的函数访问父母的当前状态
- symfony - Symfony 5.3 使用 LDAP 进行身份验证