"yarn workspace" commands don't work

[aswbot]

Hello.

• 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

../components/src/Header.tsx 3:5
Module parse failed: Unexpected token (3:5)
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
| import React from 'react'
| 
> type Props = React.PropsWithChildren<{
|   className?: string
| }>

To Reproduce

$ git clone https://github.com/aswbot/ntm-transpile-error.git && cd ntm-transpile-error
$ yarn
$ yarn workspace @app/web dev

Expected behavior
It should work out of the box afaik, no babel configuration as Next comes with TypeScript support.
It is weird but removing the types does work. It only complains about type annotations/declarations. 🤔
Any ideas?

Setup

• Next.js version: 9.5.1
• next-transpile-modules version: 4.0.2
• Node.js version: 14.3.0
• npm/yarn version: Yarn 1.22.4
• Operating System: Windows 10 x64
• Webpack 4 or 5: Both 4 and 5

[dmeents]

I am also experiencing this issue.

[martpie]

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 #101 (comment)

[dmeents]

Here's the error I'm getting on my project, seems related to @aswbot

I however am getting this called on interfaces, not just types. I've been attempting to resolve this for a few days with no luck, but this is a new issue for me. This was working without issue for a long time, then suddenly stopped working (after updating).

Module parse failed: The keyword 'interface' is reserved (10:0)
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/concept
s#loaders
| import { FormFieldError, FormFieldWrapper } from '../../styles';
|
> interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|   value: any;
|   id: string;

[martpie]

It looks there is an issue with some TS features transpilation, I will try to have a look as soon as I can, but I have a lot on my plate right now.

I recommend you rollback your Next.js version for now (or submit a PR if you really cannot wait) :)

[martpie]

@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.

[aswbot]

@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.

[dmeents]

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]

Thank you guys for the investigation, I will try to check what is going wrong exactly

[belgattitude]

I've got hit too, created a sample repo based on latest with-yarn-workspace examples. You can have a look if it helps:

https://github.com/belgattitude/with-yarn-workspace/blob/master/packages/web-app/next.config.js

Thanks for your work on this, really appreciate!

(note that you might have to lock to nextjs 9.5.1 - not sure how it will work with 9.5.2)

[martpie]

To anyone with this issue:

• Are you using Windows?
• In which version did it stop working for you?

[belgattitude]

Hey @martpie...

Edit: I don't think it was working ever`, Your tests works perfectly.

I tried few older versions on this P/R belgattitude/next-transpile-ts-workspace#4 to be sure, but I'll probably need to tune the typescript/workspace setup.

I'm also investigating those issues that would avoid transpilation:

• merged in 9.5.2: improves baseUrl resolution in typescript monorepos vercel/next.js#13542
• not yet merged: enables transpilation for packages below baseUrl vercel/next.js#15569
• rfc: RFC: automatically transpile files based on baseUrl configuration vercel/next.js#15327

[belgattitude]

@martpie My bad it looks everything works for me (at least onlinux), was just stupid and forgot to transpile foo. I'll make a p/r in nextjs example for those who got stuck like me. Thanks a lot anyway.

[tkstang]

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']
});

[jdfm]

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? 🤷

[martpie]

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

[martpie]

Should hopefully be fixed in #132 if anyone has the courage to test the branch 😄 (careful it is unstable)

Will leave open until I have confirmation.

[shobhitsharma]

@martpie still exists, manually adding ../path/to/package is currently resolving it. Also using yarn workspaces.

[martpie]

With v6?

[shobhitsharma]

@martpie Yes, it doesn't recognise the subpackage, doing manual path mapping just solves it.

[martpie]

Have you followed all the FAQ steps and checked v5/v6 changes and setup indications?

[shobhitsharma]

@martpie If from that you mean have "main": "src/index.ts", that's always included in all packages in this monorepo. It fails with babel maybe because of typescript? Don't think so.

[martpie]

Do you have a reproduction/some code I could look at?

[shobhitsharma]

@martpie Hi, not yet. I will codesandbox tomorrow, for quick here is yarn worksapce directory structure

project
   \ apps
        \ web --> next.config.js is using withTM() for '@project/ui-library'
   \ packages
        \ ui-library -> package.json main resolves to src/index.ts

and error log:

Loaded env from /path/to/project/apps/web/.env.local
Loaded env from /path/to/project/apps/web/.env
info  - Using external babel configuration from /path/to/project/apps/web/babel.config.js
info  - Creating an optimized production build  
Failed to compile.

/path/to/project/packages/ui-library/src/index.ts 7:7
Module parse failed: Unexpected token (7:7)
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
| 
| export { styled, createStyledProps } from './styled';
> export type { StyledProps, ResponsiveProps, CSSModule, Tag } from './styled';
| export { styled as _styled, css } from './styled.config';
|


> Build error occurred
Error: > Build failed because of webpack errors
    at build (/path/to/project/node_modules/next/dist/build/index.js:15:918)
shobhitsharma@Shobhits-MacBook-Pro web % 

This error only resolves when I change: @project/ui-library to ../../packages/ui-library

[alchemistgo87]

Workspace in root package.json:

"workspaces": {
    "packages": [
      "packages/*"
    ]
  },

Here is package.json of components:

