Hi,
I'm beginner and looking for some advice for what's wrong with my first PCF. I get the tutorial from Youtube : https://www.youtube.com/watch?v=fNCEc3CDCrI
I am using mac so i had to do some changes
in node_modules/pcf-scripts/tasks/startTask.js line 34
const pcfStartCmd = child_process_1.spawn('cmd', ['/c', `pcf-start ${this._watchOn ? '--watch' : ''} --codePath ${outputDir}`]);
this has to be changed to:
const pcfStartCmd = child_process_1.spawn('pcf-start', [`${this._watchOn ? '--watch' : ''} --codePath ${outputDir}`]);
because
pac pcf init
creates project for windows.
then i run these commands
npm run build
npm run start
and server runs on http://127.0.0.1:8181/
but it gives me this error on browser
the code is exact same from the video
//1) index.ts
import {IInputs, IOutputs} from "./generated/ManifestTypes";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ReactComp, IReactCompProps } from './ReactComp';
export class MyReactComp implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private theContainer: HTMLDivElement;
private props: IReactCompProps = {
myvalue: ""
}
constructor()
{
}
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
{
this.theContainer = container;
this.props.myvalue = context.parameters.sampleProperty.raw;
}
public updateView(context: ComponentFramework.Context<IInputs>): void
{
this.props.myvalue = context.parameters.sampleProperty.raw;
ReactDOM.render(
React.createElement(
ReactComp, this.props
),
this.theContainer
);
}
public getOutputs(): IOutputs
{
return {};
}
public destroy(): void
{
}
}
//2) ReactComp.tsx
import * as React from "react";
import { Checkbox } from "office-ui-fabric-react/lib/Checkbox";
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
import { Facepile, IFacepilePersona, IFacepileProps, OverflowButtonType } from "office-ui-fabric-react/lib/Facepile";
import { PersonaSize } from "office-ui-fabric-react/lib/Persona";
import { Slider } from "office-ui-fabric-react/lib/Slider";
import { setIconOptions } from "office-ui-fabric-react/lib/Styling";
// Suppress office UI fabric icon warnings.
setIconOptions({
disableWarnings: true,
});
export interface IReactCompProps {
myvalue: string | null
}
export interface IReactCompState extends React.ComponentState, IReactCompProps {
}
export class ReactComp extends React.Component<IReactCompProps, IReactCompState> {
constructor(props: IReactCompProps) {
super(props);
this.state = {
myvalue:"Hello World"
};
}
public componentWillReceiveProps(newProps: IReactCompProps): void {
this.setState(newProps);
}
public render(): JSX.Element {
return (
<div>
{this.state.myvalue}
</div>
);
}
}
Is there something I missed ? What could be the problem ?
Please help,
Thanks.
