We do similar things to inject JS variables from generated code. We steer completely clear of the Requirements::whatever files through and never ever include and JS that way, its all included via webpack.
Either its dumped into the page and cached, or we set up a simple API and call that to get the data as necessary. Another option is to set `data-` attributes on the element which is the root of your JS component. We do this a lot when using react standalone components.
So a component looks like:
`<div id="MyJSComponent" data-firstname="{$FirstName}"><span class="sr-only">You must have JavaScript enabled to use this component.</span></div>`
And the JS will look like:
```
import React from 'react';
import ReactDom from 'react-dom';
import dataset from 'dataset';
const myJSComponent = document.getElementById('MyJSComponent');
class MyComponent extends React.Component {
constructor(props) {
this.state = {
FirstName: dataset('firstname', myJSComponent)
};
}
render() {
return <div className="my-component">{this.state.FirstName}</div>;
}
}
if (myJSComponent) {
ReactDom.render(< MyComponent />, myJSComponent);
}
```
I'm sure this could be easily applied to a jQuery situation too :)
Cheers,
Stevie