#Internal plugin used in "app" with exported enum failing with "Module parse failed" - any ideas?

2 messages · Page 1 of 1 (latest)

urban moat
#

I created a new internal plugin using yarn new of type plugin-react. I then add some files into the src folder to be exported from the module. Just a general export enum Foo { BAR = 'bar' }. Afterwards I add the package to the app through yarn --cwd packages/app add @internal/plugin-foo-bar@^0.1.0.

Everything is happy. Do a yarn install ... just prior I do a yarn cache clean along with deleting any node_modules or dist folders. If I've committed I even do a git clean -xdf to nuke all the cruft followed by a yarn install.

At this point if I go into the app/src/components and add an import to use the enum from the internal plugin everything seems fine. I hop over to the CLI and do another yarn install and then a LOG_LEVEL=debug yarn dev.

It starts the backstage packages through the backstage-cli commands. The console will stream out parsing, processing, and stitching the entities. Once it gets to the search_index_techdocs it'll then have a spinner refreshing the page right before errors dump to the console and the UI.

Something like:

[0] ERROR in ../../plugins/mycompany-catalog/node_modules/@internal/plugin-mycompany-catalog-common/src/annotations/BackstageAnnotation.ts 1:7
[0] Module parse failed: Unexpected token (1:7)
[0] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[0] > export enum BackstageAnnotation {
[0] |   CODE_COVERAGE = 'backstage.io/code-coverage',
[0] |   SOURCE_LOCATION = 'backstage.io/source-location',

This only happens when importing an internal plugin to the packages/app. When importing similar libraries to the packages/backend it has zero issues. I've checked workspaces info and i've tried link / non-link references. I've tried setting packages.json to use "file:../../plugins/XYZ" and "link:../../plugins/XZY"` but nothing seems to do the trick.

Am I missing something?

#

Also, on the enum side I've tried wrapping in a namespace similar to what happens in the packages/core-components/src/components/DependencyGraph/types.ts. I'm even seeing it with export of a function like:

const KEY_VALIDATION = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*$/;

export function isValidName(name: string): boolean {
  const length = name.length;
  return length > 0 && length <= 63 && KEY_VALIDATION.test(name);
}

It'll flat about needing an appropriate loader. I've tried to use even declare on the function and using export const enum Foo ....