Fail to compile when a package name is customised

[ivawzh]

• I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE

Are you trying to transpile a local package or an npm package?
Local package

Describe the bug

When I customize a package name, i.e. name in package.json is different from the package folder name, it fails with error message :

/node_modules/db/index.tsx 1:17
Module parse failed: Unexpected token (1:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> const Db = () => <p>DB!</p>
| 
| export default Db

To Reproduce

Reproduction repo here

Home page (without requiring name-customised package) is working

The page requires name-customised package is failing

When comparing the working and failing pages, apparently the error drivers are from

https://github.com/ivawzh/reproduce-next-transpile-modules-error/blob/0e8af7e8696f858875f39ecc5c6aa613fb9cdcea/packages/web-app/next.config.js#L5

https://github.com/ivawzh/reproduce-next-transpile-modules-error/blob/0e8af7e8696f858875f39ecc5c6aa613fb9cdcea/packages/db/package.json#L2

Expected behavior

I believe (correct me if I am wrong) the correct behaviour is that it doesn't restrict package name to match folder's name, especially when the name is following the yarn workspace's common pattern. If that's not the case, would you please also let me know what kind of implementation the doc was referring to 👇 ?

const withTM = require('next-transpile-modules')(['@shared/ui', '@shared/utils']);

Thanks in advanced 🙂

Setup

• Next.js version: 9.4.4
• next-transpile-modules version: 3.3.0
• Node.js version: v12.16.1
• npm/yarn version: yarn v1.22.4
• Operating System: Mac 10.15.5

[martpie]

Hello there 👋

I did not think about this case but I am not suprised at all. Webpack (the Next.js bundler) does not really know the exact path of a specified package (we work with regexes in order to detect if we should transpile a package or not).

There is probably a couple of things we could do about it. In the meantime, I highly recommend to use the same name than the pathname (I don't really see a valid usecase when you would like to do that)

[ivawzh]

Oh, I see. Just wondering in the doc

const withTM = require('next-transpile-modules')(['@shared/ui', '@shared/utils']);

How do you prepend the namespace to the folder name? As there is a / in the name.

As usecase, it's a common practice to have namespace in monorepo to avoid external package naming collision. It is also easier to identify which dependencies are internal base on the @namespace.

However, it turns out the lib I need requires ts config with module: 'commonjs' which conflicts with NextJS dynamic import. Therefore, I am not able to use next-transpile-modules in the project. Instead, now I am using yarn workspaces + tsc composite + webpack extra file watch plugin.

So please feel free to close the issue if you found it not relevant anymore. Thanks for asking my questions =]

[martpie]

Should be fixed in #132