NX monorepo：应用程序使用库的源文件而不是 dist 文件夹中的源文件

Question

Here is the problem: I use NX for monorepo. There is an application written in angularJS (webpack for building). It uses library that produces web components (react inside).

import { test } from "@lib/somelib"

The library successfully produces /dist folder (with index.js, react included, ts types).

The thing is that when I build main application, I get an error:

[tsl] ERROR in /Users/***/monorepo/packages/somelib/src/web-components/FirstWebComponent.tsx(33,5)
      TS17004: Cannot use JSX unless the '--jsx' flag is provided.
 @ ../somelib/src/web-components/index.ts 4:28-58
 @ ../somelib/src/index.ts 6:21-48
 @ ./app/scripts/app.ts 90:18-50

shouldn't it use the files from the /dist/packages/somelib/? instead of trying to use the original ones from sources?

here is my tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
       "@lib/somelib": ["packages/somelib/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

it should take the compiled react library files. I tried to changed paths in tsconfig.base.json but no success:

"paths": {
  "@lib/somelib": ["dist/packages/somelib"]
}

I also tried to add alias in application's webpack configuration,

resolve: {
    plugins: [new TsconfigPathsPlugin()],
    extensions: ['.tsx', '.ts', '.js', '.css', '.html'],
    alias: {
      "@lib/somelib": path.resolve(__dirname, "../../dist/packages/somelib/")
    }
},

Answer 1

After playing around a bit I found a solution: so I had to add the path to the typescript files so the IDE can recognise types (in file tsconfig.base.json:)

    "paths": {
      "@lib/ui-components": ["packages/ui-components/src/index.js"]
    }

then in the webpack.config.js:

   resolve: {
      extensions: ['.ts', '.js', '.css', '.html'],
      alias: {
        '@lib/ui-components': path.resolve(__dirname, '../../packages/ui-components/dist/index'),
      },
   }

but then when compiling AngularJS mainproject, compilation was screaming:

[tsl] ERROR in /Users/myname/repo/AngularJS/app-monorepo/packages/ui-components/src/web-components/index.ts(1,33)
      TS6142: Module './FirstWebComponent' was resolved to '/Users/myname/repo/AngularJS/app-monorepo/packages/ui-components/src/web-components/FirstWebComponent.tsx', but '--jsx' is not set.

so I had to add in the AngualrJS tsconfig.json: (in compilerOptions

    "jsx": "react-jsx"

now I can import web components library that includes react into AngularJS project, and IDE will prompt with proper types.

import { SomeComponent } from "@lib/ui-components";