Reactjs 不能包括;“设计系统反应”;在我们的项目中。获得;未捕获错误:无效标记:/static/media/index.8365feb8.jsx";

Reactjs 不能包括;“设计系统反应”;在我们的项目中。获得;未捕获错误:无效标记:/static/media/index.8365feb8.jsx";,reactjs,npm,webpack,salesforce-lightning,Reactjs,Npm,Webpack,Salesforce Lightning,我们正在尝试在我们的项目中使用它,但由于使用时出现问题,我们无法使用它 我们的项目使用react脚本运行,从现在起,我们可以使用任何我们想要的库,除了这个例外。我们遵循官方指南,我们有下面的package.json,所有东西看起来都很一样,但不知怎么的,我们无法让它工作 { "name": "Scheduling", "version": "0.0.1", "description": "Scheduling", "scripts": { "build": "webpac

我们正在尝试在我们的项目中使用它,但由于使用时出现问题,我们无法使用它

我们的项目使用
react脚本运行,从现在起,我们可以使用任何我们想要的库,除了这个例外。我们遵循官方指南,我们有下面的
package.json
,所有东西看起来都很一样,但不知怎么的,我们无法让它工作

{
  "name": "Scheduling",
  "version": "0.0.1",
  "description": "Scheduling",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "license": "BSD-3-Clause",
  "engines": {
    "node": ">=9.2.0",
    "npm": ">=5.5.1"
  },
  "dependencies": {
    "@salesforce-ux/design-system": "2.4.3",
    "@salesforce-ux/icons": "7.x",
    "axios": "^0.17.1",
    "babel-plugin-transform-object-rest-spread": "^6.3.13",
    "babel-polyfill": "^6.26.0",
    "body-parser": "^1.14.2",
    "compression": "^1.6.1",
    "create-react-class": "^15.6.2",
    "design-system-react": "git+https://github.com/salesforce/design-system-react.git#v0.8.0-es",
    "express": "^4.13.4",
    "forcejs": "^2.0.1",
    "jsforce": "^1.7.1",
    "jsforce-metadata-tools": "^1.2.2",
    "lightning-container": "^0.1.6",
    "lodash": "^4.17.4",
    "method-override": "^2.3.5",
    "moment": "^2.19.1",
    "path": "^0.12.7",
    "pg": "^4.4.4",
    "prop-types": "^15.6.0",
    "q": "^1.4.1",
    "query-string": "^4.2.3",
    "react": "15.6.2",
    "react-addons-linked-state-mixin": "15.6.2",
    "react-dom": "15.6.2",
    "react-lightning-design-system": "^2.4.5",
    "react-redux": "^5.0.6",
    "redux": "^3.5.2",
    "redux-saga": "^0.16.0",
    "tether": "^1.1.1",
    "tether-drop": "^1.4.2",
    "vis": "^4.21.0"
  },
  "devDependencies": {
    "archiver": "^1.3.0",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-3": "^6.3.13",
    "commander": "^2.9.0",
    "css-loader": "^0.26.1",
    "webpack": "^2.6.1",
    "style-loader": "^0.13.1",
    "enzyme": "^3.1.1",
    "eslint": "^4.10.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-json": "^1.2.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "file-loader": "^0.9.0",
    "fs": "0.0.1-security",
    "history": "^1.17.0",
    "html-webpack-plugin": "^2.24.1",
    "react-scripts": "^1.0.16",
    "react-addons-test-utils": "^15.5.1"
  }
}
我们甚至开始了一个新的项目,Webpack 1.0没有安装任何
react脚本
,遵循完全相同的
.babelrc:
和相同的
Webpack.config.js

一切正常,直到我们尝试使用它的任何组件。例如,只需将按钮示例添加到我们的一个组件:

import Button from 'design-system-react/components/button';
<Button label="Hello World!" onClick={this.handleClick} />
我们使用了这两种方法,仅使用了
@salesforce ux/设计系统
,或者在应用程序中没有问题。但我们想利用这一点,因为它看起来很神奇


因此,这里的任何帮助都将受到欢迎。

由于他们的支持,我得到了解决方案,并将他们的解决方案发布在这里。我希望这对其他人有帮助

ES6标签不会传输到ES5中。创建React应用程序和大多数即插即用环境,例如它不传输
节点\u模块中的库。暂时尝试使用
#v0.8.0
而不是
#v0.8.0-es
标记,这是常见的js并解决
反应脚本的问题

Uncaught Error: Invalid tag: /static/media/index.8365feb8.jsx
    at invariant (invariant.js:42)
    at validateDangerousTag (ReactDOMComponent.js:343)
    at new ReactDOMComponent (ReactDOMComponent.js:370)
    at Object.createInternalComponent (ReactHostComponent.js:39)
    at instantiateReactComponent (instantiateReactComponent.js:77)
    at instantiateChild (ReactChildReconciler.js:42)
    at ReactChildReconciler.js:69
    at traverseAllChildrenImpl (traverseAllChildren.js:75)
    at traverseAllChildrenImpl (traverseAllChildren.js:91)
    at traverseAllChildren (traverseAllChildren.js:170)
    at Object.instantiateChildren (ReactChildReconciler.js:68)
    at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:183)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:222)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)