How to add a js file with reactjs code to drupal 8 module

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
vacho's picture
Posted by vacho on February 29, 2016 at 12:41pm

Hi, guys...
How to add a js file with reactjs code to drupal 8 module. This file is babel(o jsx) format.

At modules/product_search/product_search.libraries.yml I put this code:

searcher:
version: 1.x
js:
js/react.min.js: {}
js/react-dom.min.js: {}
js/browser.min.js: {}
js/searcher.js: {type: babel}

But this error appear:

Exception: Invalid JS asset type. in Drupal\Core\Asset\JsCollectionRenderer->render() (line 95 of core/lib/Drupal/Core/Asset/JsCollectionRenderer.php).

Comments

Solve

Posted by vacho on February 29, 2016 at 9:23pm
vacho's picture

Solution:

Since console
$ npm install -g react-tools
$ ln -s /usr/bin/nodejs /usr/bin/node
$ npm install babel-preset-es2015 babel-preset-react
$ babel --presets es2015,react --watch js/babel --out-dir js/javascript/

and product_search.libraries.yml like this:

searcher:
version: 1.x
js:
js/react.min.js: {}
js/react-dom.min.js: {}
js/browser.min.js: {}
js/javascript/searcher.js: {}

This solution is that js/javascript/searcher.js is a transformed js file.