Menu
I am using React without npm (owing to serverside restrictions). In my <head> tag I've got the following
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
And my react code is packaged inside a text/babel script tag and works perfectly. Simplified example:
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
I would like to use an external module for charting. However, if I use https://github.com/reactjs/react-chartjs (just downloading it and serving it locally), by including
either
<script type="text/javascript" src="/js/react-chartjs/chart.js"></script>
or
<script type="text/babel" src="/js/react-chartjs/chart.js"></script>
throws an error:
ReferenceError: require is not defined
presumably because require is an npm command. I've tried using require.js but again, that throws errors. Similarly, if I serve the javascript version of chart.js from
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
and within my text/babel script tag try to include the library with any of
// Using CommonJS
var Chart = require('chart.js')
var myChart = new Chart({...})
// ES6
import Chart from 'chart.js'
let myChart = new Chart({...})
// Using requirejs
require(['path/to/Chartjs'], function(Chart){
var myChart = new Chart({...})
})
It also throws errors. Is there a way to import plain javascript libraries or react modules when using react without npm?
993
Ok so this is a HORRIBLE hack using PHP but it's the only option I found. I too do not have a server with npm available. So, instead of using javascript import, or package managers, like browserify, which DO NOT work as they still require npm, I use PHP to create a single large contents of from multiple files:
<script type="text/babel">
<?php
include 'BDRMLElement.js';
?>
...
class App extends React.Component {
...
render() {
return (
<div>
<BDRMLElement />
...
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