{
  "name": "components",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "test": "jest --passWithNoTests"
  },
  "peerDependencies": {
    "@types/react": "*",
    "@types/react-native": "*",
    "react": "*",
    "react-native": "*"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.7",
    "@react-navigation/drawer": "^5.12.3",
    "@react-navigation/stack": "^5.14.2",
    "react-native-gesture-handler": "^1.10.0",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.17.1"
  }
}

[martpie]

@alchemistgo87

Why did you enable resolveSymlinks: true,? Your problem is most probably coming from there

[alchemistgo87]

I just tried removing resolveSymlinks: true, but gives the same error.

Actually it all happened after adding the dependencies -
yarn add next-compose-plugins next-fonts next-images

Do you think, the error has something to do with any one of these dependencies?

[martpie]

• 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.

[alchemistgo87]

@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.

[martpie]

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

the problem is most probably coming from this line:

next-transpile-modules/src/next-transpile-modules.js

Line 21 in 2d935be

const CWD = process.cwd();

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.

[ical10]

#101 (comment)

Hi @martpie, I am trying to transpile several packages from @polkadot/api (as advised in this issue thread: polkadot-js/api#3374) but run into the same issue as the comment above.

Here is my configuration:

"next": "9.5.4",
"next-transpile-modules": "^6.4.0",

node v15.13.0
yarn v1.22.10
OS: MacOS v10.14.6

My next.config.js:

const withTM = require('next-transpile-modules')([
  '@polkadot/api',
  '@polkadot/api-derive',
  '@polkadot/extension-dapp',
  '@polkadot/hw-ledger',
  '@polkadot/hw-ledger-transports',
  '@polkadot/keyring',
  '@polkadot/metadata',
  '@polkadot/networks',
  '@polkadot/rpc-core',
  '@polkadot/rpc-core',
  '@polkadot/rpc-provider',
  '@polkadot/ts',
  '@polkadot/types',
  '@polkadot/types-known',
  '@polkadot/ui-keyring',
  '@polkadot/ui-settings',
  '@polkadot/util',
  '@polkadot/util-crypto',
  '@polkadot/wasm-crypto',
  '@polkadot/x-fetch',
  '@polkadot/x-global',
  '@polkadot/x-rxjs',
  '@polkadot/x-ws'
]);
module.exports = withTM({
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/
      },
      use: ['@svgr/webpack']
    });

    return config;
  }
});

I aliased yarn dev into ts-node -r dotenv/config --project tsconfig.server.json server/index.ts
and ran it, producing Error.log as the following:

/Users/rizal/GDrive/blocksphere/myri/myriad/node_modules/next-transpile-modules/src/next-transpile-modules.js:136
        throw new Error(
              ^
Error: next-transpile-modules - an unexpected error happened when trying to resolve "@polkadot/hw-ledger-transports"
Error: Can't resolve '@polkadot/hw-ledger-transports' in '/Users/rizal/GDrive/blocksphere/myri/myriad'
    at getPackageRootDirectory (/Users/rizal/GDrive/blocksphere/myri/myriad/node_modules/next-transpile-modules/src/next-transpile-modules.js:136:15)
    at Array.map (<anonymous>)
    at withTM (/Users/rizal/GDrive/blocksphere/myri/myriad/node_modules/next-transpile-modules/src/next-transpile-modules.js:145:34)
    at Object.<anonymous> (/Users/rizal/GDrive/blocksphere/myri/myriad/next.config.js:26:18)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Module.m._compile (/Users/rizal/GDrive/blocksphere/myri/myriad/node_modules/ts-node/src/index.ts:1056:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Object.require.extensions.<computed> [as .js] (/Users/rizal/GDrive/blocksphere/myri/myriad/node_modules/ts-node/src/index.ts:1059:12)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)

package.json of @polkadot/hw-ledger-transports contains:

  "main": "node.js",
  ...
  "exports": {
    ".": {
      "require": "./index.cjs", // Had to add these two lines, otherwise path error occurs
      "default": "./index.js", // Had to add these two lines, otherwise path error occurs
      "browser": {
        "require": "./browser.cjs",
        "default": "./browser.js"
      },
      "node": {
        "require": "./node.cjs",
        "default": "./node.js"
      },
      "react-native": {
        "require": "./react-native.cjs",
        "default": "./react-native.js"
      }
    }

Any clue where I might be wrong?

[martpie]

#101 (comment)

I haven't had time to investigate this issue too much yet

[darwin403]

yarn install next-transpile-modules@4.1.0 did the job for me. It seems to be a problem with the module resolution of scoped variables like @company/my-package in the later versions. Here is a working boilerplate with next-js. https://github.com/brunolemos/react-native-web-monorepo

Note however that they do not use scoped variables there.

[belgattitude]

@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)

[darwin403]

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

[dweste01]

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

the problem is most probably coming from this line:

next-transpile-modules/src/next-transpile-modules.js

Line 21 in 2d935be

const CWD = process.cwd();

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.

@martpie not sure if this is exactly what is needed - but the yarn API provides relativeCwd and workspacesCwds

[martpie]

Thank you @dweste01, will look into it

[owensco]

Getting the same error as above:
next-transpile-modules - an unexpected error happened when trying to resolve...

But only when I deploy my monorepo via Vercel. Everything works as expected running locally 🤔

[martpie]

@owensco probably unrelated. Make sure your transpiled dependencies are NOT devDependencies

[owensco]

@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 😔

[martpie]

cf. #101 (comment) The problem is explained here, I just don't know how to solve it.

[owensco]

@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 🤦‍♂️

[kherock]

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))
})