import-js/eslint-plugin-import

eslint-import-resolver-webpack is not compatible with webpack 5 - TypeError: callback is not a function

Open

#1,966 opened on Dec 21, 2020

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (1,540 forks)batch import
enhancementhelp wanted

Repository metrics

Stars
 (4,946 stars)
PR merge metrics
 (Avg merge 138d 22h) (3 merged PRs in 30d)

Description

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.

Contributor guide