SoftwareBrothers
@adminjs/relations rendering error: Error: Component "RelationsShowPropertyComponent" has not been bundled
Discussed in https://github.com/SoftwareBrothers/adminjs/discussions/1648
Originally posted by Dr4CuK30 April 2, 2024 Hello guys,
I wrote a implementation of relations (one to many and many to many) using the @adminjs/relations but is generating the following error in the visual generated resources that have this relations:
This is the browser console output:
And this is my resources:
const createStreamingResource = () => ({ resource: Streaming, options: { navigation: { icon: 'Users' }, }, features: [ owningRelationSettingsFeature({ componentLoader, licenseKey: process.env.LICENSE_KEY, relations: { members: { type: RelationType.ManyToMany, junction: { joinKey: 'streamingId', inverseJoinKey: 'collaboratorId', throughResourceId: 'StreamingCollaborator', }, target: { resourceId: 'Collaborator', }, }, }, }), ], });
And my packege.json:
I was facing the same issue and suspected the regression was introduced here
I downgraded to the version before the update and it worked again.
But then I realized that the bundling approach was not really "production-like", so I chose to add @adminjs/bundler and add an assets bundling step to my CI. Now everything works on the most recent version.
I am getting the same issue and I am not able to reproduce @tillkolter's fix. Do I need to code a custom component? Or should it be available when calling new ComponentLoader()?
features: [
owningRelationSettingsFeature({
componentLoader: new ComponentLoader(),
licenseKey: process.env.ADMINJS_LICENCE_KEY,
relations: {
server: {
type: RelationType.OneToMany,
target: {
joinKey: 'serverId',
resourceId: 'WhitelistedEmoji',
},
}
}
})
]
componentLoader: new ComponentLoader(),
This is wrong. ComponentLoader should be a singleton created in a separate file and imported wherever it's needed.
In your case, it should be imported into owningRelationSettingsFeature to make sure the feature adds it's components to the bundle AND you must also import it to your AdminJS constructor to make sure the admin panel actually loads it.
Ohh you're right, I get it now. This does not work but I get the idea, how can I correct?
import { componentLoader } from './component-loader.js';
const admin = new AdminJS({
branding: {
companyName: 'Discord Bot'
},
componentLoader: componentLoader,
resources: entities.map((entity) => ({
resource: entity,
options: getOptions(entity),
features: [
owningRelationSettingsFeature({
componentLoader: componentLoader,
licenseKey: process.env.ADMINJS_LICENCE_KEY,
relations: {
server: {
type: RelationType.OneToMany,
target: {
joinKey: 'serverId',
resourceId: 'WhitelistedEmoji',
},
}
}
})
]
}))
});
import { ComponentLoader } from 'adminjs'
const componentLoader = new ComponentLoader()
export { componentLoader }
This seems to be correct. If your server doesn't bundle custom components for some reason, you can try adding this after you create AdminJS instance:
if (process.env.NODE_ENV === 'production') {
await admin.initialize(); // bundle components.bundle.js only once on start-up
} else {
admin.watch(); // tell rollup to watch for file changes in dev environment
}
When you start the application, there should be a log saying that files are being bundled
Thank you for your answer I get
/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:225
Error.captureStackTrace(error);
^
Error: Cannot find package '@babel/plugin-syntax-import-assertions' imported from /home/poca/Documents/GitHub/restriction-discord-bot/babel-virtual-resolve-base.js
at __node_internal_ (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:225:9)
at new NodeError (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:195:5)
at packageResolve (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:899:9)
at moduleResolve (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:939:18)
at defaultResolve (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:1017:15)
at resolve (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:1030:12)
at tryImportMetaResolve (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:142:45)
at resolveStandardizedNameForImport (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:164:19)
at resolveStandardizedName (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:173:22)
at loadPlugin (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:52:20)
at loadPlugin.next (<anonymous>)
at createDescriptor (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:140:16)
at createDescriptor.next (<anonymous>)
at step (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:261:32)
at evaluateAsync (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:291:5)
at /home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:44:11
at Array.forEach (<anonymous>)
at Function.async (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:43:15)
at Function.all (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:216:13)
at Generator.next (<anonymous>)
at createDescriptors (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:102:41)
at createDescriptors.next (<anonymous>)
at createPluginDescriptors (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:99:17)
at createPluginDescriptors.next (<anonymous>)
at /home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:65:32
at Generator.next (<anonymous>)
at Function.<anonymous> (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/gensync-utils/async.js:21:3)
at Generator.next (<anonymous>)
at step (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:269:25)
at evaluateAsync (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:291:5)
at Function.errback (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:113:7)
at errback (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/gensync-utils/async.js:65:18)
at async (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:188:17)
at onFirstPause (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:216:13)
at Generator.next (<anonymous>)
at cachedFunction (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/caching.js:52:46)
at cachedFunction.next (<anonymous>)
at mergeChainOpts (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/config-chain.js:349:34)
at mergeChainOpts.next (<anonymous>)
at chainWalker (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/config-chain.js:316:14)
at chainWalker.next (<anonymous>)
at buildRootChain (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/config-chain.js:56:36)
at buildRootChain.next (<anonymous>)
at loadPrivatePartialConfig (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/partial.js:72:62)
at loadPrivatePartialConfig.next (<anonymous>)
at loadPartialConfig (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/partial.js:115:25)
at loadPartialConfig.next (<anonymous>)
at step (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:269:25)
at evaluateAsync (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:291:5)
at /home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:93:9
at new Promise (<anonymous>)
at async (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/gensync/index.js:92:14)
at stopHiding - secret - don't use this - v1 (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
at loadPartialConfigAsync (/home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/index.js:34:85)
at transformCode (file:///home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@rollup/plugin-babel/dist/es/index.js:113:81)
at Object.transform (file:///home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@rollup/plugin-babel/dist/es/index.js:291:16)
at file:///home/poca/Documents/GitHub/restriction-discord-bot/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19892:40 {
code: 'PLUGIN_ERROR',
pluginCode: 'ERR_MODULE_NOT_FOUND',
plugin: 'commonjs--resolver',
hook: 'resolveId',
id: '/home/poca/Documents/GitHub/restriction-discord-bot/.adminjs/entry.js',
watchFiles: [
'/home/poca/Documents/GitHub/restriction-discord-bot/.adminjs/entry.js'
]
}
Node.js v20.12.1
you could try installing @babel/plugin-syntax-import-assertions manually, I don't use pnpm myself and it looks like it cannot find the package
Wow!! it works with admin.watch after installing the babel plugin. It does not with admin.initialize though. Thank you so much! I could not expect someone to answer that fast.
I have the same problem, admin.initialize() doesn't help, I even see no message about bundled files. Environment: Node, Express, Typeorm
base-property-component.js:77 Uncaught Error: Component "RelationsShowPropertyComponent" has not been bundled, ensure it was added to your ComponentLoader instance (the one included in AdminJS options). at base-property-component.js:77:13
How to add component to ComponentLoader instance?
await AppDataSource.initialize();
this.server = new AdminJS({
resources: [
{ resource: Unit,
options: {
parent: {
name: 'Units'
},
actions: {
findRelation: {
isAccessible: true,
},
},
},
features: [
owningRelationSettingsFeature({
componentLoader,
licenseKey: 'hidden',
relations: {
persons: {
type: RelationType.OneToMany,
target: {
joinKey: 'unitId',
resourceId: 'Person',
},
}
},
}),
],
},
{ resource: Person,
options: {
parent: {
name: 'Persons'
}
},
features: [targetRelationSettingsFeature()]
}
],
rootPath: '/admin',
})
await this.server.initialize()
@AntonOrnatskyi here is an example of a working project with this plugin. you might be happy to take some inspiration: https://github.com/androz2091-business/restriction-discord-bot/blob/main/src/database.ts
Thanks but result is still same. I use @admin/express, typeorm with sqlite.
I had the same issue on production where I use @adminjs/bundler and it didn't bundle relations components as the internal bundleRelationsComponents wasn't called. I added a call of empty owningRelationSettingsFeature in my components.ts and it started including relations components.
export const relationComponents = owningRelationSettingsFeature({
componentLoader,
licenseKey: RELATIONS_LICENSE_KEY,
relations: {}
});
