search

salesforce / design-system-react

Salesforce Lightning Design System for React
https://design-system-react-site.herokuapp.com/
BSD 3-Clause "New" or "Revised" License
919 stars 418 forks source link

Getting "Uncaught Error: Invalid tag: /static/media/index.8365feb8.jsx" using any component from the library #1203

Closed robertovg closed 6 years ago

robertovg commented 6 years ago

Hi, we are trying to use this design-system-react in our project, but we are not able due to a problem at the time of using it.

We have our project working and running with react-scripts, and from now we are able to use any library we want, with this exception. We followed the getting started official guide, we have the following package.json and everything really looks quite the same, but somehow we are not able to make it work.

{
  "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"
  }
}

We even started a new project with Webpack 1.0 and no react-scripts installed following exactly the same, .babelrc: and the same webpack.config.js:

Everything works fine, till the moment we try to use any Component from it. For example, just adding the button example to one of our components:

import Button from 'design-system-react/components/button';
<Button label="Hello World!" onClick={this.handleClick} />

Of course, we have the handleClick function implemented in the component

Something interesting is if we just import the button it works and not using it, it works.

The exception we got is the following:

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)

We used both, just the @salesforce-ux/design-system or the react-lightning-design-system with no problems in the applications. But we would like to take the advantage of this one, as looks amazing.

So any help here will be welcome.

interactivellama commented 6 years ago

The ES6 tag is not transpiled into ES5. Create React App and most plug and play environments like it do not transpile libraries found in node_modules. Try the #v0.8.0 tag for the time being which is CommonJS. We are working on an NPM module that supports both. Be on the look out for that issue solved. https://github.com/salesforce/design-system-react/issues/1146 It may not be until January, if you want to transition to the node module.

interactivellama commented 6 years ago

I'm going to close this, because the -ES6 is not compatible with createReactApp. I'll add that to readme for the time being.

robertovg commented 6 years ago

Thanks this solved the issue.

Yes, I think this will help other people too.

interactivellama commented 6 years ago

Added https://github.com/salesforce/design-system-react/blob/master/README.md#ecmascript-6-commonjs-and-create-react-app

You are not the first to ask and probably won't be the last.