So I installed TypeScript on my XD project and managed to get it working for all the Adobe types + CSS + images. But I can’t figure out what to do with web components. The error for all is basically Property '..' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
I’m not too familiar with TS and any help would be appreciated. I’ve searched all over the web for the error (some of the fixes were changing the first letter to capital) and can’t seem to find any documentation on TS in the Adobe docs or relevant question answered in the forums. Apologies if I had missed anything.
Possible relevant files:
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"strict": false,
"allowJs": true,
"checkJs": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"module": "commonjs",
"moduleResolution": "node",
"types": ["node"],
"jsx": "preserve",
"lib": ["dom", "es2015"]
},
"paths": {
"*": ["types/*"]
},
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
"exclude": ["node_modules"]
}
types.d.ts
declare module '*.css'
declare module '*.jpg'
declare module '*.png'
declare module '*.jpeg'
declare module '*.gif'
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: './main.js',
libraryTarget: 'commonjs2'
},
devtool: 'none', // prevent webpack from using eval() on my module
externals: {
application: 'application',
scenegraph: 'scenegraph',
viewport: 'viewport',
uxp: 'uxp',
clipboard: 'clipboard'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ['transform-react-jsx', 'transform-object-rest-spread', 'transform-class-properties']
}
},
{
test: /\.(gif|png|jpe?g)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};