Replies: 9 comments 24 replies
-
|
I'm currently struggling with the same thing with the new App Router structure. As far as I can see, there's no real entrypoint anymore, or at least it doesn't really show in the docs, as adding If in your case you're still using the Pages Router (meaning you have a You can read more about it in here. Still, would be really interested to know how to achieve this but with the new App Router. |
Beta Was this translation helpful? Give feedback.
-
|
@camezcua12 I ended up requiring |
Beta Was this translation helpful? Give feedback.
-
|
Interesting solution @matomesc, but surely that can't be it. That's more of a workaround or a "hack" than I would consider it a solution. There's something that should be able to be integrated within the codebase to enable reflect-metadata to work. |
Beta Was this translation helpful? Give feedback.
-
|
Since i ran into this exact same issue Bash # Put it into your env
export NODE_OPTIONS='--require reflect-metadata'PowerShell $env:NODE_OPTIONS="--require reflect-metadata" |
Beta Was this translation helpful? Give feedback.
-
|
Have you managed to make it work on Vercel? I was able to successfully make it work locally with that approach, but not in Vercel. |
Beta Was this translation helpful? Give feedback.
-
|
No it was just for toying around. I was using it to get type-graphql working, but that wont work on vercel sadly |
Beta Was this translation helpful? Give feedback.
-
|
This work for me, minimal changes. NODE_OPTIONS=--require reflect-metadata |
Beta Was this translation helpful? Give feedback.
-
|
I found that this issue can be solved by modifying the webpack config in next.config.js. // src/polyfills.ts
import 'reflect-metadata';/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
const originalEntry = config.entry;
config.entry = async () => {
const entries = await originalEntry();
if (
entries['main.js'] &&
!entries['main.js'].includes('./src/polyfills.ts')
) {
entries['main.js'].unshift('./src/polyfills.ts');
}
return entries;
};
return config;
},
};
module.exports = nextConfig; |
Beta Was this translation helpful? Give feedback.
-
|
Hey @ahonn, I've tried your approach with a new project (using create-next-app). I installed tsyringe, reflect-metadata, and created the polyfills file importing reflect-metadata. Finally, I adjusted the next.config.js as you suggested. I've created a Simple HelloWorld Service, which uses tsyringe and injects the service into the Page directly. Unfortunately, the problem still exists. Have you done anything besides what you've mentioned? |
Beta Was this translation helpful? Give feedback.
-
|
Also couldn't get above to work in a new Next.js project. |
Beta Was this translation helpful? Give feedback.
-
|
Please, use the solution that I found and let see if it works in your project. |
Beta Was this translation helpful? Give feedback.
-
|
Moved over to Remix, done with Next |
Beta Was this translation helpful? Give feedback.
-
@matomesc // next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
experimental: {
instrumentationHook: true
}
}// src/instrumentation.ts
// this is the entrypoint of client and server side
export async function register() {
// import the the sides that you wish
await import('./server-container')
await import('./client-container')
}
// src/client-container
'use client'
import 'reflect-metadata'
import { container } from 'tsyringe'
/*...*/
// src/server-container
import 'reflect-metadata'
import { container } from 'tsyringe'
/*...*/ |
Beta Was this translation helpful? Give feedback.
-
|
Next v13.4.19 |
Beta Was this translation helpful? Give feedback.
-
|
Here you can create variables in the global scope of the app. https://stackoverflow.com/questions/38906359/create-a-global-variable-in-typescript |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, that helped me to skip the build error. I had to do my internal fixes here but it was a light to guide me through this case. Thanks bro. |
Beta Was this translation helpful? Give feedback.
-
|
Then it's needed to do the same |
Beta Was this translation helpful? Give feedback.
-
|
@antoniogiroz depends... if you use DI in the client/server side, just import a container in its respective side. |
Beta Was this translation helpful? Give feedback.
-
|
This is how I solved it.
// app/layout.tsx
import 'reflect-metadata';
import ClientLayoutComponent from '@/app/ClientLayoutComponent';
export default function RootLayout({
children
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<ClientLayoutComponent />
{children}
</body>
</html>
);
}// app/ClientLayoutComponent.ts
'use client';
import 'reflect-metadata';
export default function ClientLayoutComponent(): null {
return null;
} |
Beta Was this translation helpful? Give feedback.
-
|
This does not work either. I am on Next v14.0.4 |
Beta Was this translation helpful? Give feedback.
-
|
This worked for me in Next13. On a new project using next14, it doesnt work |
Beta Was this translation helpful? Give feedback.
-
|
If you have a |
Beta Was this translation helpful? Give feedback.
-
|
Here's how I've solved it on //app/reflect-metadata-client-side.ts
'use client';
import 'reflect-metadata';//app/layout.tsx
import './reflect-metadata-client-side';
...//app/container.ts
import 'reflect-metadata';
import { Container } from 'inversify';
import myModule from '#/lib/myFeature/module';
const container = new Container();
container.load(... myModule);
export default container;Tested on
|
Beta Was this translation helpful? Give feedback.
-
|
This worked as well for me on v14.1.4. 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Worked for me also with tsyringe on v14.1.4 |
Beta Was this translation helpful? Give feedback.
-
|
I encountered a similar issue with Next.js version 14. After some experimentation, I found a workaround by modifying the tsconfig.json file. Here are the changes I made: By adding these lines to the compilerOptions section, the application was able to run successfully. This solution was tested with Next.js version 14.1.0 and Inversify version 6.0.2. |
Beta Was this translation helpful? Give feedback.
-
|
I have tried this and still getting the error on random client components. |
Beta Was this translation helpful? Give feedback.
-
So you mean you don't import it anywhere in your files? |
Beta Was this translation helpful? Give feedback.
-
|
This did not work for me either |
Beta Was this translation helpful? Give feedback.
-
|
Below is my complete tsconfig.json file and package.json file I hope it will help. If you guys still get error I'll share the boilerplate using Next.js1 4 and inversify. |
Beta Was this translation helpful? Give feedback.
-
|
I just got it working with #46805 (reply in thread) |
Beta Was this translation helpful? Give feedback.
-
|
Any updates on this? |
Beta Was this translation helpful? Give feedback.
-
Summary
I'm trying to use tsyringe for dependency injection for some services used in my api routes and I have no idea where I'm supposed to
import 'reflect-metadata'. It's supposed to go in the application entry point but as far as I can tell there is no entry point in nextjs. Any ideas?Additional information
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions