我尝试使用webpack作为捆绑器将模块链接到项目。当然,在尝试了很多事情后,我不断收到这个错误:
ERROR in ./src/components/store/TableView.jsx
Module not found: Error: Cannot resolve module 'react-bootstrap-table'
以下是我执行此操作时的确切步骤:
1.) cd ../forks/react-bootstrap-table
2.) npm link
(success, checked ~/.nvm/.../node_modules/react-bootstrap-table for symlink and it's there)
3.) cd ../../projRoot/
4.) npm link react-bootstrap-table
(no errors thrown?, says successful link)
5.) node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js
我尝试过的解决方案:
- https://webpack.github.io/docs/troubleshooting.html
- How to make a linked component peerDepdencies use the equivalent node_modules of the script being linked to?
- 谷歌服务上的许多紫色链接
webpack.config.js
const webpack = require('webpack')
const path = require('path')
const ROOT_PATH = path.resolve(__dirname)
module.exports = {
devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
entry: [
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot','babel']
},
{
test: /\.scss$/,
loaders: ['style','css','sass'],
exclude: /node_modules/
},
{
test: /\.css$/,
loaders: ['style','css']
},
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx'],
fallback: path.resolve(__dirname, './node_modules')
},
resolveLoader: {
fallback: path.resolve(__dirname, './node_modules')
},
output: {
path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'app/dist') : path.resolve(ROOT_PATH, 'app/build'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(ROOT_PATH),
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
stats: 'errors-only',
host: '192.168.1.115'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
备注:
1.这是项目中唯一的符号链接
2.我在分叉版本中运行npm install(也试过没有,没有工作)
3.我使用的是NVM,但是在没有成功安装webpack之前我使用了符号链接。
我已经在这几天了,任何帮助都将不胜感激。
答案 0 :(得分:1)
我在使用webpack
时遇到了类似问题,最后添加了webpack.config.js
:
module.exports = {
resolve: {
symlinks: false
}
};
以下是webpack docs的链接。由于你的问题在webpack
和他们的api发生了很多,所以根据你的问题,我不知道我的回答有多大相关性。但对于今天面临这个或类似问题的人来说,这可能是一个解决方案。可以看出,仍然有人在抱怨:
答案 1 :(得分:0)
好的,这是我的用例特有的,但请确保按照所有说明完全构建您正在进行符号链接的库。最初,我是一个npm安装和gulp构建,但这还不够。我不得不运行一些额外的命令来使库完全构建。
现在它有效!如果您仍然遇到问题,请查看您正在进行符号链接的每个库的文档,并使用我的webpack配置作为解析外部库的模板。
答案 2 :(得分:0)
还请确保在链接的软件包中安装并执行了束和纱
答案 3 :(得分:-1)
以防万一它对其他人有用,在我的情况下将resolve.symlinks
配置添加到false
suggested by @Beat的解决方案是不够的,我不得不执行以下步骤来解决它:
在图书馆:
peerDependencies
中的 package.json
而不是 dependencies
或 devDependencies
,例如就我而言react
:"peerDependencies": {
"react": "^16.8.6",
...
}
npm install
rollup -c
npm 脚本在我的主应用中:
package.json
中具有相对路径的本地项目,例如"dependencies": {
"my-library": "file:../../libraries/my-library",
...
}
将 resolve.symlinks = false
添加到我的主应用程序的 webpack 配置
将 --preserve-symlinks-main
和 --preserve-symlinks
添加到我的 package.json
启动脚本中,例如:
"scripts": {
"build": "set WEBPACK_CONFIG_FILE=all&& webpack",
"start": "set WEBPACK_CONFIG_FILE=all&& webpack && node --preserve-symlinks-main --preserve-symlinks dist/server.js",
}
npm install
npm run start