amcharts3-react: Uncaught ReferenceError: AmCharts is not defined, in webpack2 import
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
}
}]
}
]
}
};
About this issue
- Original URL
- State: open
- Created 7 years ago
- Comments: 19
@jeffsrepoaccount This is what I am currently doing in my project to import them and I am not getting an error.
A workaround could be to also
npm i amcharts/amcharts3
(the base library) and then import the relevant files from there: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.
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.
@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.