Uncaught ReferenceError: AmCharts is not defined, in webpack2 import

[kavimaluskam]

I just failed to import AmCharts with guidelines from the tutorial.

Below are my files:

chart.js

import React, {Component, PropTypes} from 'react';
import AmCharts from "@amcharts/amchart3-react";

....
return (<AmCharts.React
                    {...config} />)

package.json

  "devDependencies": {
    "@amcharts/amcharts3-react": "^2.0.0",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "webpack": "^2.3.2",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.12.2",
    "webpack-md5-hash": "0.0.5"
  },

webpack.config.js

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';

export default {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    './src/webpack-public-path',
    'webpack-hot-middleware/client?reload=true',
    './src/index'
  ],
  devServer: {
    historyApiFallback: true,
    noInfo: true,
  },
  target: 'web',
  output: {
    path: `${__dirname}/src`,
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.ejs',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        context: '/',
        postcss: [
          autoprefixer({
            cascade: false,
            browsers: ['Chrome >= 49', 'Firefox >= 49', 'Edge >= 13']
          })
        ],
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/, exclude: /node_modules/, use: [{
        loader: 'babel-loader',
        // options: { presets: ['es2015'] },
      }],
      },
      {
        test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: [{
        loader: 'file-loader',
      }]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: 'image/font-woff',
          }
        }]
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: 'image/octet-stream',
          }
        }]
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: 'image/svg+xml',
          }
        }]
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
          }
        }]
      },
      {
        test: /\.ico$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
          }
        }]
      },
      {
        test: /(\.css|\.scss)$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        }, {
          loader: 'postcss-loader',
        }, {
          loader: 'sass-loader',
          options: {
            includePaths: [
              path.resolve(__dirname, "some-folder")
            ],
            sourceMap: true
          }
        }]
      }
    ]
  }
};

[jomasti]

What does your index.ejs look like? Does it have the script tags like step 3 in the README or the webpack examples? That's the supported method of loading AmCharts with the latest version of this.

[kavimaluskam]

I had tried using both index.ejs with <script> tags and the webpack import at the same time but it does not work. Yet i think import AmCharts from "@amcharts/amchart3-react"; in my chart.js, which is the chart component alone is sufficiency enough for loading the amcharts module?

[jomasti]

It actually is not with the version in your package.json. With 2.x, you can see that the index.js does not load the amcharts module like in the latest 1.x version.

[intelcoder]

You need to add this to your html file. Otherwise, it will throw errors. Usually you dont have to do this if you are using webpack but for this library it requires this thing

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

[rcarausu]

How did you solve the issue? I'm facing the same problem using gulp. I am using script tags and the import at the same time.

[joneswe]

is it possible to load the online imports into the project?

[cemremengu]

Online imports must be in the package, for some clients we are not allowed to get content from the CDN.

The react package must be standalone, installing all of its dependencies locally.

[jeffsrepoaccount]

A workaround could be to also npm i amcharts/amcharts3 (the base library) and then import the relevant files from there:

import 'amcharts3/amcharts/amcharts';
import 'amcharts3/amcharts/serial';
import 'amcharts3/amcharts/themes/light';

I still get a pre-render error complaining that AmCharts is not defined, but eventually it renders and can see the library being loaded correctly. This is not pretty, though, and I think some better examples of how to use amcharts with React and NPM specifically could be worked out.

If you are distributing over NPM then using a CDN to load the base library is not a solution and defeats the whole purpose of having a dependency manager manage your dependencies.

[cemremengu]

You can work around most but I couldn't figure out a clean way to import the export functionality. Since it has tons of dependencies, it fails.

[joneswe]

can you plz fix that. I haven't found a way to include them without errors. I can't use it, if it's not standalone :/

[freakaziod210]

@jeffsrepoaccount This is what I am currently doing in my project to import them and I am not getting an error.

import 'amcharts3';
import 'amcharts3/amcharts/serial';
import AmCharts from '@amcharts/amcharts3-react';

[Pauan]

@cemremengu That isn't possible, because the AmCharts export plugin dynamically loads files at runtime, which is why you must use <script> tags.

If you do not want to use our CDN, you can download AmCharts, put the AmCharts files on your server, then use <script> tags which use the AmCharts files on your server.

---

@jeffsrepoaccount @freakaziod210 That won't work if you use the export plugin.

---

We agree that being able to use npm + webpack to manage everything is a good thing.

But AmCharts v3 was made many many years ago, before npm or webpack even existed.

Because of that, AmCharts v3 is designed to work with <script> tags, and it is too difficult for us to make it work with npm.

However, we are actively working on AmCharts v4. It is not finished yet, but when it is released it will have full support for npm + webpack.

[admiralcctwo]

script

[danshmidt77]

We npm install amcharts/amcharts3

then use dynamic import, this way we achieve encapsulation and code split. Promise.all([ //dynamically import amchart dependencies import('amcharts3/amcharts/amcharts'), import('amcharts3/amcharts/serial'), import('amcharts3/amcharts/themes/light') ]).then(() => { //amChart config });

[runn-vermel]

I went ahead and added the 3 script calls, and the charts work in the app, but when i use Jest to test things, i still get this message.

any help/ideas are appreciated...

[HarryFaulkner]

Same problem here @runn-vermel ...

Did you manage to find a solution?

[runn-vermel]

Nope - I commented stuff out, and will likely upgrade to a different library. Sorry I'm not more help :(

On Mon, Jan 29, 2018 at 01:51 HarryFaulkner notifications@github.com wrote:

Same problem here @runn-vermel https://github.com/runn-vermel ...

Did you manage to find a solution?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/amcharts/amcharts3-react/issues/51#issuecomment-361193150, or mute the thread https://github.com/notifications/unsubscribe-auth/AEGM8fgLpwYNiAEBUx8De_5qKkd4EHh-ks5tPZSOgaJpZM4OHZwI .

[gabstin]

at least you have load this files

then you can use this library in react

....

[Pauan]

I would just like to point out that we have released V4, which has excellent built-in support for npm/Webpack/React:

https://www.amcharts.com/javascript-charts/ https://www.amcharts.com/docs/v4/getting-started/integrations/using-react/

We will still support V3 for a while, but our effort is primarily going into V4.