Closed aswbot closed 1 year ago
I am also experiencing this issue.
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
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;
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) :)
@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.
@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 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.
Thank you guys for the investigation, I will try to check what is going wrong exactly
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)
To anyone with this issue:
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:
@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.
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']
});
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:
I will try to investigate this issue this week guys. I may have time to land a hotfix before #132 lands
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.
@martpie still exists, manually adding ../path/to/package
is currently resolving it. Also using yarn workspaces.
With v6?
@martpie Yes, it doesn't recognise the subpackage, doing manual path mapping just solves it.
Have you followed all the FAQ steps and checked v5/v6 changes and setup indications?
@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.
Do you have a reproduction/some code I could look at?
@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
If you can paste the three package.json
, and a screenshot of the for structure, I could probably quickly tell you what's wrong
@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
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
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?
I'm just facing a similar issue:
const withTM = require("next-transpile-modules")(["@elements/ui"]);
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)
elements/ui
is an internal node_modules
library currently installed through yarn
directly from github.
ie:
"@elements/ui": "link-to-github-repo",
@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 In fact I don't. Thanks for pointing that up. I'll give it a shot.
Ok, I fixed the problem as described here: https://github.com/martpie/next-transpile-modules/releases/tag/6.0.0
Thanks @martpie
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
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.
-> 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)
@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
Can you enable the debug flag and paste the output here?
Sidenote: your Dockerfile has some issues (or it's not complete):
--frozen-lockfile
to install dependenciesAppreciate the side note, yeah, I do see the image size issue, and I can include these ideas into it.
@martpie for me directly running yarn dev from next.js application is also not working.
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__
@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:
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 ?)
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"
}
}
@alchemistgo87
Why did you enable resolveSymlinks: true,
? Your problem is most probably coming from there
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?
resolveSymlinks
, in 99.9% of the cases, you don't need itnext-transpile-modules
), so this is entirely possible there is a conflict between the three pluginsnext.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.
@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.
the problem is most probably coming from this line:
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.
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
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.
Hello.
Are you trying to transpile a local package or an npm package? Local package
Describe the bug
To Reproduce
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-transpile-modules
version: 4.0.2npm
/yarn
version: Yarn 1.22.4