CODEWITHSUNDEEP
vue.jswebpackpeerjs
user2315094
user2315094

Reputation: 809

Critical dependency: the request of a dependency is an expression, vue.js

My testing-app is compiling fine, except that I get this warning: " Critical dependency: the request of a dependency is an expression"

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

> [email protected] 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.

I read around that it might depend of webpack, but didn't find how to put it right.

This is 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'
    }
}

Any ideas about how to solve it?

Upvotes: 8

Views: 13216

Answers (3)

w1100n
w1100n

Reputation: 1668

The following code works for me. Edit vue.config.js and add webpack config:

configureWebpack: {
  module: {
      exprContextCritical: false
      }
}

Upvotes: 13

Fabien
Fabien

Reputation: 21

For people coming here using CRA and having trouble with PeerJS, install react-app-rewired and use the following override config and it should work.

/* 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
}

It seems it is an error between the library bundler (parcel) and CRA bundler (webpack), and I couldn't find any official fix on the way.

Upvotes: 0

Maulana Yusup Abdullah
Maulana Yusup Abdullah

Reputation: 501

const webpack = require('webpack');

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

try this one

Upvotes: 0

Related Questions