0
우리는이 프로젝트에서이 design-system-react을 사용하려고 시도하고 있습니다 만, 문제가 발생했을 때이를 사용할 수 없었습니다.프로젝트에 "design-system-react"를 포함 할 수 없습니다. "잡히지 않은 오류 : 잘못된 태그 : /static/media/index.8365feb8.jsx"
우리는이 프로젝트가 react-scripts으로 작동하고 실행 중이며, 지금부터는 원하는 모든 라이브러리를 사용할 수 있습니다. 예외는 있습니다. 우리는 getting started 공식 가이드를 따라 갔고 다음은 package.json이며 모든 것이 실제로 똑같아 보이지만 어쨌든 우리는 그것을 작동시킬 수 없습니다. 우리는 그것에서 어떤 구성 요소를 사용하려고
모든 순간까지 잘 작동 : 정확히, 같은 .babelrc: 같은 webpack.config.js 다음
{
"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"
}
}
react-scripts가 설치되지 . 예를 들어, 우리의 구성 요소 중 하나에있는 버튼 예제를 추가 : 물론
import Button from 'design-system-react/components/button';
<Button label="Hello World!" onClick={this.handleClick} />
, 우리가 구성 요소의 구현 handleClick 기능을 가지고 우리가 그냥 작동 버튼을 가져하지 않을 경우
흥미로운 무언가가있다 그것을 사용하여, 그것은 작동합니다.
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)
@salesforce-ux/design-system 또는
react-lightning-design-system :
우리가 가진 예외는 다음과 같습니다. 그러나 우리는 놀라운 것처럼이 하나의 이점을 이용하고 싶습니다.
여기에 도움이 될 것입니다.