I am trying to write a Scully route plugin that fetches all outdated products from firestore in order to prerender their pages. Here is my Scully route plugin ts file:
import {registerPlugin, HandledRoute} from "@scullyio/scully"
import {ProductsService} from "cgeopapa-lib";
async function productIds(route: string | undefined, config = {}): Promise<HandledRoute[]> {
const routes: HandledRoute[] = [];
const products = await new ProductsService().fetchAllOutdated();
for (const p of products) {
routes.push({route: `/product/${p.id}`})
}
return Promise.resolve(routes);
}
const validator = async (conf: any) => [];
registerPlugin('router', 'products', productIds, validator);
The ProductsService() is from another library that I'm writing. Here is the products-serice.ts file:
export class ProductsService<P extends ProductModel> {
private readonly firestore: Firestore = inject(Firestore);
private readonly products: string = "products";
public async fetchAllOutdated() {
const col = collection(this.firestore, this.products).withConverter(productConverter<P>());
const q = query(col, where("lastUpdate", ">", new Date()));
const docs = await getDocs(q);
return docs.docs.map(doc => doc.data() as P);
}
}
Finally, when I try to execute npx scully I get this error:
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/cgeo/angular/node_modules/cgeopapa-lib/fesm2015/cgeopapa-lib.mjs not supported.
Instead change the require of /home/cgeo/angular/node_modules/cgeopapa-lib/fesm2015/cgeopapa-lib.mjs to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/home/cgeo/angular/scully/plugins/products.plugin.js:4:24)
at Object.<anonymous> (/home/cgeo/angular/scully.angular.config.js:4:1)
at /home/cgeo/angular/node_modules/@scullyio/scully/src/lib/utils/compileConfig.js:68:76
at async Object.compileConfig (/home/cgeo/angular/node_modules/@scullyio/scully/src/lib/utils/compileConfig.js:68:28)
at async loadIt (/home/cgeo/angular/node_modules/@scullyio/scully/src/lib/utils/config.js:31:28)
at async getConfig (/home/cgeo/angular/node_modules/@scullyio/scully/src/lib/utils/startup/scullyInit.js:139:24)
at async scullyInit (/home/cgeo/angular/node_modules/@scullyio/scully/src/lib/utils/startup/scullyInit.js:38:33) {
code: 'ERR_REQUIRE_ESM'
}
Also, here is my tscondig.json file from inside the scully/ folder with my plugin directory:
{
"compileOnSave": false,
"compilerOptions": {
"experimentalDecorators": true,
"esModuleInterop": true,
"importHelpers": true,
"lib": ["ES2019", "dom"],
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"target": "es2018",
"types": ["node"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"typeRoots": ["../node_modules/@types"],
"allowSyntheticDefaultImports": true
},
"exclude": ["./**/*spec.ts"]
}
I am not sure as to what else I should provide to help resolve my issue. If anything more is needed, feel free to tell me to update my question with more context. So what could be wrong here? From a google search I understand that something is wrong with package versioning and what is supported by ESM (as the error message implies). However, I don't know how I could resolve it and I'd like to understand why this error occurs, rather than blindly trying random staff until something works.