Cannot import enums between different components in a lerna monorepo environment

Stencil
1

Hi guys. I’m using a lerna monorepo where I have several stencil components. Some complex components use simpler components (lets say a modal component which uses an input or dropdown component). Almost each component has an enum which is used to configure the component. The issue arises when I use componentB inside of componentA and I try to import componentBs enum. During the build process I get an error:

 [ ERROR ]  Rollup: Missing Export: ./src/components/componentA.tsx
                  'enumFromComponentB' is not exported by
                  ../ComponentB/dist/types/types/index.d.ts, imported by
                  ./src/components/componentA.tsx

How I try to import that enum:
inside componentA.tsx:

import { enumFromComponentB } from 'componentB/dist/types/types';

I see enumFromComponentB in the node_modules under the specified path in a file called index.d.ts.

componentA stencil.config.ts:

export const config: Config = {
  namespace: 'componentA',
  globalScript: 'global/app.ts',
  plugins: [
    sass({
      // passed directly to sass
      importer: sassNodeModulesImporter({ start: '~', debug: true }),
    }),
  ],
  tsconfig: dev ? 'tsconfig.json' : 'tsconfig.prod.json',
  testing: {
    // For CI purposes, testing e2e on browser
    browserArgs: ['--no-sandbox', '--disable-setuid-sandbox'],
  },
  outputTargets: [
    {
      type: 'dist',
      empty: true,
      esmLoaderPath: '../loader',
    },
    { type: 'dist', empty: true },
    {
      type: 'dist-custom-elements',
      minify: true,
      autoDefineCustomElements: true,
      generateTypeDeclarations: true,
      empty: true,
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
};

componentA tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "allowUnreachableCode": false,
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "dom",
            "es2017"
        ],
        "moduleResolution": "node",
        "module": "esnext",
        "target": "es2017",
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "jsx": "react",
        "jsxFactory": "h"
    },
    "include": [
        "global",
        "src",
        "./src/**/*.ts",
    ],
    "exclude": [
        "node_modules"
    ]
}

componentB’s code tree looks like this:

ComponentB
    dist
    node_modules
    src
        componentB.tsx
    types
        index.ts

the index.ts looks like this:

export enum enumFromComponentB {
    VAL = 'val',
    SEC_VAL = 'sec_val'
}