Nextjs 15: Importing git modules issue - 'Module not found: Can't resolve 'package-name'

[moltco]

Link to the code that reproduces this issue

https://github.com/moltco/simple-consumer-2

To Reproduce

1. Clone sample TypeScript module package: git clone https://github.com/moltco/simple-package
2. Clone NextJs@canary app boilerplate that imports the above package: git clone https://github.com/moltco/simple-consumer-2
3. pnpm install && pnpm build (or pnpm dev then visit http://localhost:3000/ to get it to compile)
4. Error raised by Nextjs: 'Module not found: Can't resolve 'simple-package'

Current vs. Expected behavior

Expected: import to work Current: typescript intellisense etc works but cannot compile.

Provide environment information

OS: Win 10
Nodejs: v20.17.0
pnpm: 9.10.0
"next": "15.0.0-canary.148",
"react": "19.0.0-rc-7771d3a7-20240827",
"react-dom": "19.0.0-rc-7771d3a7-20240827",

Which area(s) are affected? (Select all that apply)

Module Resolution

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

I tested agains canary 15.0.0-canary.56 and 15.0.0-canary.148 -> both seem to suffer from the same issue

[moltco]

Also fails with Nextjs 14.2.9 and React 18, same error indicating possible issue with Webpack:

> next build

  ▲ Next.js 14.2.9

   Creating an optimized production build ...
Failed to compile.

./app/page.tsx
Module not found: Can't resolve 'simple-package'

https://nextjs.org/docs/messages/module-not-found

> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.

I have tried using ts-load with 'special' webpack config as mentioned here https://stackoverflow.com/questions/72259833/error-importing-private-repo-into-next-project but this did not work.

Note - all repos used to reproduce issue here are public (although I would normally use a private repo).

[moltco]

I realised after a while that the packages installed from git are not compiled by npm/pnpm/yarn which was causing some issues. Once compiled, it feels the next dev fails to compile some code and instead of reporting what the issue is, the node reports that it can't find the file (which happens to be the git repo package). So, I get something like

⨯ uncaughtException: TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received 'C:\\Users\\moltco\\source\\repos\\nextjs-dashboard\\.next\\server\\vendor-chunks\\nice-message@git+https+++git@github.com+mol...
    at Object.stat (node:fs:1583:10)
    at Object.stat (C:\Users\moltco\source\repos\nextjs-dashboard\node_modules\.pnpm\next@15.0.0-canary.148_react-dom@19.0.0-rc-f38c22b244-20240704_react@19.0.0-rc-f38c22b244-202_5a2lopq3y3vcnpkpn7fcimpuiy\node_modules\next\dist\compiled\webpack\bundle5.js:1:278998)
    at writeOut (C:\Users\moltco\source\repos\nextjs-dashboard\node_modules\.pnpm\next@15.0.0-canary.148_react-dom@19.0.0-rc-f38c22b244-20240704_react@19.0.0-rc-f38c22b244-202_5a2lopq3y3vcnpkpn7fcimpuiy\node_modules\next\dist\compiled\webpack\bundle5.js:28:144693)
    at C:\Users\moltco\source\repos\nextjs-dashboard\node_modules\.pnpm\next@15.0.0-canary.148_react-dom@19.0.0-rc-f38c22b244-20240704_react@19.0.0-rc-f38c22b244-202_5a2lopq3y3vcnpkpn7fcimpuiy\node_modules\next\dist\compiled\webpack\bundle5.js:28:1378856
    at FSReqCallback.oncomplete (node:fs:187:23)
    at FSReqCallback.callbackTrampoline (node:internal/async_hooks:130:17) {
  code: 'ERR_INVALID_ARG_VALUE'

What I did then is copy the code from git into the main project and after that I found that React/Nextjs were having issues in transferring data and functions between server and client components. Fair enough but the error messages with the repo were completely absent. Also, this wasn't the fault of the imported git library as such. I am also not clear why the issues between passing data/functions between server/client components wasn't raised before as the git library is a wrapper so all underlying types and their serialization properties were the same before and after the library. It is worth mentioning that next build worked at every step of the way without reporting any issues.

So I fixed the newly discovered issues between server/client components and then tried again to import the library from git instead of having the local code. But then I received again the error above with path (compiled file) not found. So I guess there must be more errors that are hidden by the nextjs/react compilation process.

Is there a way to get more detailed output so to understand why exactly nextjs build/webpack/react 19 are failing?

I tried NODE_OPTIONS='--inspect' but it doesn't give anything more.

[moltco]

I have now realised that there is a further discrepancy in importing packages from git with nextjs:

1. If I run next dev -> this will fail at the first import of the package with the same TypeError ERR_INVALID_ARG_VALUE
2. If I run next build && next start -> this works as expected, no issues with imports

I have tried adding "stuff" to next.config.mjs based on various posts with similar issues but none of this works - e.g I now have

  transpilePackages: ["simple-package"],
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push({
      test: /\.(ts)x?$/, // Just `tsx?` file only
      use: [
        {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
            experimentalWatchApi: true,
            onlyCompileBundledFiles: true,
          },
        },
      ],
    });

// Ensure proper resolution of .mjs files
    config.resolve = {
      ...config.resolve,
      extensions: [".js", ".jsx", ".ts", ".tsx", ".mjs"],
      alias: {
        ...config.resolve.alias,
        "simple-package": path.resolve(__dirname, "node_modules", "simple-package"),
      },
    };

    // Clear cache if necessary
    if (dev) {
      config.cache = false;
    }

Also, the folder which Webpack raises with TypeError does not exist with next dev; node_modules contains the package and it is compiled from ts to js correctly too.

I wonder what is the difference in the webpack options used between next dev and next build/start?