Resolve alias fails - "Module not found: Error: Can't resolve"

Bug report

What is the current behavior?

Hi, I am using webpack 5 via nextjs and need to resolve an import with an alias. However it fails. Here is the config, with two different options. Both resulting in different errors. It seems Option 2 is the right direction, but it still fails. I upgraded to latest nextjs (10.2.3) and babel version (7.14.3).

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {      
      // Option 1 fails with Cannot find module. It seems this one does still compile with mapbox-gl
      // config.resolve.alias['mapbox-gl'] = 'maplibre-gl'
      config.module.rules.push({
        resolve:{
          alias: {
            ...config.resolve.alias,
            // Option 2 via rules fails with Module not found: Error: Can't resolve 'mapbox-gl'
            'mapbox-gl': 'maplibre-gl'
          }
        }
      })
      return config
    }

If the current behavior is a bug, please provide the steps to reproduce.

I am using nextjs with react-mapbox-gl and maplibre-gl. Since react-mapbox-gl normally works with mapbox-gl the usage of the maplibre-gl fork is possible via aliases as mentioned here: https://github.com/alex3165/react-mapbox-gl/issues/924#issuecomment-755377958

Since this issue seems to be mainly related to webpack and not nextjs, I am asking the question here.

What is the expected behavior?

Within the node_module “react-mapbox-gl” all instances of mapbox-gl imports should be replaced with maplibre-gl. Is there maybe a better resolve condition than “mapbox-gl”: “maplibre-gl” to replace a module import within a node_module?

Other relevant information: webpack version: 5.? (unfortunately I do not know, which version nextjs uses, I assume one of the latest) Node.js version: 14.15.5 Operating System: Windows Additional tools: Babel 7.14.3, typescript 4.1.3

[alexander-akait]

I think Next.js uses externals for packages inside node_modules for SSR, so react-mapbox-gl is loading from node_modules directly, you can check this in stack trace:

Error: Cannot find module 'mapbox-gl'
Require stack:
- /home/user/projects/next-resolve-alias-issue/node_modules/react-mapbox-gl/lib/map.js
- /home/user/projects/next-resolve-alias-issue/node_modules/react-mapbox-gl/lib/index.js
- /home/user/projects/next-resolve-alias-issue/.next/server/pages/index.js
// ...

and aliases doesn’t work here, because webpack doesn’t touch this file (otherwise you will get an error on bundled file in .next directory).

So better ask them how do it. Anyway you can use it using yarn/npm, for npm you can do:

{
    "dependencies": {
        "mapbox-gl": "npm:maplibre-gl@^1.14.0"
    }
}

I think yarn should support this too

[dennemark]

The solution via dependencies seems to work! I tried it with yarn within a yarn workspace environment and I did not experience any issues yet. So I see this issue as resolved. Thanks a lot again @alexander-akait , your explanation was very helpful!