Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
robertovg opened this issue Dec 13, 2017 · 4 comments
Closed

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

robertovg opened this issue Dec 13, 2017 · 4 comments

Comments

@robertovg
Copy link

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
Copy link
Contributor

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. #1146 It may not be until January, if you want to transition to the node module.

@interactivellama
Copy link
Contributor

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
Copy link
Author

Thanks this solved the issue.

Yes, I think this will help other people too.

@interactivellama
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@robertovg @interactivellama