charting-library-examples: WEBPACK error with tradingview
Hi! i was trying to use the libary with React + react-scripts. Here is my code
import * as React from 'react';
import { widget } from 'charting_library/charting_library.min.js';
export class TVChartContainer extends React.PureComponent {
tvWidget = null;
componentDidMount() {
const widgetOptions = {
symbol: this.props.symbol,
// BEWARE: no trailing slash is expected in feed URL
//datafeed: new window.datafeeds.UDFCompatibleDatafeed(this.props.datafeedUrl),
interval: this.props.interval,
container_id: this.props.containerId,
library_path: this.props.libraryPath,
locale: 'en',
disabled_features: ['use_localstorage_for_settings'],
enabled_features: ['study_templates'],
charts_storage_url: this.props.chartsStorageUrl,
charts_storage_api_version: this.props.chartsStorageApiVersion,
client_id: this.props.clientId,
user_id: this.props.userId,
fullscreen: this.props.fullscreen,
autosize: this.props.autosize,
studies_overrides: this.props.studiesOverrides,
};
const tvWidget = new widget(widgetOptions);
this.tvWidget = tvWidget;
tvWidget.onChartReady(() => {
const button = tvWidget.createButton()
.attr('title', 'Click to show a notification popup')
.addClass('apply-common-tooltip')
.on('click', () => tvWidget.showNoticeDialog({
title: 'Notification',
body: 'TradingView Charting Library API works correctly',
callback: () => {
console.log('Noticed!');
},
}));
button[0].innerHTML = 'Check API';
});
}
componentWillUnmount() {
if (this.tvWidget !== null) {
this.tvWidget.remove();
this.tvWidget = null;
}
}
render() {
return (
<div
id={ this.props.containerId }
className='TVChartContainer'
/>
);
}
static defaultProps = {
symbol: 'AAPL',
interval: 'D',
containerId: 'tv_chart_container',
datafeedUrl: 'https://demo_feed.tradingview.com',
libraryPath: '/charting_library/',
chartsStorageUrl: 'https://saveload.tradingview.com',
chartsStorageApiVersion: '1.1',
clientId: 'cryptoforecast.com',
userId: 'public_user_id',
fullscreen: false,
autosize: true,
studiesOverrides: {},
};
}
export default TVChartContainer
i added the charting_library
under SRC and added /* eslint-disable */
to charting_library.min.js but react gives me this error:
TypeError: charting_library_charting_library_min_js__WEBPACK_IMPORTED_MODULE_6__.widget is not a constructor
It seens that widget is null…
Any idea?
About this issue
- Original URL
- State: open
- Created 5 years ago
- Comments: 31 (11 by maintainers)
The latest versions of the library includes not only umd module for
charting_library.js
file, but esm and cjs as well, so you don’t need to import../path/to/charting_library/charting_library.js
anymore - just use../path/to/charting_library
and let’s decide your bundler choose correct version of the module (there ispackage.json
file where specifiedmain
andmodule
fields).I was trying as per the vue example to include it as - import {widget} from ‘…/…/path to tradingview’ . I have since just included it in the head of my html and it works fine.
See #198. I think that we have to update our samples to work with 17+ version. @nantha42 what version of the library you use? Try to replace
static/charting_library/charting_library.min
withstatic/charting_library
, I hope this might help.