npm 与 webpack 的链接 - 找不到模块

Posted 2023-02-16

【中文标题】npm 与 webpack 的链接 - 找不到模块

【英文标题】：npm link with webpack - cannot find module

【发布时间】：2016-10-12 15:51:11

【问题描述】：

我正在尝试将一个模块链接到一个使用 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? - 以及 google serps 上的许多紫色链接

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就用过symlinks成功。

我已经在这几天了，任何帮助将不胜感激。

【问题讨论】：

我也是。坚果没有找到现有的答案。问题很明显 - babel/webpack 不遵循或适应符号链接

这对我来说是一种表演障碍。我与我的应用程序一起为我的应用程序开发了多个支持库，看起来我需要找到 webpack 的替代品来支持这个工作流程。

有趣的事实：webpack 不工作与 npm 链接。它“有据可查”，但 @#$*( 很难找到。webpack.github.io/docs/…。我们经常遇到这种情况，我们完全停止使用 npm 链接：如果你有一个 fork，要么指向 require('../../../yourfork') 和尽可能多的 @ 987654328@ 因为您需要进入 fork 目录，或者，使用 github 链接而不是 npm semver 指向您自己的 fork，或者（我们已经开始这样做）只是将您的 fork 复制到 node_modules 目录中开发工作。

【参考方案1】：

以防万一它对其他人有用，将resolve.symlinks配置添加到falsesuggested by @Beat的解决方案对我来说是不够的，我必须执行以下步骤来解决它：

图书馆中：

在package.json 中将产生问题的库设置为peerDependencies，而不是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

【参考方案2】：

还要确保在链接包中安装并执行了 bundle 和 yarn

【参考方案3】：

我遇到了与webpack 类似的问题，最后添加了我的webpack.config.js：

module.exports = 
    resolve: 
        symlinks: false
    
;

这里是webpack docs 的链接。由于您的问题webpack 和他们的 api 发生了很多事情，所以我不知道根据您的问题我的回答还有多少相关性。但是对于今天面临这个或类似问题的人来说，这可能是一个解决方案。可见，还是有人抱怨：

Webpack GitHub Issue 1643 Webpack GitHub Issue 1866

【讨论】：

从其他人那里读取 cmets，这样做的缺点是会破坏 HMR，因此在应用程序运行时，当依赖项在其原始位置更新时，它不会重新加载。

【参考方案4】：

好的，伙计们，这是特定于我的用例的，但请确保遵循所有说明来完全构建您正在符号链接的库。最初，我进行了 npm install 和 gulp 构建，但这还不够。我必须运行一些额外的命令才能完全构建库。

现在可以了！如果您仍然遇到问题，请查看您要符号链接的每个库的文档，并使用我的 webpack 配置作为解析外部库的模板。