0
このプロジェクトではdesign-system-reactを使用しようとしていますが、使用時に問題が発生していません。プロジェクトに「design-system-react」を含めることはできません。 "Uncaught Error：無効なタグ：/static/media/index.8365feb8.jsx"
私たちのプロジェクトはreact-scriptsで動作しており、今から私たちが望む任意のライブラリを使用することができます。我々はgetting startedの公式ガイドを辿り、次のようなものを持っています：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"
}
}
私たちもまったく同じ、.babelrc:と同じwebpack.config.js次のWebPACK 1.0を使用して新しいプロジェクトとインストールされていないreact-scriptsを開始しました：
すべてが、我々はそれからすべてのコンポーネントを使用しようとする瞬間まで、正常に動作します。たとえば、私たちの構成要素の一つに、ボタンの例を追加：もちろん
import Button from 'design-system-react/components/button';
<Button label="Hello World!" onClick={this.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：
我々が得た例外は、次のようです。しかし、私たちはこのようなものを利用したいと思います。
こちらのお手伝いをさせていただきます。