Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

reactjs - I am getting lots of error when i am using Material-UI in spfx

0 votes
265 views
in Technique[技术] by (71.8m points)

reactjs - I am getting lots of error when i am using Material-UI in spfx

Please help me, I am trying to use button using material-UI. But when i am implementing getting lots and lots of errors. Java script version is Versin 4.1.3 npm version is Version 6.14.10

By using following command installed material UI npm install @material-ui/core

Ui.tsx file

import * as React from 'react';
import styles from './Ui.module.scss';
import { IUiProps } from './IUiProps';
import { escape } from '@microsoft/sp-lodash-subset';
import Button from '@material-ui/core/Button';

export default class Ui extends React.Component<IUiProps, {}> {
  public render(): React.ReactElement<IUiProps> {
    return(
      <div className={styles.ui}>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.column}>
              <span className={styles.title}>Welcome to SharePoint!</span>
              <p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
              <p className={styles.description}>{escape(this.props.description)}</p>
              <a href='https://aka.ms/spfx' className={styles.button}>
                <span className={styles.label}>Learn more</span>
              </a>
              <Button variant="contained" color="primary">
                Hello World
              </Button>
            </div>
          </div>
        </div>
      </div >
    );
  }
}

package.json

{
  "name": "ui",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@microsoft/sp-core-library": "~1.4.0",
    "@microsoft/sp-lodash-subset": "~1.4.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
    "@microsoft/sp-webpart-base": "~1.4.0",
    "material-ui": "^0.20.2",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  },
  "devDependencies": {
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  }
}

Trying to create a SharePoint Framework app with in typescript. I try to add Material-ui/core, and when I go to serve it, I get lots of errors: Error is

[23:33:42] Finished subtask 'copy-static-assets' after 2.86 s
  Request: [::1] '/workbench'
Warning: no-duplicate-case rule is deprecated. Replace your usage with the TSLint no-duplicate-switch-case rule.
Warning: valid-typeof rule is deprecated. Replace your usage with the TSLint typeof-compare rule.
  Request: '/temp/workbench.html'
  Request: '/temp/manifests.js'
  Request: '/node_modules/@microsoft/sp-webpart-workbench/lib/api/workbenchInit.js'
  Request: '/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js'
[23:33:43] Warning - tslint - srcwebpartsuicomponentsUi.tsx(20,31): error quotemark: " should be '
[23:33:43] Warning - tslint - srcwebpartsuicomponentsUi.tsx(20,49): error quotemark: " should be '
[23:33:45] Error - typescript - node_modules@material-uicoreOverridableComponent.d.ts(68,28): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uicoreOverridableComponent.d.ts(68,56): error TS1005: ']' expected.
[23:33:45] Error - typescript - node_modules@material-uicoreOverridableComponent.d.ts(68,57): error TS1005: ',' expected.
[23:33:45] Error - typescript - node_modules@material-uicoreOverridableComponent.d.ts(68,58): error TS1136: Property assignment expected.
[23:33:45] Error - typescript - node_modules@material-uicoreOverridableComponent.d.ts(68,61): error TS1005: ':' expected.
[23:33:45] Error - typescript - node_modules@material-uicoreindex.d.ts(24,12): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uicoreindex.d.ts(24,20): error TS1131: Property or signature expected.
[23:33:45] Error - typescript - node_modules@material-uicoreindex.d.ts(24,26): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uicoreindex.d.ts(24,34): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uicoreindex.d.ts(24,44): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules@material-uicoreindex.d.ts(24,74): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uicoreindex.d.ts(25,10): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uicoreindex.d.ts(26,2): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules@material-uicorestylesmakeStyles.d.ts(12,15): error TS1144: '{' or ';' expected.
[23:33:45] Error - typescript - node_modules@material-uicorestylesmakeStyles.d.ts(14,2): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uicorestylesmakeStyles.d.ts(14,44): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uicorestylesstyled.d.ts(29,67): error TS1005: ')' expected.
[23:33:45] Error - typescript - node_modules@material-uicorestylesstyled.d.ts(30,6): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules@material-uicorestylesstyled.d.ts(30,29): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uicorestylesstyled.d.ts(31,6): error TS1005: ',' expected.
[23:33:45] Error - typescript - node_modules@material-uicorestylesstyled.d.ts(32,1): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uicorestyleswithStyles.d.ts(40,18): error TS1005: ')' expected.
[23:33:45] Error - typescript - node_modules@material-uicorestyleswithStyles.d.ts(40,54): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uicorestyleswithStyles.d.ts(40,56): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uicorestyleswithStyles.d.ts(41,59): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uistylesgetThemePropsgetThemeProps.d.ts(6,56): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistylesgetThemePropsgetThemeProps.d.ts(6,92): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistylesgetThemePropsgetThemeProps.d.ts(6,99): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uistylesgetThemePropsgetThemeProps.d.ts(7,2): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules@material-uistylesmakeStylesmakeStyles.d.ts(16,15): error TS1144: '{' or ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistylesmakeStylesmakeStyles.d.ts(18,2): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uistylesmakeStylesmakeStyles.d.ts(18,44): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(86,66): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(88,21): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(88,64): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(89,2): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(90,21): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(90,51): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(91,2): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(97,51): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(97,77): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(97,84): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(102,51): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(102,72): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(102,84): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(107,18): error TS1005: ')' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(107,68): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(107,74): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(107,76): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(108,53): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(109,27): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uistyleswithStyleswithStyles.d.ts(110,29): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uisystemindex.d.ts(5,60): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uisystemindex.d.ts(5,88): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uisystemindex.d.ts(6,2): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules@material-uisystemindex.d.ts(48,24): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uisystemindex.d.ts(48,50): error TS1005: '=' expected.
[23:33:45] Error - typescript - node_modules@material-uisystemindex.d.ts(48,61): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules@material-uisystemindex.d.ts(48,65): error TS1005: ',' expected.
[23:33:45] Error - typescript - node_modules@material-uisystemindex.d.ts(48,72): error TS1005: ')' expected.
[23:33:45] Error - typescript - node_modules@material-uiypesindex.d.ts(12,40): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uiypesindex.d.ts(12,54): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules@material-uiypesindex.d.ts(13,23): error TS1005: ':' expected.
[23:33:45] Error - typescript - node_modules@material-uiypesindex.d.ts(16,4): error TS1128: Declaration or statement expected.
[2

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

My test code for your reference:

import * as React from 'react';
import styles from './ReactJqueryUi.module.scss';
import { IReactJqueryUiProps } from './IReactJqueryUiProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { Button } from '@material-ui/core';
export default class ReactJqueryUi extends React.Component<IReactJqueryUiProps, {}> {
  
  public render(): React.ReactElement<IReactJqueryUiProps> {
    return (
      <div className="accordion" id="accordion">
        test <br/>           
            <Button variant="contained" color="primary">Hello World</Button>;
        </div>
    );
  }
  
}

Test result: enter image description here


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...