I'm newbie in React and TypeScript. Could you please help me to understand what’s going on with my code?
HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../lib/VSS.SDK.min.js"></script>
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles: true
});
// Entry point to widget
VSS.require(["dist/Widget/Widget"], function () {
VSS.notifyLoadSucceeded();
});
</script>
</head>
<body>
<div id="root" class="widget"></div>
</body>
</html>
TSX file:
/// <reference types="vss-web-extension-sdk" />
import * as React from 'react';
import ReactDOM = require('react-dom');
import WidgetHelpers = require('TFS/Dashboards/WidgetHelpers');
import WidgetContracts = require('TFS/Dashboards/WidgetContracts');
interface IHelloWorldViewModelProps {
name: string
}
export class HelloWorldViewModel extends React.Component<IHelloWorldViewModelProps> {
render(): JSX.Element {
return (
<span>Hello, {this.props.name}</span>
)
}
}
export class Widget {
public load(widgetSettings: WidgetContracts.WidgetSettings) {
return this.render(widgetSettings);
}
private render(widgetSettings: WidgetContracts.WidgetSettings) : IPromise<WidgetContracts.WidgetStatus> {
let userName = VSS.getWebContext().user.name;
ReactDOM.render(
<HelloWorldViewModel name={userName} />,
document.getElementById('root'));
return WidgetHelpers.WidgetStatusHelper.Success();
}
}
WidgetHelpers.IncludeWidgetStyles();
VSS.register("Widget", function () {
return new Widget();
});
webpack.config.js
const path = require("path");
const fs = require("fs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
// Webpack entry points. Mapping from resulting bundle name to the source file entry.
const entries = {};
// Loop through subfolders in the "Samples" folder and add an entry for each one
const samplesDir = path.join(__dirname, "src");
fs.readdirSync(samplesDir).filter(dir => {
if (fs.statSync(path.join(samplesDir, dir)).isDirectory()) {
entries[dir] = "./" + path.relative(process.cwd(), path.join(samplesDir, dir, dir));
}
});
module.exports = {
target: "web",
entry: entries,
output: {
filename: "[name]/[name].js"
},
devtool: "inline-source-map",
devServer: {
https: true,
port: 3000,
publicPath: "/dist/"
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {
"vss-web-extension-sdk": path.resolve("node_modules/vss-web-extension-sdk")
},
},
stats: {
warnings: false
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.html$/,
loader: "file-loader"
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "azure-devops-ui/buildScripts/css-variables-loader", "sass-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
}
]
},
plugins: [
new CopyWebpackPlugin([{ from: "**/*.html", context: "src" }])
]
};
tsconfig.json
{
"compilerOptions": {
"charset": "utf8",
"experimentalDecorators": true,
"module": "amd",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitThis": true,
"strict": true,
"target": "es5",
"rootDir": "src/",
"outDir": "dist/",
"jsx": "react",
"lib": [
"es5",
"es6",
"dom",
"es2015.promise"
],
"types": [
"react"
]
}
}
It gives me error like this:
ERROR in ./src/Widget/Widget.tsx
Module not found: Error: Can't resolve 'TFS/Dashboards/WidgetHelpers' in 'D:\widget_example\src\Widget'
@ ./src/Widget/Widget.tsx 12:0-46:2
i ｢wdm｣: Failed to compile.
But if I remove references to WidgetHelpers module, it works fine:
/// <reference types="vss-web-extension-sdk" />
import * as React from 'react';
import ReactDOM = require('react-dom');
import WidgetHelpers = require('TFS/Dashboards/WidgetHelpers');
import WidgetContracts = require('TFS/Dashboards/WidgetContracts');
interface IHelloWorldViewModelProps {
name: string
}
export class HelloWorldViewModel extends React.Component<IHelloWorldViewModelProps> {
render(): JSX.Element {
return (
<span>Hello, {this.props.name}</span>
)
}
}
export class Widget {
public load(widgetSettings: WidgetContracts.WidgetSettings) {
return this.render(widgetSettings);
}
private render(widgetSettings: WidgetContracts.WidgetSettings) : boolean {
let userName = VSS.getWebContext().user.name;
ReactDOM.render(
<HelloWorldViewModel name={userName} />,
document.getElementById('root'));
return true;
}
}
VSS.register("Widget", function () {
return new Widget();
});
I was referencing to example from here
Could you please point me where I missed something?
Let me know if you need some additional information.
Update 1
I did manage to resolve module TFS/Build/RestClient by this way:
/// <reference types="vss-web-extension-sdk" />
import * as React from 'react';
import ReactDOM = require('react-dom');
import WidgetHelpers = require('TFS/Dashboards/WidgetHelpers');
import WidgetContracts = require('TFS/Dashboards/WidgetContracts');
import AdoBuildClient = require('TFS/Build/RestClient');
import AdoBuildContracts = require('TFS/Build/Contracts');
let buildClient: AdoBuildClient.BuildHttpClient4;
VSS.require("TFS/Build/RestClient", function (AdoBuildClient: { getClient: () => AdoBuildClient.BuildHttpClient4; }) {
buildClient = AdoBuildClient.getClient();
buildClient.getDefinitions("MyFirstProject", "TestWidget").then(definitions => {
console.log(definitions[0].id);
})
});
...
But I don't understand what's going on, code turned into a mess but it works.
Update 2
Project which reproduces the issue can be found here
Update 3
Modules TFS/... are loaded in runtime so there is no way to resolve them during compilation I think. I've dropped old version SDK vss-web-extension-sdk and moved my project to new one azure-devops-extension-sdk. There is no such issues in new version.
I know this may sound dumb, but double check that the WidgetHelpers is actually in the path you provided "TFS/Dashboards/WidgetHelpers". I have had an issue where I had to do a Save As again to that path, but the error you got "ERROR in ./src/Widget/Widget.tsx Module not found: Error: Can't resolve 'TFS/Dashboards/WidgetHelpers' in 'D:\widget_example\src\Widget' @ ./src/Widget/Widget.tsx 12:0-46:2 i ｢wdm｣: Failed to compile." is the ./src/Widget/Widget.tsx a repo? What that error is saying is that it failed to compile because it can find the path TFS/Dashboards/WidgetHelpers which it thinks is in D:\widget_example\src\Widget and then it throws @ ./src/Widget/Widget.tsx again as the target it was going for. So you can check and make sure the path is correct (the module is there and it is spelled correctly), that no files in that path are corrupted.