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)

Most upvoted comments

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 is package.json file where specified main and module 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.

Module not found: Can’t resolve ‘…/…/static/charting_library/charting_library.min’

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 with static/charting_library, I hope this might help.