Latest version of webpack emits warnings

[ivan-aksamentov]

After upgrading webpack to version greater than 4.16.1, the following webpack warnings are emmited during build and hot reloading:

For client build:

  WARNING in ./node_modules/babel-plugin-universal-import/universalImport.js 33:18-37
  Critical dependency: the request of a dependency is an expression
   @ ./src/components/Switcher.js
   @ ./src/components/App.js
   @ ./src/index.js
   @ multi webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=false&quiet=true&noInfo=true react-hot-loader/patch ./src/index.js
  
  WARNING in ./node_modules/react-universal-component/dist/utils.js 59:11-29
  Critical dependency: the request of a dependency is an expression
   @ ./node_modules/react-universal-component/dist/index.js
   @ ./src/components/Switcher.js
   @ ./src/components/App.js
   @ ./src/index.js
   @ multi webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=false&quiet=true&noInfo=true react-hot-loader/patch ./src/index.js

For server build:

    WARNING in ./node_modules/react-universal-component/dist/utils.js 59:11-29
    Critical dependency: the request of a dependency is an expression
     @ ./node_modules/react-universal-component/dist/requireUniversalModule.js
     @ ./node_modules/react-universal-component/server.js
     @ ./server/render.js
     @ multi regenerator-runtime/runtime.js ./server/render.js
    
    WARNING in ./node_modules/babel-plugin-universal-import/universalImport.js 33:18-37
    Critical dependency: the request of a dependency is an expression
     @ ./src/components/Switcher.js
     @ ./src/components/App.js
     @ ./server/render.js
     @ multi regenerator-runtime/runtime.js ./server/render.js

Workaround: downgrade webpack to version 4.16.1 (downgraded in current version of the boilerplate)

[Enalmada]

Putting "exprContextCritical: false" into the webpack client and server.js appears to work around this problem:

module: {
    exprContextCritical: false,
    rules: [

I can run the project with webpack 4.16.5 using this flag. Is this safe enough for production apps until a real fix can be made?

Source: https://www.bountysource.com/issues/9623657-critical-dependencies-in-webpack

[ivan-aksamentov]

@Enalmada, interesting, thank you for the info.
I can confirm that with exprContextCritical: false "webpack": "^4.16.5" does not emit Critical dependency warning. That is neat. However, I still have no idea why and even what caused the original warning. Do you have any thoughts on that?

For now I will unfreeze the webpack and add this flag with a huge WORKAROUND comment, to both, server and client. The old workaround of freezing the webpack version does not seem to be any better. Also it is easy to roll back to 4.16.1 later if needed, it's just a few patches back.

The only worrisome thing is that webpack documentation advises against using of these flags because they are deprecated.

Just to clarify: I don't think this boilerplate is ready for any serious production, same as react-universal-component & Co. but, hopefully we can make it happen =)

I keep the issue open and it would be great if anyone could shed some more light on this issue and the new workaround.

[Enalmada]

I was just lucky enough to stumble upon the huge workaround during some google searching. This issue seems to go into some depth about the problem and might give the experts some idea of what needs to be fixed in the react-universal-component code.

[ivan-aksamentov]

This is resolved now that we upgraded to "react-universal-component": "^4.0.0-alpha.0". Workaround is removed in a345783.

[Haralambos1991]

../node_modules/got/source/request-as-event-emitter.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

../node_modules/keyv/src/index.js
Critical dependency: the request of a dependency is an expression

Hallo guys, i am trying to fix these 2 errors.. Any solutions;;

this is my code use strict';

const EventEmitter = require('events');
const JSONB = require('json-buffer');

const loadStore = opts => {
const adapters = {
redis: '@keyv/redis',
mongodb: '@keyv/mongo',
mongo: '@keyv/mongo',
sqlite: '@keyv/sqlite',
postgresql: '@keyv/postgres',
postgres: '@keyv/postgres',
mysql: '@keyv/mysql'
};
if (opts.adapter || opts.uri) {
const adapter = opts.adapter || /^[^:]*/.exec(opts.uri)[0];
return new (require(adapters[adapter]))(opts);
}
return new Map();
};

class Keyv extends EventEmitter {
constructor(uri, opts) {
super();
this.opts = Object.assign(
{
namespace: 'keyv',
serialize: JSONB.stringify,
deserialize: JSONB.parse
},
(typeof uri === 'string') ? { uri } : uri,
opts
);

	if (!this.opts.store) {
		const adapterOpts = Object.assign({}, this.opts);
		this.opts.store = loadStore(adapterOpts);
	}

	if (typeof this.opts.store.on === 'function') {
		this.opts.store.on('error', err => this.emit('error', err));
	}

	this.opts.store.namespace = this.opts.namespace;
}

_getKeyPrefix(key) {
	return `${this.opts.namespace}:${key}`;
}

get(key) {
	key = this._getKeyPrefix(key);
	const store = this.opts.store;
	return Promise.resolve()
		.then(() => store.get(key))
		.then(data => {
			data = (typeof data === 'string') ? this.opts.deserialize(data) : data;
			if (data === undefined) {
				return undefined;
			}
			if (typeof data.expires === 'number' && Date.now() > data.expires) {
				this.delete(key);
				return undefined;
			}
			return data.value;
		});
}

set(key, value, ttl) {
	key = this._getKeyPrefix(key);
	if (typeof ttl === 'undefined') {
		ttl = this.opts.ttl;
	}
	if (ttl === 0) {
		ttl = undefined;
	}
	const store = this.opts.store;

	return Promise.resolve()
		.then(() => {
			const expires = (typeof ttl === 'number') ? (Date.now() + ttl) : null;
			value = { value, expires };
			return store.set(key, this.opts.serialize(value), ttl);
		})
		.then(() => true);
}

delete(key) {
	key = this._getKeyPrefix(key);
	const store = this.opts.store;
	return Promise.resolve()
		.then(() => store.delete(key));
}

clear() {
	const store = this.opts.store;
	return Promise.resolve()
		.then(() => store.clear());
}

}

module.exports = Keyv;