eslint-plugin-import
eslint-plugin-import copied to clipboard
eslint-import-resolver-webpack is not compatible with webpack 5 - TypeError: callback is not a function
eslint-import-resolver-webpack is not compatible with webpack 5 externals API of webpack config.
When I use function for resolving externals, I am getting an error:
ESLint:
Resolve error: TypeError: callback is not a function
at D:\++projects\++datlowe\ui\datlowe-core\src\js\/externals.js:102:13
at findExternal (D:\++projects\++datlowe\ui\datlowe-core\node_modules\eslint-import-resolver-webpack\index.js:330:15)
at D:\++projects\++datlowe\ui\datlowe-core\node_modules\eslint-import-resolver-webpack\index.js:321:49
at Array.some (<anonymous>)
at findExternal (D:\++projects\++datlowe\ui\datlowe-core\node_modules\eslint-import-resolver-webpack\index.js:321:22)
at Object.exports.resolve (D:\++projects\++datlowe\ui\datlowe-core\node_modules\eslint-import-resolver-webpack\index.js:135:7)
at v2 (D:\++projects\++datlowe\ui\datlowe-core\node_modules\eslint-module-utils\resolve.js:117:23)
at withResolver (D:\++projects\++datlowe\ui\datlowe-core\node_modules\eslint-module-utils\resolve.js:122:16)
at fullResolve (D:\++projects\++datlowe\ui\datlowe-core\node_modules\eslint-module-utils\resolve.js:139:22)
at relative (D:\++projects\++datlowe\ui\datlowe-core\node_modules\eslint-module-utils\resolve.js:84:10)
(import/namespace)
Issue happens because there was a change to that funtion API:
- Webpack 4:
function(context, request, callback) {} - Webpack 5:
function({ context, request }, callback) {}My function for resolving external is now looking like this:
// there was change of API in webpack 5
// webpack 4 version looks line this
// function(context, request, callback) {
function({context, request}, callback) {
const modulePath = path.join(context || '', request || '');
if (/node_modules[/\\]/.test(modulePath)) {
const splittedPath = modulePath.split(/node_modules[/\\]/);
if (splittedPath && splittedPath.length > 0) {
// if request is not a relative path starting with dot (.), use request instead of the whole module path
const externalModulePath = /^\./.test(request) ? splittedPath[splittedPath.length - 1] : request;
// the externalized module is referenced as a commonjs module
return callback(null, `commonjs ${externalModulePath}`);
}
}
// Continue without externalizing the import
callback();
}
The issue is in findExternal function here. In weback 5 the first argument is an object consisting of context and request and the callback is the second not the third argument now.
A PR that handles both cases would be appreciated.
I also encountered this problem.
Since it seems not so difficult to fix, I created the PR #2023.
Still waiting on this fix.