关键依赖项: 依赖项请求是一个表达式，vue.js

Question

我的测试应用程序编译正常，但是我收到了这个警告： "关键依赖项：一个依赖项的请求是一个表达式"

(base) marco@pc01:~/webMatters/vueMatters/PeerJS-VueJS-Test$ npm run serve

> testproject@0.1.0 serve /home/marco/webMatters/vueMatters/PeerJS-VueJS-Test
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

WARNING  Compiled with 1 warnings                                                                                                             
7:22:25 PM

warning  in ./node_modules/peerjs/dist/peerjs.min.js

Critical dependency: the request of a dependency is an expression


  App running at:
  - Local:   http://localhost:8080 
  - Network: http://ggc.world/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

我看到一些讨论说这可能取决于webpack，但是没有找到正确的解决方法。

这是webpack.config.js：

{
    "mode": "development",
    "output": {
        "path": __dirname+'/static',
        "filename": "[name].[chunkhash:8].js"
    },
    "module": {
        "rules": [
            {
                "test": /\.vue$/,
                "exclude": /node_modules/,
                "use": "vue-loader"
            },
            {
                "test": /\.pem$/,
                "use": "file-loader"
            }
        ]
    },
    node: {
        __dirname: false,
        __filename: false
    },
    resolve: {
        extension: ['*', '.pem'],
    },
    devServer: {
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000
        },
        https: true,
        compress: true,
        public: 'ggc.world:8080'
    }
}

有什么解决方法吗？

- user2315094

Answer 1

以下代码适用于我。编辑vue.config.js并添加webpack配置:

configureWebpack: {
  module: {
      exprContextCritical: false
      }
}

- w1100n

Answer 2

如果您使用 CRA 并且在使用 PeerJS 时遇到问题，请安装 react-app-rewired 并使用以下覆盖配置，应该可以解决问题。

/* config-overrides.js */
const webpack = require('./node_modules/webpack')

module.exports = function override (config, env) {
  if (!config.plugins) {
    config.plugins = []
  }
  config.plugins.push(
    new webpack.ContextReplacementPlugin(
      /\/peerjs\//,
      (data) => {
        delete data.dependencies[0].critical
        return data
      }
    )
  )

  return config
}

看起来这是库打包工具（parcel）和 CRA 打包工具（webpack）之间的错误，我找不到任何官方修复方法。

- Fabien

---

但是，为什么它能够工作？这到底完成了什么任务？这里提供的信息不足以让人们确定这是否是一个好的解决方法。 - erwstout

Answer 3

const webpack = require('webpack');

module.exports = {
  // ... your webpack configuration ...
  plugins: [
    new webpack.ContextReplacementPlugin(
      /\/package-name\//,
      (data) => {
        delete data.dependencies[0].critical;
        return data;
      },
    ),
  ]
}

试试这个

- Maulana Yusup

---

谢谢@Maulana Yusup。从昨天开始我使用yarn而不是npm，错误信息消失了。但是你的建议应该可以正常工作。 - user2315094