关键依赖：一个依赖的请求是一个表达式，vue.js答案

【问题标题】：Critical dependency: the request of a dependency is an expression, vue.js关键依赖：一个依赖的请求是一个表达式，vue.js
【发布时间】：2020-06-15 02:16:18
【问题描述】：

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

(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'
    }
}

关于如何解决它的任何想法？

【问题讨论】：

标签： vue.js webpack peerjs

【解决方案1】：

以下代码对我有用。编辑 vue.config.js 并添加 webpack 配置：

configureWebpack: {
  module: {
      exprContextCritical: false
      }
}

【讨论】：

【解决方案2】：

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。从昨天开始，我使用 yarn 而不是 npm，并且错误消息消失了。但你的建议应该可以正常工作

【解决方案3】：

对于使用 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
}

似乎是 library bundler (parcel) 和 CRA bundler (webpack) 之间的错误，我在途中找不到任何官方修复。

【讨论】：

但是为什么会起作用呢？这是在完成什么？这里没有足够的信息供人们确定这是否是一个好的解决方法。