aswbot commented 4 years ago

Hello.

[x] 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 commented 4 years ago

I am also experiencing this issue.

martpie commented 4 years ago

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

101#issuecomment-778690321

dmeents commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

belgattitude commented 4 years ago

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 commented 4 years ago

To anyone with this issue:

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

belgattitude commented 4 years ago

Hey @martpie...

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

I tried few older versions on this P/R https://github.com/belgattitude/next-transpile-ts-workspace/pull/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: https://github.com/vercel/next.js/pull/13542
not yet merged: https://github.com/vercel/next.js/pull/15569
rfc: https://github.com/vercel/next.js/discussions/15327

belgattitude commented 4 years ago

@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 commented 4 years ago

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 commented 3 years ago

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? :shrug:

martpie commented 3 years ago

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

martpie commented 3 years ago

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 commented 3 years ago

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

martpie commented 3 years ago

With v6?

shobhitsharma commented 3 years ago

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

martpie commented 3 years ago

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

shobhitsharma commented 3 years ago

@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 commented 3 years ago

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

shobhitsharma commented 3 years ago

@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

martpie commented 3 years ago

If you can paste the three package.json, and a screenshot of the for structure, I could probably quickly tell you what's wrong

shobhitsharma commented 3 years ago

@martpie There are lot of details in there, can you give me a hint what could possibly be wrong apart from missing main field, because thats all there. There are no custom paths in tsconfig.json, but there are references to those monorepos. I'm using latest yarn v2.4.4

martpie commented 3 years ago

your workspaces are not correctly configured
you use babelrc instead of babel.config.js
you can use the debug flag to see what gets compiled or not
- if you don't see your package, then there is a problem with your package name
anything else in the FAQ

shobhitsharma commented 3 years ago

@martpie

yarn workspace: See this:

Everything has babel.config.js, never used .babelrc
Prints this while debug

next-transpile-modules - the following paths will get transpiled:
  - /path/to/project/node_modules/@project/ui-library

Checking FAQ and verifying other possibilities.

sjhsjh721 commented 3 years ago

Hi, I have some similar problem.

I use scoped packages like import Button from "@my/module/Button"

And I set tsconfig file like "@my/module/*": ["../my/module/src/*"]

I am using next.config.js like const withTM = require('next-transpile-modules')(['@my/module'])

When I use "@my/module"(without using subDirectory), it works well. But, my case makes error. Module parse failed: The keyword 'interface' is reserved (7:0)

How can I use my modules's sub-directory?

samuelcastro commented 3 years ago

I'm just facing a similar issue:

Usage

const withTM = require("next-transpile-modules")(["@elements/ui"]);

Results

Error: next-transpile-modules - an unexpected error happened when trying to resolve "@elements/ui"
Error: Can't resolve '@elements/ui' in '/Users/samuelcastro/Projects/my-project'
    at getPackageRootDirectory (/Users/samuelcastro/Projects/my-project/node_modules/next-transpile-modules/src/next-transpile-modules.js:70:11)
    at Array.map (<anonymous>)
    at generateModulesPaths (/Users/samuelcastro/Projects/my-project/node_modules/next-transpile-modules/src/next-transpile-modules.js:81:33)
    at withTM (/Users/samuelcastro/Projects/my-project/node_modules/next-transpile-modules/src/next-transpile-modules.js:110:26)
    at /Users/samuelcastro/Projects/my-project/node_modules/next-compose-plugins/lib/compose.js:100:23
    at Array.forEach (<anonymous>)
    at composePlugins (/Users/samuelcastro/Projects/my-project/node_modules/next-compose-plugins/lib/compose.js:77:11)
    at /Users/samuelcastro/Projects/my-project/node_modules/next-compose-plugins/lib/index.js:22:38
    at normalizeConfig (/Users/samuelcastro/Projects/my-project/node_modules/next/dist/next-server/server/config.js:7:494)
    at loadConfig (/Users/samuelcastro/Projects/my-project/node_modules/next/dist/next-server/server/config.js:8:131)

Context

elements/ui is an internal node_modules library currently installed through yarn directly from github.

ie:

"@elements/ui": "link-to-github-repo",

martpie commented 3 years ago

@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

samuelcastro commented 3 years ago

