import-js / import-js/eslint-plugin-import
eslint-import-resolver-webpack is not compatible with webpack 5 - TypeError: callback is not a function
- 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
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