Uncaught ReferenceError: AmCharts is not defined, in webpack2 import #51

kavimaluskam · 2017-06-28T02:02:19Z

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 · 2017-06-28T03:25:42Z

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 · 2017-06-28T03:29:34Z

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 · 2017-06-28T04:04:02Z

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 · 2017-08-29T14:38:40Z

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 · 2017-09-15T10:08:20Z

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 · 2017-09-29T07:47:14Z

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

cemremengu · 2017-09-29T11:29:03Z

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 · 2017-10-02T18:30:00Z

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 · 2017-10-02T20:12:58Z

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 · 2017-10-11T08:13:30Z

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 · 2017-10-13T17:19:40Z

@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 · 2017-10-14T10:52:05Z

@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 · 2017-11-15T21:25:05Z

script

danshmidt77 · 2017-12-12T14:17:10Z

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 · 2018-01-17T00:51:48Z

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 · 2018-01-29T09:51:09Z

Same problem here @runn-vermel ...

Did you manage to find a solution?

runn-vermel · 2018-01-29T14:43:54Z

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 ***@***.***> 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 <#51 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEGM8fgLpwYNiAEBUx8De_5qKkd4EHh-ks5tPZSOgaJpZM4OHZwI> .

gabstin · 2018-10-24T09:35:56Z

at least you have load this files

then you can use this library in react

....

Pauan · 2019-01-13T16:27:43Z

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.

tomwayson mentioned this issue May 1, 2019

Use dynamic import() to load amcharts Esri/ember-cli-cedar#112

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught ReferenceError: AmCharts is not defined, in webpack2 import #51

Uncaught ReferenceError: AmCharts is not defined, in webpack2 import #51

kavimaluskam commented Jun 28, 2017

jomasti commented Jun 28, 2017

kavimaluskam commented Jun 28, 2017

jomasti commented Jun 28, 2017

intelcoder commented Aug 29, 2017 •

edited

Loading

rcarausu commented Sep 15, 2017

joneswe commented Sep 29, 2017

cemremengu commented Sep 29, 2017 •

edited

Loading

jeffsrepoaccount commented Oct 2, 2017

cemremengu commented Oct 2, 2017

joneswe commented Oct 11, 2017

freakaziod210 commented Oct 13, 2017 •

edited

Loading

Pauan commented Oct 14, 2017

admiralcctwo commented Nov 15, 2017

danshmidt77 commented Dec 12, 2017

runn-vermel commented Jan 17, 2018

HarryFaulkner commented Jan 29, 2018

runn-vermel commented Jan 29, 2018 via email

gabstin commented Oct 24, 2018

Pauan commented Jan 13, 2019

Uncaught ReferenceError: AmCharts is not defined, in webpack2 import #51

Uncaught ReferenceError: AmCharts is not defined, in webpack2 import #51

Comments

kavimaluskam commented Jun 28, 2017

jomasti commented Jun 28, 2017

kavimaluskam commented Jun 28, 2017

jomasti commented Jun 28, 2017

intelcoder commented Aug 29, 2017 • edited Loading

rcarausu commented Sep 15, 2017

joneswe commented Sep 29, 2017

cemremengu commented Sep 29, 2017 • edited Loading

jeffsrepoaccount commented Oct 2, 2017

cemremengu commented Oct 2, 2017

joneswe commented Oct 11, 2017

freakaziod210 commented Oct 13, 2017 • edited Loading

Pauan commented Oct 14, 2017

admiralcctwo commented Nov 15, 2017

danshmidt77 commented Dec 12, 2017

runn-vermel commented Jan 17, 2018

HarryFaulkner commented Jan 29, 2018

runn-vermel commented Jan 29, 2018 via email

gabstin commented Oct 24, 2018

Pauan commented Jan 13, 2019

intelcoder commented Aug 29, 2017 •

edited

Loading

cemremengu commented Sep 29, 2017 •

edited

Loading

freakaziod210 commented Oct 13, 2017 •

edited

Loading