Recently I’m trying to upgrade next.js to v10.x from v9.3.6 but getting error in the build mode. dev mode works in both next.js v10.x and v9.x.

this is the sample repo: https://github.com/lava-x/test-rnw-monorepo

dev is working:

build is not working

NPM packages version "next": "10.0.6" "next-transpile-modules": "6.3.0"

Environment yarn 1.22.10 node v15.11.0 macOS Big Sur 11.2.2 arm-based macbook M1

this is the next.config.js

const withTM = require('next-transpile-modules')([
    '@components/shared'
  ], {
  debug: true
})

module.exports = withTM({
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
    }
    config.resolve.extensions = [
      '.web.js',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ]
    return config
  },
})

there is another person facing the same issue as well: https://github.com/brunolemos/react-native-web-monorepo/issues/69

@samuelcastro please read the breaking changes in v5/6 and how to get through them, I bet you don’t have a main field in @elements/ui’s package.json

@martpie thanks for the reply.

I was able to resolve the error by modifying the path of the shared package in next.config.js:

from: const withTM = require('next-transpile-modules')(['shared']); to: const withTM = require('next-transpile-modules')(['../shared']);

I don’t think this is an actual solve as none of the examples require this. It’s also lead to new module not found errors in the shared app when deploying to Vercel (anything that the shared app imports e.g. @chakra-ui/react throws an error on deployment, but works locally). Fun times 😔

cf. https://github.com/martpie/next-transpile-modules/issues/101#issuecomment-776941232 The problem is explained here, I just don’t know how to solve it.

@martpie As suggested by you, I removed all these plugins, deleted my node_modules package and started adding these plugins one by one, and this time, I don’t know how everything worked out. Now I am able to run the app from root folder as well as from the nextjs folder. Don’t know where I messed up, but now everything is working fine.

Thank you so much for all your support.

I made the mistake of not updating the usage when updating from a much older version (2.3). Worth checking in case this is anyone else’s issue.

// next.config.js
- const withTM = require('next-transpile-modules');
+ const withTM = require('next-transpile-modules')(['somemodule', 'and-another']);
 
module.exports = withTM({
-  transpileModules: ['somemodule', 'and-another']
});

I have no clue why this made the difference for me, but using your comment @aswbot I was able to get mine working too. I haven’t been able to pinpoint what changed between these repos, but simply changing my baseUrl: '.' to baseUrl: 'packages' (like you had actually removed) solved it for me.

@martpie Thanks for the test and issue hunting I actually found the reason why it was not transpiling correctly.

Firstly I tried what you proposed but still had no luck. I then thought it had something to do with scoped packages so I tried making the components just app-components instead of @app/components and it did actually work so that was first thing (no idea why tho, shouldn’t be the case 🤷‍♀️)

The real reason was my tsconfig.json which had

{
  "baseUrl": "packages",
  "paths": {
    "@app/components": ["components/src/"]
  }
}

I removed baseUrl and paths for ready to be transpiled local packages and it started working. Not sure if that is the case for @dmeents but could be the issue and it is then easy to solve.

I think it would sound perfectly reasonable to pass a directory as an option to next-transpile-modules to fix this. Next.js already advises you to pass it for setting up the Jest preset: https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler

This is what it could look like as an option:

/* next.config.js */
const withTM = require('next-transpile-modules')(['some-module'], {
  dir: __dirname
})

/* next.config.mjs */
import nextTranspileModules from 'next-transpile-modules'
import { pathToFileURL } = from 'url'

const withTM = nextTranspileModules(['some-module'], {
  dir: fileURLToPath(new URL('.', import.meta.url))
})

@martpie that did it! Thank you so much!

For anyone running into this issue when deploying to Vercel, make sure you update your build & deploy settings to use yarn and not npm 🤦‍♂️

@belgattitude Thanks. Creating a index.ts and exporting all components from there did the job for me!

@darwin403 I haven’t had problem with scoped packages and yarn or even yarn-3.0.0-rc.2 (not yet pnp).

It seems to be a problem with the module resolution of scoped variables like @company/my-package in the later versions.

I think you should be able to upgrade to latest NTM by

• adding a “main” field in your component package.json
• that “main” field should point to a barrel file like ‘index.tsx’, that will export components you need (like AppHeader… in your example).

See the latest NTM doc about it.

PS:

• NTM = next-transpile-modules
• Another option that works in some circumstances, creates aliases in tsconfig… and bypass the need for NTM (see https://github.com/belgattitude/nextjs-monorepo-example#proscons)

⚠️ For anyone interested in diving into the issue ⚠️

the problem is most probably coming from this line:

https://github.com/martpie/next-transpile-modules/blob/2d935beb70f8420ca42dd0d7bb2ca6755ff8d38c/src/next-transpile-modules.js#L21

I imagine in a yarn workspace command, process.cwd() resolves to the root of the workspaces, but we want it to be resolved to the root of the Next.js application.

If anyone knows a quick way to fix this, feel free to post here a hint or submit a PR.

• remove resolveSymlinks, in 99.9% of the cases, you don’t need it
• all these other plugins modify the Webpack configuration (like next-transpile-modules), so this is entirely possible there is a conflict between the three plugins
• try to isolate which plugin compilation causes the issue
• try to re-order the plugins calls in next.config.js and see if it changes something (cf README)

If you manage to identify which combination causes the issue, I’ll be able to dive in and see what causes the issue, but this is a different issue than this one (which is about yarn workspace), so I’d recommend creating a new issue.

To anyone facing this issue

-> please in the meantime, don’t use yarn workspace blabla dev, run the yarn dev command from your Next.js application directory directly.

I know why this is happening, I will see how it can be solved (I’m not really sure how)

I will try to investigate this issue this week guys. I may have time to land a hotfix before #132 lands

Our team was running into this issue recently as well.

If your next-transpile-modules config used to look something like @alias/core, changing it to be path/to/actual/core seems to fix it. In our case, we had a set up that looked like:

module.exports = withTM({
  transpileModules: ['@alias/core']
});

This would point to a folder in our repo that had a package.json file with the package name @alias/core, and in our tsconfig we had a paths setting that established the alias for typescript. To finally get this working with the package versions outlined in this issue, we changed our withTM setup to look like:

module.exports = withTM({
  transpileModules: ['core/*']
});

After doing so and running our dev environment, things seemed to start working as expected again. Not sure what changed.

In our repo we use yarn workspaces, we have a number of folders with package.json files and whatnot, though, we don’t have everything stored in the same folder, maybe that’s part of this issue? 🤷

@aswbot Can you try using @app in next.config.js instead of @app/components and tell me if it works? I think the problem comes from the scoped package name + what you defined in next.config.js. I added integration tests for React components and they work well.

Weird, we have a test for this case: https://github.com/martpie/next-transpile-modules/blob/master/src/__tests__/__apps__/yarn-workspaces/app/pages/test-local-typescript-module.tsx

Maybe I should try to add a react component as well

Edit: see https://github.com/martpie/next-transpile-modules/issues/101#issuecomment-778690321