时间戳

首页 > 解决方案 > 在 spfx 中使用 Material-UI 时出现很多错误

reactjs - 在 spfx 中使用 Material-UI 时出现很多错误

问题描述

请帮助我，我正在尝试使用 Material-UI 的按钮。但是当我实施时，会出现很多错误。Java 脚本版本是 Versin 4.1.3 npm 版本是版本 6.14.10

通过使用以下命令安装材料 UI npm install @material-ui/core

ui.tsx 文件

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 >
    );
  }
}

包.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"
  }
}

尝试使用打字稿创建 SharePoint 框架应用程序。我尝试添加 Material-ui/core，当我去服务它时，我得到很多错误：错误是

[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 - src\webparts\ui\components\Ui.tsx(20,31): error quotemark: " should be '
[23:33:43] Warning - tslint - src\webparts\ui\components\Ui.tsx(20,49): error quotemark: " should be '
[23:33:45] Error - typescript - node_modules\@material-ui\core\OverridableComponent.d.ts(68,28): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\OverridableComponent.d.ts(68,56): error TS1005: ']' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\OverridableComponent.d.ts(68,57): error TS1005: ',' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\OverridableComponent.d.ts(68,58): error TS1136: Property assignment expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\OverridableComponent.d.ts(68,61): error TS1005: ':' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\index.d.ts(24,12): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\index.d.ts(24,20): error TS1131: Property or signature expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\index.d.ts(24,26): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\index.d.ts(24,34): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\index.d.ts(24,44): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\index.d.ts(24,74): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\index.d.ts(25,10): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\index.d.ts(26,2): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\makeStyles.d.ts(12,15): error TS1144: '{' or ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\makeStyles.d.ts(14,2): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\makeStyles.d.ts(14,44): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\styled.d.ts(29,67): error TS1005: ')' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\styled.d.ts(30,6): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\styled.d.ts(30,29): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\styled.d.ts(31,6): error TS1005: ',' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\styled.d.ts(32,1): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\withStyles.d.ts(40,18): error TS1005: ')' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\withStyles.d.ts(40,54): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\withStyles.d.ts(40,56): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\core\styles\withStyles.d.ts(41,59): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\getThemeProps\getThemeProps.d.ts(6,56): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\getThemeProps\getThemeProps.d.ts(6,92): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\getThemeProps\getThemeProps.d.ts(6,99): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\getThemeProps\getThemeProps.d.ts(7,2): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\makeStyles\makeStyles.d.ts(16,15): error TS1144: '{' or ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\makeStyles\makeStyles.d.ts(18,2): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\makeStyles\makeStyles.d.ts(18,44): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(86,66): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(88,21): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(88,64): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(89,2): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(90,21): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(90,51): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(91,2): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(97,51): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(97,77): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(97,84): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(102,51): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(102,72): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(102,84): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(107,18): error TS1005: ')' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(107,68): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(107,74): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(107,76): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(108,53): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(109,27): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\styles\withStyles\withStyles.d.ts(110,29): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\system\index.d.ts(5,60): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\system\index.d.ts(5,88): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\system\index.d.ts(6,2): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@material-ui\system\index.d.ts(48,24): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\system\index.d.ts(48,50): error TS1005: '=' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\system\index.d.ts(48,61): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\system\index.d.ts(48,65): error TS1005: ',' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\system\index.d.ts(48,72): error TS1005: ')' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(12,40): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(12,54): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(13,23): error TS1005: ':' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(16,4): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(17,0): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(38,45): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(38,88): error TS1005: '(' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(38,95): error TS1005: ')' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(60,27): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(61,2): error TS1128: Declaration or statement expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(61,10): error TS1005: ',' expected.
[23:33:45] Error - typescript - node_modules\@material-ui\types\index.d.ts(63,1): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\@types\react-transition-group\Transition.d.ts(9,13): error TS1005: ']' expected.
[23:33:45] Error - typescript - node_modules\@types\react-transition-group\Transition.d.ts(9,56): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\jss\node_modules\csstype\index.d.ts(2,43): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\jss\node_modules\csstype\index.d.ts(2,63): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\jss\node_modules\csstype\index.d.ts(3,2): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\jss\node_modules\csstype\index.d.ts(3,17): error TS1005: ':' expected.
[23:33:45] Error - typescript - node_modules\jss\node_modules\csstype\index.d.ts(3,31): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\jss\node_modules\csstype\index.d.ts(4,2): error TS1109: Expression expected.
[23:33:45] Error - typescript - node_modules\jss\node_modules\csstype\index.d.ts(4,11): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\jss\node_modules\csstype\index.d.ts(4,25): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\jss\src\index.d.ts(13,28): error TS1005: ';' expected.
[23:33:45] Error - typescript - node_modules\jss\src\index.d.ts(13,42): error TS1005: ';' expected.
[23:33:46] Finished subtask 'tslint' after 5.57 s
  Request: '/node_modules/@microsoft/decorators/dist/decorators.js'
  Request: '/node_modules/@microsoft/sp-http/dist/sp-http_en-us.js'
  Request: '/node_modules/@microsoft/sp-page-context/dist/sp-page-context.js'
[23:33:46] Error - 'typescript' sub task errored after 3.55 s
 TypeScript error(s) occurred.
  Request: '/node_modules/@microsoft/sp-component-base/dist/sp-component-base.js'
  Request: '/node_modules/@microsoft/sp-extension-base/dist/sp-extension-base_en-us.js'
  Request: '/node_modules/@microsoft/sp-application-base/dist/sp-application-base_en-us.js'
  Request: '/node_modules/react/dist/react.js'
  Request: '/node_modules/react-dom/dist/react-dom.js'
  Request: '/node_modules/@microsoft/office-ui-fabric-react-bundle/dist/office-ui-fabric-react-bundle.js'
  Request: '/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js'
  Request: '/node_modules/@microsoft/sp-webpart-workbench/dist/sp-webpart-workbench_en-us.js'

标签： reactjsmaterial-uisharepoint-onlinespfx

解决方案

我的测试代码供您参考：

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>
    );
  }
  
}

测试结果： 在此处输入图像描述

推荐阅读