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/")
}
},
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";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.