import-js / import-js/eslint-plugin-import

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

Open
#1,966 3 comments 0 reactions 0 assignees View on GitHub
enhancement help wanted
Dominant language
JavaScript
Stars
5.9k
Forks
1.5k
PR merge metrics
No 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](https://webpack.js.org/configuration/externals/#function), 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 ()
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](https://github.com/benmosher/eslint-plugin-import/blob/18f9bd31fb613d9062dd6fe8057b0e1f519e4154/resolvers/webpack/index.js#L330). 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

Open the contributing guide

Research direction

Start in resolvers/webpack/index.js at the findExternal function referenced by the issue, and compare how it invokes webpack externals with the webpack 4 and webpack 5 APIs shown here. Reproduce the failure using a webpack 5 configuration with a function external, then verify that import resolution completes without the callback TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.