【发布时间】:2018-03-02 20:37:34
【问题描述】:
我正在尝试创建我的第一个节点包,它已成功发布并在 npmjs.com 网站上发布,但每当我使用 create-react-app 将其包含在示例反应项目中时,我都会收到以下错误
我是这样导入的
import IconTooltip from 'react-icons-tooltip';
这是错误
Module not found: Can't resolve './react-icons-tooltip' in '/home/ubuntu/workspace/lasting/src/Components'
这是包裹package.json file
{
"name": "react-icons-tooltip",
"version": "1.0.4",
"description": "",
"main": "./lib/IconTooltip.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress --colors --p",
"transpile": "node_modules/.bin/babel ./src/index.js --presets babel-preset-es2015 --out-file lib/IconTooltip.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.10"
},
"dependencies": {
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
webpack.config.js
const webpack = require("webpack");
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/build',
filename: 'IconToolTip.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
]
};
如果我导入本地包似乎可以正常工作
import IconTooltip from './lib/IconTooltip';
TIA!
【问题讨论】:
-
如果它在 npm 注册表上,你应该安装它:
npm install react-icons-tooltip,然后导入它:import IconTooltip from 'react-icons-tooltip'(注意你必须从node_modules导入,而不是从与你相同的目录中)现在正在做)。 -
@MiguelCalderón 对不起,我错误地输入了 ',/' 我正在导入它,就像你说的那样。
-
我还测试了导入本地版本,它工作正常。
import IconTooltip from './lib/IconTooltip';但不是import IconTooltip from 'react-icons-tooltip'安装后 -
在您的
weback.config.js文件中的output部分,确保您将这些字段设置如下:filename: 'index.js'和libraryTarget: 'commonjs2'。 -
@MiguelCalderón 哇,这解决了我的问题......输出是否必须是 index.js?谢谢你
标签: reactjs npm node-modules