After upgrading nest to v8, I'm having problem making nestjs-i18n work.
Here's the Error I'm getting
Nest can't resolve dependencies of the I18nLanguageInterceptor (I18nOptions, I18nResolvers, I18nService, ?). Please make sure that the argument ModuleRef at index [3] is available in the I18nModule context.
Potential solutions:
If ModuleRef is a provider, is it part of the current I18nModule?
If ModuleRef is exported from a separate #Module, is that module imported within I18nModule?
#Module({
imports: [ /* the Module containing ModuleRef */ ]
})
- {"stack":["Error: Nest can't resolve dependencies of the I18nLanguageInterceptor (I18nOptions, I18nResolvers, I18nService, ?).
Please make sure that the argument ModuleRef at index [3] is available in the I18nModule context.
Potential solutions:
- If ModuleRef is a provider, is it part of the current I18nModule?
- If ModuleRef is exported from a separate #Module, is that module imported within I18nModule?
#Module({ imports: [ /* the Module containing ModuleRef */ ] })
Versions:
"#nestjs/common": "^8.2.0",
"#nestjs/core": "^8.2.0",
"nestjs-i18n": "8.2.2",
"rxjs": "^7.4.0",
Thank you for your help
Hi
Your module I18nLanguageInterceptor has to resolve al the dependencies that have in the constructor.
In this case you are having problems with the last (I18nOptions, I18nResolvers, I18nService, ?).
Where are you injecting I18nLanguageInterceptor module?, can you show me your app.module or whatever are you building with this I18nLanguageInterceptor module.
Here to help!
basically, this happens when you have several values of ModuleRef class object, making Nest looking up for the wrong one, which makes x instanceOf ModuleRef (that's done internally, roughly) returning false
This is probably because you have two #nestjs/core nodejs modules in your project.
You can find this out by doing
ls -l node_modules/nestjs-i18n/#nestjs
## will display `core` (which is not expected)
ls -l node_modules/#nestjs
## will display `core` (which is expected)
(assuming a non-monorepo project)
Related
In NestJs and Vendure application, if I add plugins to vendure-config, If I add any plugins, it's giving error. I tried to add ElasticSearch Plugin as mentioned here in the official documentation.
I'm getting following error when I run the project:
Nest can't resolve dependencies of the ConfigModule (ConfigService, ?). Please make sure that the argument ModuleRef at index [1] is available in the ConfigModule context.
Potential solutions:
- If ModuleRef is a provider, is it part of the current ConfigModule?
- If ModuleRef is exported from a separate #Module, is that module imported within ConfigModule?
#Module({
imports: [ /* the Module containing ModuleRef */ ]
})
Error: Nest can't resolve dependencies of the ConfigModule (ConfigService, ?). Please make sure that the argument ModuleRef at index [1] is available in the ConfigModule context.
I tried to add ElasticsearchPlugin to imports: [ElasticsearchPlugin] in ConfigModule. But still I'm getting the same issue.
Could anyone please help me on this?
Thanks in Advance.
This is what I tried to resolve:
I followed this to integrate the plugin.
Then, after getting the issue, I tried to add imports: [ElasticsearchPlugin] in ConfigModule and AppModule.
Then, the error is still same, So, I tried to add the ElasticsearchPlugin to imports, exports and providers array. Still the same issue.
Summary of problem
I'm exclusively using ESM in my Node.js project and trying to find a way to dynamically import JSX.
I'm making a custom static site generator for my website and want to render React components to markup with renderToStaticMarkup(), but to achieve this, I first need to successfully import the components to then run this method.
Does anyone know a way to dynamically import JSX in ESM Node.js?
I.e., to make await import("./jsxComponent.js") work?
A few things I've tried
Approach 1: Direct attempt
When I dynamically import the .js file containing the component, I receive the error message: SyntaxError: Unexpected token '<'. Seems import() cannot parse JSX out of the box.
If I change the file extension of the .js file to .jsx, I unsurprisingly receive the error message Unknown file extension ".jsx".
Approach 2: Babeling
Back in the CommonJS heyday of Node.js, I'd use #babel/register, #babel/preset-env, and #babel/preset-react in a separate file with its last line invoking require() on another .js file that, inside itself, would then require() the component. I'm not entirely clued up on how each Babel preset or plugin works, but this did the trick back then allowing me to require() components to then render them to markup. Unfortunately, this doesn't work when using ESM-only packages in an ESM-only project because the moment I use #babel/register my ESM-only packages complain and break.
I've tried using #babel/core to transform the file before it's invoked inside import(). I've done this by using the transformFileSync method, but this created the error message: Error [ERR_MODULE_NOT_FOUND]: Cannot find package '"use strict". Inside the options object of transformFileSync I used babel-plugin-dynamic-import-node as a plugin and #babel/register, #babel/preset-env, and #babel/preset-react as presets.
I've tried also using #babel/core's transformSync method by passing in the JSX code directly (rather than just the file path of the JSX-containing file), and this created the error message: Error: ENOENT: no such file or directory, open 'import Header from "./src/components/header.js"; (note: there IS a file at ./src/components/header.js - it is one of the components being imported inside another component.)
Approach 3: Require
Other approaches online recommend using require() instead of import(), but as I said, this is an ESM-only project using ESM-only packages and so the error message I receive when trying this is require is not defined, as one would expect.
Code examples
Approach 1: Direct attempt
const module = await import("./jsxComponent.js")
Approach 2: Babeling
const module = await import(
babelCore.transformFileSync("./jsxComponent.js", {
presets: [
"#babel/preset-env",
[
"#babel/preset-react",
{
runtime: "automatic",
},
],
],
plugins: ["dynamic-import-node"],
}).code
);
(Let me know if you want me to post any more code examples from my tests with Babel).
Approach 3: Require
const module = require("./jsxComponent.js")
I was able to import JSX in my ESM-only project by:
Installing #node-loader/babel (see GitHub repo)
Installing #babel/core and #babel/preset-react
Creating babel.config.js in my root directory with the following setup:
export default {
presets: [
[
"#babel/preset-react",
{
runtime: "automatic",
},
],
],
};
Then running my node build script with the node loader set as an experimental loader: node --experimental-loader #node-loader/babel ./lib/build.js
I was then able to successfully use const component = await import("./jsxComponent.js") in my node build scripts and pass the component to reactDOMServer's renderToStaticMarkup(component()) method by invoking it as a function.
I'm getting an error from one of my (previously working) tests when I run yarn jest:
Cannot find module 'got' from 'src/rss/queries.ts'
I've added got in package.json:
"devDependencies": {
"got": "^12.0.0",
}
My jest.config.js:
module.exports = {
preset: 'ts-jest',
testMatch: ['**/*.test.ts(|x)'],
collectCoverageFrom: ['**/*.ts', '!.webpack/**/*'],
verbose: true,
}
I'm using got in ./src/rss/queries.ts:
import * as got from 'got'
I've also tried:
import { got, RequestError } from 'got'
In both cases the application works - I can see got making requests via the application logs (and vscode is indicating the correct path to the module in node_modules when I hover over the above). So it's definitely there, and working.
But jest can't find it. Why? It's not an uncommon stackoverflow question, but they all seem to relate to importing custom local modules via relative paths, etc. I'm just trying to use one out of node_modules...
Version 12 of got doesn't work with jest. Best to use version 11 for now. See the details in the release notes at: https://github.com/sindresorhus/got/releases/tag/v12.0.0
Wasn't able to find a reason for, or solution to, this. Ended up swapping got for axios, which is a shame as I liked many got features.
I'm trying to require the bootstrap-webpack module in my webpacked application.
It appears to need jQuery, since the bundled javascript then throws the following:
Uncaught ReferenceError: jQuery is not defined
How do I go about specifying to webpack that jQuery is a dependency for the bootstrap-webpack module, to fix this issue? It feels like it should be trivial, but I've been struggling to figure it out.
I've tried adding:
"jquery": "latest"
to the dependecies in the bootstrap-webpack's package.json, but this didn't work. The documentation is incomplete, and I can't seem to find much about this issue. It should be trivial, right? Help!
There are two possible solutions:
Use the ProvidePlugin: It scans the source code for the given identifier and replaces it with a reference to the given module, just like it has been required.
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
Use the imports-loader: It provides the possibility to prepend preparations like require() statements.
// webpack.config.js
{
...
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "imports?jQuery=jquery" }
]
}
}
In that case you need to run npm install imports-loader --save before.
Via this github issue.
Install expose-loader and add require('expose?$!expose?jQuery!jquery'); to your main entry point just before you require webpack-bootstrap.
This will set jQuery on the window so any file can get at it. Be careful with this method all files will then have access to that version of jQuery regardless of whether it was explicitly required.
I have code like the following
define("ModuleA", ["InitialDependency"], function (initDep){
return {};
});
define("ModuleB", ["ModuleA", "OtherDependency"], function (moduleA, otherDep){
return {};
});
Each of these modules is defined in separate files "ModuleA.js", "Moduleb.js", "InitialDependency.js" and "OtherDependency.js".
These modules are loaded sequentially in my application. ModuleB is always loaded after ModuleA. this means that in the optimization stage I do not want ModuleA's script combined in the built script for ModuleB. I want the following
ModuleA.built.js includes
InitialDependency
ModuleA
ModuleB.built.js includes
OtherDependency
ModuleB
I don't want them all in the same file however as ModuleB may never be loaded.
I can do a build script for both modules but this will be time consuming as I have quite a few modules in my project and would like a build script that will build the lot of them at once.
What do I need to know to create a build script for building both of these modules (and more that follow the same dependency pattern)?
To achieve this, you'd have to play with the modules configuration option.
It could look like this:
{
modules: [
{
name: "ModuleA",
include: [],
exclude: []
},
{
name: "ModuleB",
exclude: [
"moduleA"
]
}
]
}
There's a similar example setup by James here: https://github.com/requirejs/example-multipage
Of course, by building these modules separately, you may end up needing to update paths. If so, the best way then would be to create a file containing a require.config call with special setting for your builded app and including this configuration instead of your usual one. But if you set dependencies in a good separated way, then you'll probably be fine. By "good separated" way, I mean that if moduleA is the base script, then it shouldn't have dependencies packed with moduleB - but I guess this is common sense!
Note about shimmed modules: As shimmed config only work whe files are loaded and by r.js to order plugins, be sure you don't include a shim module without it's dependency if you're not 100% sure these will be loaded before. More info here: https://github.com/requirejs/example-multipage-shim
Hope this help!