experience-experiments / react-easy-chart

[DEPRECATED] - Easy to use React Charting library
http://experience-experiments.github.io/react-easy-chart
BSD 3-Clause "New" or "Revised" License
142 stars 55 forks source link

Uncaught ReferenceError: exports is not defined #90

Open lpcarignan opened 7 years ago

lpcarignan commented 7 years ago

I'm trying to integrate react-easy-chart in my Typescript/React application and I am running into a problem. While I truly appreciate the time and effort in the examples provided in this project, mine is setup a bit differently and I am looking for some guidance as I am using RequireJs to load my modules.

Basically, my Typescript chart is a wrapper around the bar chart from react-easy-chart.

MyChart.tsx

import * as React from "react";
import * as ReactDOM from "react-dom"; 
import {BarChart} from "react-easy-chart"; 

import {Forecast} from "forecast";

export interface MyChartProps {  }

export class MyChart extends React.Component<MyChartProps, undefined> {
    render() {

    return <BarChart
    data={[
      {x: 'A', y: 20},
      {x: 'B', y: 30},
      {x: 'C', y: 40},
      {x: 'D', y: 20},
      {x: 'E', y: 40},
      {x: 'F', y: 25},
      {x: 'G', y: 5}
    ]}
  />;
    }
}

index.html

In index.html, I load React and ReactDOM through the require.config function. I've decided to add react-easy-chart in their as well. require.config will make sure these libraries are loaded before called the "main function" in my Typescript application.

<script data-main="dist/app" type="text/javascript" src="node_modules/requirejs/require.js"></script>

    <script>
        require.config({
            paths: {
                "react": "../node_modules/react/dist/react",
                "react-dom": "../node_modules/react-dom/dist/react-dom",
                "react-easy-chart":"../node_modules/react-easy-chart/lib/index"
            }
        });

    </script>

When I try to load this up in the browser, I get the following error message pointing at index.js of react-easy-chart:

Uncaught ReferenceError: exports is not defined at index.js:3

On line 3 of index.js, it assumes the object exports exists and appends a property (__esModule) to it. Shouldn't there be a check for this? If we look at react.js, there's a big check at the beginner of its file where it does check if exports is defined and an object.

As I'm quite rusty with Javascript, I might be completely ignorant of something. For example, I'm loading lib/index.js to use the charts. Is this the correct file? Reading through your Bar chart example, you seem to load shared.js and bar_chart.js. They both call Object.defineProperty(exports...) so I know I'll be getting nowhere.

If I try loading modules/index.js, the browser won't like the import statements at the beginning.

Any help or hint would greatly help me. Your library looks great and the documentation is easy to read. Good job on all of your work. My question/setup is a bit different than your so I though I might write you this issue in the hopes that other people have had the same problem.

harunhasdal commented 7 years ago

You'll need a UMD or AMD version of the library to be able to use it with requirejs in the browser. We don't currently have that sort of build. You can build it by tweaking webpack configuration to create a single bundle.