@martpie In fact I don't. Thanks for pointing that up. I'll give it a shot.

samuelcastro commented 3 years ago

Ok, I fixed the problem as described here: https://github.com/martpie/next-transpile-modules/releases/tag/6.0.0

Thanks @martpie

martpie commented 3 years ago

A lot of comments on this went a bit out of topic, if I go back to the first comment, and especially the yarn workspace @app/web dev command.

Does it work when you execute yarn dec from the web folder itself? If yes, I know where the problem is coming from, and it's not gonna be easy to fix. poke @aswbot

chenrui333 commented 3 years ago

In my case, I am using nextjs10 and the docker build goes fine in my local, but failed on CI (github action). Not quite sure why.

martpie commented 3 years ago

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)

chenrui333 commented 3 years ago

@martpie I did give the try yesterday, it did not quite work either.

This is my dockerfile snippet

FROM node:14 as build

WORKDIR /app

COPY ./yarn.lock ./
COPY ./package.json ./
COPY ./tsconfig.settings.json ./

ENV NOYARNPOSTINSTALL=1

COPY ./packages ./packages

# install root dependencies
RUN yarn install

RUN yarn workspace @meetup/web install
RUN cd packages/web && yarn build

I still have the same issue with this step RUN cd packages/web && yarn build, previously, it was RUN yarn workspace @meetup/web build

martpie commented 3 years ago

Can you enable the debug flag and paste the output here?

Sidenote: your Dockerfile has some issues (or it's not complete):

use --frozen-lockfile to install dependencies
if you install the root deps, why install the workspace deps?
you don't prune your deps for production (you will have image size issues)

chenrui333 commented 3 years ago

Appreciate the side note, yeah, I do see the image size issue, and I can include these ideas into it.

alchemistgo87 commented 3 years ago

@martpie for me directly running yarn dev from next.js application is also not working.

martpie commented 3 years ago

Please include a repro + a debug log (see README). Your setup information would help as well (see them there: https://github.com/martpie/next-transpile-modules/blob/master/.github/ISSUE_TEMPLATE/bug_report.md)

We have a yarn workspace integration test that is working fine. If you can submit a PR with failing tests (or just help spot what is wrong with the integration test), that would greatly help as well. Otherwise I'm blind.

https://github.com/martpie/next-transpile-modules/tree/master/src/__tests__

alchemistgo87 commented 3 years ago

@martpie Sorry for that..

"next": "10.0.2", "next-transpile-modules": "^6.3.0"

node v12.18.3 yarn 1.22.10 OS: MacOS Big Sur 11.2.1

My next.config.js:

const withTM = require('next-transpile-modules')(
  ['components', 'expo-next-react-navigation'],
  {
    resolveSymlinks: true,
  },
)

module.exports = withTM({
  webpack(config) {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      'react-native$': 'react-native-web',
    }
    config.resolve.extensions = [
      '.web.js',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ]
    return config
  },
})

Error Log:

Error: next-transpile-modules - an unexpected error happened when trying to resolve "components"
Error: Can't resolve 'components' in '../web-nextjs'
    at getPackageRootDirectory (/Users/danceninspire/Documents/Codes/Web/Fullstack/react-native-web-monorepo/node_modules/next-transpile-modules/src/next-transpile-modules.js:87:11)
at Array.map (<anonymous>)
    at generateModulesPaths (../node_modules/next-transpile-modules/src/next-transpile-modules.js:99:33)
    at withTM (../node_modules/next-transpile-modules/src/next-transpile-modules.js:152:26)
    at Object.<anonymous> (../next.config.js:10:18)

My File Structure:

Screenshot 2021-02-12 at 7 14 33 PM

belgattitude commented 3 years ago

You have the "workspaces" properly configured in root package.json ? Just wondering.

What's in components folder (in the package.json, the name is components ?)

alchemistgo87 commented 3 years ago

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 commented 3 years ago

@alchemistgo87

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

alchemistgo87 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

⚠️ 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.

lavaxun commented 3 years ago

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

lavaxun commented 3 years ago

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 issue wasn't related to next-transpile. Apparently, it was caused by the @types issue.

martpie / next-transpile-modules

"yarn workspace" commands don't work #101

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

Usage

Results

Context

To anyone facing this issue

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