Experimental TypeScript compiling outside of app directory feedback thread #26420
Replies: 23 comments 30 replies
-
I like this! Usage example in my case, running multiple next typescript projects with a shared components folder:
And then run |
Beta Was this translation helpful? Give feedback.
-
This is super useful feature, we are building js resolvers that communicate with API routes importing them from npm linked package, without this feature it was not working. Please add it in next releases as out of the box one |
Beta Was this translation helpful? Give feedback.
-
@timneutkens Thanks for the great work. I've tested it today on an example monorepo belgattitude/nextjs-monorepo-example#265 Apart from a log regarding babel configuration, all worked fine I've also benchmarked builds and compared with the implementation I used before (#13542) With experimental/externalDirs**FIRST BUILD: 22 seconds **: With previous implementation (webpack)Example of next.config.js overridesconst nextConfig = {
webpack: function (config, { defaultLoaders }) {
// This extra config allows to use paths defined in tsconfig
// @link https://github.com/vercel/next.js/pull/13542
const resolvedBaseUrl = path.resolve(config.context, '../../');
config.module.rules = [
...config.module.rules,
{
test: /\.(tsx|ts|js|jsx|json)$/,
include: [resolvedBaseUrl],
use: defaultLoaders.babel,
exclude: (excludePath) => {
return /node_modules/.test(excludePath);
},
},
];
return config;
},
}; **FIRST BUILD: 22 seconds **: |
Beta Was this translation helpful? Give feedback.
-
I just used this flag at nextauthjs/next-auth#2631. I have an |
Beta Was this translation helpful? Give feedback.
-
Works very well in our lerna workspace, before this i had to include locations in tsconfig which made our imports really weird. Now i can just use the symlink feature by importing from shared components package. ps i accidentally saw this experimental feature, i guess more people will now have our silly hacks to make it work :) |
Beta Was this translation helpful? Give feedback.
-
And how do you handle absolute imports in the shared components package? Everything I see related to this, always use relative imports // shared/components/src/index.ts
import Foo from './components/foo'; => import Foo from 'src/components/foo'; And when imported in (for example) project1, when transpiled returns
|
Beta Was this translation helpful? Give feedback.
-
This feature saved me! 🚀 I have a monorepo setup like so:
When using styled-components in the nextjs-app I first faced classnames mismatches, but solved by using Babel Macros (https://styled-components.com/docs/tooling#babel-macro). |
Beta Was this translation helpful? Give feedback.
-
Thanks for this feature! Exactly what I needed today 🙏 |
Beta Was this translation helpful? Give feedback.
-
Hey, awesome work!!! Playing around with this and other new features, I may have found a little issue: I believe
|
Beta Was this translation helpful? Give feedback.
-
I am curious as to why this feature doesn't allow the loading of We're migrating our web apps to Next.js within a Monorepo setup, and the only way to load the SCSS files under our Seems quite strange that Next.js doesn't offer first-class support for CSS/SCSS modules from external packages? |
Beta Was this translation helpful? Give feedback.
-
Thanks for the feature, it worked fine for our use case. Previously we used Now it's working fine. Is there an ETA for when this feature will not be experimental anymore? (that is, when it will be production ready) |
Beta Was this translation helpful? Give feedback.
-
I was looking for this probably. 👏 I decided to have an external private package with some business logic so I can share that between our Next.js apps and have a nice abstraction without having a mono repo. I did not find the reason why I should compile Typescript for the package release until I got an error message about unsupported loaders by Next.js. Thanks for this experimental way. |
Beta Was this translation helpful? Give feedback.
-
Files outside the nextjs directory, get module not found error if they use a module that's installed only in the subdirectories: /time.js - does Here is error: |
Beta Was this translation helpful? Give feedback.
-
This solves my error of being unable to use external directories in having a common directory in the parent directory with API calls, redux setup etc. My only issue is that I am unable to use absolute imports, This works This doesnt work My tsconfig includes: |
Beta Was this translation helpful? Give feedback.
-
Dynamic imports aren't working for me... is this supported? I need access to
|
Beta Was this translation helpful? Give feedback.
-
Awesome feature 🚀 If I was to give a suggestion, it would be to document it thoroughly, with a couple of use cases, as the feature will be used in nontrivial setups. |
Beta Was this translation helpful? Give feedback.
-
My problemI get a "module not found" error in my nextjs project when running dev. I get this error when I use a path alias defined in a tsconfig inside a package. Relative imports do work. It's like the loader doesn't see my compilerOptions.path setting inside the package-scoped tsconfig. I'm using pnpm workspaces. But I'm pretty sure the same error would occur when using yarn. Am I doing something wrong or is using a path alias inside a workspace package simply not supported? (I also saw that 1mzino: #26420 (comment) has the same problem as me and it isn't solved so I'm posting my issue here.) Thanks in advance. The error
You can see the full console log in this screenshot. Expected BehaviorI should be able to use a tsconfig path alias inside a pnpm workspace package, defined by a tsconfig inside that package. To ReproduceWhat I'm doingI'm importing a typeorm DataSource instance in My project structure
Every package has a My config files
|
Beta Was this translation helpful? Give feedback.
-
I have an issue with using CSS files from node_modules. When importing a component from an external directory that is importing a CSS file from node_modules, it fails to compile. E.G. import React from "react";
import AComponent from "../../../out-of-project/a-component";
const Page = () => <AComponent>Some stuff</AComponent>;
export default Page; and have a-component.jsx as import React from "react";
import "a-node-module/styles.css";
export const AComponent = ({ children }) => <div className="class-from-styles">{children}</div>; |
Beta Was this translation helpful? Give feedback.
-
The experimental feature for I’ve created a minimal reproduction for using this feature: https://github.com/wyattjoh/nextjs-extern-directory-example You’ll notice from the |
Beta Was this translation helpful? Give feedback.
-
Hi, what's the expected behaviour for "process.env"? I plan to use this feature to be able to quickly share a small database SDK between a Next app, scripts, and long running APIs. It's currently tied to the Next app so relying heavily on "process.env". |
Beta Was this translation helpful? Give feedback.
-
With |
Beta Was this translation helpful? Give feedback.
-
Is |
Beta Was this translation helpful? Give feedback.
-
Is it possible the behaviour of this feature has changed recently? I am using it to share icons from another package inside a monorepo, which includes re-exports like:
with 14.2, this no longer works and only this does:
|
Beta Was this translation helpful? Give feedback.
-
Feedback thread for #22867. If you try out the experimental feature please provide feedback here.
Beta Was this translation helpful? Give feedback.
All reactions