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

Question

我正在尝试将模块npm链接到使用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
- 如何使链接组件对等使用所链接到的脚本的等效node_modules？
- 和许多紫色链接在谷歌搜索引擎

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安装（也尝试过没有，不起作用）
3. 我使用 NVM，但我以前在没有 webpack 的情况下使用过符号链接。

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

Answer 1

我在webpack上遇到了类似的问题，最终添加了我的webpack.config.js：

module.exports = {
    resolve: {
        symlinks: false
    }
};

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

• Webpack GitHub 问题 1643
• Webpack GitHub Issue 1866

Answer 2

还要确保在链接包中安装并执行捆绑包和纱线

Answer 3

好的伙计们，这是特定于我的用例的，但请确保按照所有说明完全构建您正在符号链接的库。最初，我是一个npm安装和吞噬构建，但这还不够。我必须运行一些额外的命令才能完全构建库。

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

Answer 4

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

在图书馆中：

1. 将生成问题的库设置为package.json中的peerDependencies，而不是dependencies或devDependencies，例如，在我的情况下react：

"peerDependencies": {
  "react": "^16.8.6",
  ...
}

2. 运行npm install
3. 构建库（在我的例子中，使用 rollup -c npm 脚本

在我的主应用程序中：

4. 更改我的库的版本以指向我的本地项目，并在 package.json 中使用相对路径，例如

"dependencies": {
  "my-library": "file:../../libraries/my-library",
  ...
}

5. 将resolve.symlinks = false添加到我的主应用程序的 webpack 配置中

6. 将--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",
}

7. 运行npm install
8. 运行npm run start