What arguments of TypeOrmModule.forFeature() in TS should be? - module

I am trying to add repositories to my TypeOrmModule.forFeature(), which from what I understood, defines which repositories have been created.
Following the documentation, I saw that we could simply add the entity name, like :
imports: [TypeOrmModule.forFeature([User])],
In another tutorial, I saw someone putting direcly the repository name into forFeature, such as follow :
imports: [TypeOrmModule.forFeature([UserRepository])],
In my current code, I am declaring few entities and repositories. Repositories are created using DataSource, for example :
export const WheelRepository = (src: DataSource) => src.getRepository(Wheel);
However, the only way I could make my code works is this way, which is a mix of two solutions above - while all my entities declarations are strictly similar as the one mentionned above :
(here is a car.module.ts)
#Module({
imports: [TypeOrmModule.forFeature([Car, Wheel, OptionRepository])], /* define repositories */
controllers: [CarController, WheelController, OptionController],
providers: [CarService, WheelService, OptionService],
})
export class CarModule {}
... so by explicitely naming "Repository" for my entity.
While this does not work :
#Module({
imports: [TypeOrmModule.forFeature([Car, Wheel, Option])], /* define repositories */
controllers: [CarController, WheelController, OptionController],
providers: [CarService, WheelService, OptionService],
})
export class CarModule {}
Complete output :
[Nest] 18832 - 2022-06-22 16:34:13 ERROR [ExceptionHandler] Nest can't resolve dependencies of the OptionService (?). Please make sure that the argument OptionRepositoryRepository at index [0] is available in the CarModule context.
Potential solutions:
- If OptionRepositoryRepository is a provider, is it part of the current CarModule?
- If OptionRepositoryRepository is exported from a separate #Module, is that module imported within CarModule?
#Module({
imports: [ /* the Module containing OptionRepositoryRepository */ ]
})
Error: Nest can't resolve dependencies of the OptionService (?). Please make sure that the argument OptionRepositoryRepository at index [0] is available in the CarModule context.
Potential solutions:
- If OptionRepositoryRepository is a provider, is it part of the current CarModule?
- If OptionRepositoryRepository is exported from a separate #Module, is that module imported within CarModule?
#Module({
imports: [ /* the Module containing OptionRepositoryRepository */ ]
})
at Injector.lookupComponentInParentModules (/Users/me/Documents/project_test/node_modules/#nestjs/core/injector/injector.js:231:19)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:757:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project_test#0.0.1 start: `nest start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project_test#0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
I have the same error when I try to change "Wheel" by "WheelRepository" in my list of imports.
I can not understand in which case I should be able to use one or another method, and why in this case I have to mix both.
[ EDIT ]
I found why by comparing files : in my OptionService constructor, I was injecting #InjectRepository(OptionRepository) instead of #InjectRepository(Option).
I am still curious of knowing why this error happens because I do not understand the link between car module, which is like "above", and the injection in the service.

From what I understand from https://docs.nestjs.com/recipes/sql-typeorm and the source of #nestjs/typeorm
TypeOrmModule.forFeature([...Entities]) imports TypeormModule providers coming from TypeormModule.forRoot() and make it available inside service using its provider token string.
import { DataSource } from 'typeorm';
import { Photo } from './photo.entity';
export const photoProviders = [
{
provide: 'PHOTO_REPOSITORY', // provider token string
useFactory: (dataSource: DataSource) => dataSource.getRepository(Photo),
inject: ['DATA_SOURCE'],
},
];
and #InjectRepository(Photo) gives the provider token string and use it like any injectable provider.
export class PhotoService {
constructor(
#Inject('PHOTO_REPOSITORY') //#InjectRepository(Photo)
private photoRepository: Repository<Photo>,
) {}
}
when you put #InjectRepository(OptionRepository) in the constructor. #nestjs/typeorm couldn't resolve its provider token string because OptionRepository wasn't the thing you give to
imports: [TypeOrmModule.forFeature([Car, Wheel, Option])]

Related

How to add a loader in a Vue/Webpack app to support non JS files used in a dependency of a node module

I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info

Error when adding highchartsjs to Vue3 app

I am using Vue 3 and added highchartsjs according to the docs. I am getting this error:
✘ [ERROR] Could not resolve "highcharts"
node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90:
1 │ ...?module.exports=e(require("highcharts"),require("vue")):"functio...
╵ ~~~~~~~~~~~~
You can mark the path "highcharts" as external to exclude it from the bundle,
which will remove this error. You can also surround this "require" call with a
try/catch block to handle this failure at run-time instead of bundle-time.
I tried excluding it from bundle as suggested but it's not working:
vite.config.js
export default defineConfig({
...
build: {
rollupOptions: {
external: ['highcharts'],
}
},
})
This works:
export default defineConfig({
...
optimizeDeps: {
exclude: ['highcharts'],
}
})
Excluding highcharts via optimizeDeps.exclude would clear the error, but that would defeat your ultimate goal of using highcharts in your project. You'll notice that after using that config, your project still is not able to import highcharts. The error is indicating that your project is missing that dependency.
The solution would be to install highcharts:
npm install -S highcharts
demo

react native yalc nested gives : jest-haste-map: Haste module naming collision error

Let's see the error first:
jest-haste-map: Haste module naming collision: #stevemoretz/yoohoo
The following files share their name; please adjust your hasteImpl:
* <rootDir>/.yalc/#stevemoretz/yoohoo-ratchet-expo/.yalc/package-name2/package.json
* <rootDir>/.yalc/package-name1/package.json
Failed to construct transformer: DuplicateError: Duplicated files or mocks. Please check the console for more info
at setModule (/Volumes/HDD/ReactNative/upgrade/store/node_modules/jest-haste-map/build/index.js:543:17)
at workerReply (/Volumes/HDD/ReactNative/upgrade/store/node_modules/jest-haste-map/build/index.js:614:9)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Promise.all (index 27)
at /Volumes/HDD/ReactNative/upgrade/store/node_modules/jest-haste-map/build/index.js:426:22 {
mockPath1: '.yalc/package-name1/.yalc/#stevemoretz/yoohoo/package.json',
mockPath2: '.yalc/package-name2/package.json'
}
What's happening? I'm using a nested yalc package in another yalc package, so I get this error, how do I solve that?
Getting rid of .yalc folder, fixes this but we can't do that because yalc won't work well 🙂.
But we can exclude it from the metro bundler that fixes it, how?
https://stackoverflow.com/a/41963217/10268067
so in our case it becomes:
const exclusionList = require("metro-config/src/defaults/exclusionList");
// exclusionList is a function that takes an array of regexes and combines
// them with the default exclusions to return a single regex.
module.exports = {
resolver: {
blacklistRE: exclusionList([/.yalc\/.*/]),
},
};

How to create a library with dynamic imports which can be imported by Nuxt?

I am trying to reuse Nuxt.js components from one project in another project. So I created a new project which imports the components needed and then exports them as a npm package.
npm package (main.js)
import SomeComponent from '../foobar/SomeComponent.vue'
export default {
install (Vue) {
Vue.component(SomeComponent)
}
}
export {
SomeComponent
}
npm package (webpack.config.js)
module.exports = {
entry: path.resolve(__dirname + '/src/main.js'),
output: {
path: path.resolve(__dirname + '/dist/'),
chunkFilename: '[name].build.js',
filename: 'build.js',
libraryTarget: 'umd',
libraryExport: 'default',
library: 'MyLibrary',
umdNamedDefine: true
}
}
Then in my new Nuxt.js project I can simply import the npm package and the components will be installed automatically. While this works fine when not using any code splitting it will throw an error when trying to use dynamic imports in the SomeComponent.vue file.
When adding dynamic imports in my component like so import(/* webpackChunkName: "mapbox" */ 'mapbox-gl') the chunks will be created but when running Nuxt in development mode I always get the error:
Uncaught (in promise) ChunkLoadError: Loading chunk 1 failed.
Nuxt does not find the created chunk files. I tried playing around with publicPath but I don't get what path would be the right one for Nuxt to be able to access them?

Package vue components that use class syntax

I have a hard time packaging our components as an npm package so we can reuse them in other projects.
I have the feeling I searched everywhere on the internet to no avail. I'm suspecting that using our components in the class syntax style makes most, if not even all, examples fail for me.
The final and most successful so far was the one from the Vue documentation
However with that one I get an error:
[!] (buble plugin) SyntaxError: Unexpected character '#'
The reason for that is obviously the class syntax with #Component immediately failing the build. Is there a way to make this work with class syntax?
My component's script part looks like this (nothing special on the css and template parts):
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
#Component
export default class Checkbox extends Vue {
#Prop({default: false}) checked;
};
</script>
I think that the problem is with installing vue-loader and vue-template-compiler together.
I'm Quoting Vue-loader Vue Docs
The plugin is required! It is responsible for cloning any other rules
you have defined and applying them to the corresponding language
blocks in .vue files. For example, if you have a rule matching
/\.js$/, it will be applied to <script> blocks in .vue files.
After you npm install them, you need to change your webpack.config.js file like this
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... other rules
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]
}