WEBPACK error with tradingview

[Cryptoforecast]

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?

[timocov]

Hey,

what version of charting library you have?

[Cryptoforecast]

the lastest one, i downloaded it a couple of days ago

[timocov]

the lastest one

Can you please provide exact version you have?

[Cryptoforecast]

It is the VERSION 1.13 @ 2018-08-24

[timocov]

TypeError: charting_library_charting_library_min_js__WEBPACK_IMPORTED_MODULE_6__.widget is not a constructor

This is strange, because there is such export (for your version) and everything should work.

[timocov]

@Cryptoforecast first of all please be careful in the next time with publishing the library in the public (your example contained the library's code).

According your example.

I download it, extract, run yarn, run yarn add react-app-rewired (it looks like there is no react-app-rewired in the deps list), then run yarn start. After that I got an error with TypeError: window.Datafeeds is undefined. This is happened because you don't import/require/inject/inline datafeeds to your page.

After adding <script src="%PUBLIC_URL%/datafeeds/udf/dist/bundle.js"></script> in public/index.html everything is loaded fine.

[Lory1990]

Thank you @timocov, i am really sorry for my mistake. My bad!

[tbohnen]

@timocov did you try doing a yarn build instead of just yarn start? It works fine when we run it but then it fails with

Attempted import error: 'widget' is not exported from 'trading-view/charting_library/charting_library.min'. when building. To confirm, we're on 1.14.

[timocov]

did you try doing a yarn build instead of just yarn start?

No, I didn't :( Unfortunately I already removed the code, could you please send it again here (but without charting library's code please)?

[tbohnen]

This is happening on mine and it feels like the sample is pretty outdated (struggled to get it going). If you want, I think the easiest for me is to create another sample with the latest webpack etc.

[tbohnen]

@timocov just to add, I've tried to create a sample from the latest create-react-app from scratch but getting different errors (it's even worse because. It's very hard to try and debug when I don't have the source to understand it.

https://github.com/tbohnen/tv-example

yarn run v1.12.3
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.

./src/trading-view/charting_library/charting_library.min.js
  Line 1:      Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:    'define' is not defined                                                no-undef
  Line 1:    'define' is not defined                                                no-undef
  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[tbohnen]

@timocov Can you please confirm that the minified file is a umd build? Do you know whether it works with webpack 4?

[tbohnen]

Ok, I created a workaround by just putting the trading view js file in a separate folder and doing an npm install so it's in node_modules and not part of my bundle.

[timocov]

Can you please confirm that the minified file is a umd build?

Yes, I confirm that.

from the latest create-react-app from scratch but getting different errors

That's why we've frozen version of react-scripts.

[galipmedia]

charting_library_min_js__WEBPACK_IMPORTED_MODULE_6__.widget is not a constructor I am having the same problem, can anyone explain how to fix this?

[timocov]

@galipmedia what did you do to get this error?

[galipmedia]

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.

[manhnt9]

I also use webpack and meet error too:

TypeError: e is undefined lightweight-charts.esm.production.js:7:156306

Local environment runs fine but failed on web browser version (static pages).

ah sorry for the noise, my chart data is broken first time deployed to cloud and I trusted my server too much it doesn't reply data

[timocov]

TypeError: e is undefined lightweight-charts.esm.production.js:7:156306

@manhnt9 and why are you asking here, not in https://github.com/tradingview/lightweight-charts ? Also, I don't think that it's related to the library itself, you need to check your webpack config (also, you can provide steps to repro it).

[Padavan-itbeard]

The same problem, the React project is going to webpack. Tell us how to solve?

Failed to compile ./src/charting_library/charting_library.min.js Line 1:1: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 1:107: 'define' is not defined no-undef Line 1:118: 'define' is not defined no-undef Line 1:1808: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 1:2223: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 1:3013: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 1:3175: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 1:5066: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 1:6680: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 1:6756: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 1:7024: Expected an assignment or function call and instead saw an expression no-unused-expressions Line 1:10781: Expected an assignment or function call and instead saw an expression no-unused-expressions

Search for the keywords to learn more about each error. This error occurred during the build time and cannot be dismissed.

[timocov]

@Padavan-itbeard look at pinned issue https://github.com/tradingview/charting-library-examples/issues/36

[Padavan-itbeard]

@timocov the second day I reread all the messages in this section. I can’t list all that I re-read. Answer for React and create-react-app heer https://medium.com/@jonchurch/tradingview-js-api-integration-tutorial-introduction-5e4809d9ef36

[Abolfazl2647]

@timocov did you try doing a yarn build instead of just yarn start? It works fine when we run it but then it fails with

Attempted import error: 'widget' is not exported from 'trading-view/charting_library/charting_library.min'. when building. To confirm, we're on 1.14.

i facing the same issue as u do. i'm not sure this is the correct way but i guess this solution and it's worked well. here: i copy all the code inside of charting_library.min and paste in babel. the babel change it to some sort of other syntax then i copy that and replace it with current code. every thing works fine and trading view shows up plus i can build it aaaaaand CICD build was successfull.

[timocov]

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).

[nantha42]

I followed the following steps given in next js example.

1. Install dependencies npm install.
2. Copy charting_library folder from https://github.com/tradingview/charting_library/ to /static folders. The earliest supported version of the Charting Library is 1.14. If you get 404 then you need to request an access to this repository.
3. Copy datafeeds folder from https://github.com/tradingview/charting_library/ to /static.
4. Run npm build and npm run. It will build the project and open a default browser with the Charting Library.
5. Run npm dev when you start to develop with this project.

But after I completed the step 3, I can't run npm build, it outputs help suggestion. Then I tried npm run dev it started the server at localhost:3000 but there I got an error at the localhost:3000 that reads ` ./components/TVChartContainer/index.jsx:3:0 Module not found: Can't resolve '../../static/charting_library/charting_library.min' 1 | import * as React from 'react'; 2 | import './index.css';

3 | import { widget } from '../../static/charting_library/charting_library.min'; 4 | 5 | function getLanguageFromURL() { 6 | const regex = new RegExp('[\?&]lang=([^&#]*)'); Then I triednpm run buildit gave

info - Creating an optimized production build
Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve '../../static/charting_library/charting_library.min' in '/Users/nantha/Projc/my_projects/Noj View/nextjs-javascript/components/TVChartContainer' ` I used the current chartinglibrary master branch, How to resolve this error?

[timocov]

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.

[hartantojuc]

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.

i used the 17+ version and have been following to change the assets/charting_library/charting_library.min into asset/scharting_library/charting_library

but it gave me the error when compiled using ionic framework with some error in css file

[india-dion]

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.

i used the 17+ version and have been following to change the assets/charting_library/charting_library.min into asset/scharting_library/charting_library

but it gave me the error when compiled using ionic framework with some error in css file

Did you got any solution for your issue?

[alihesari]

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 am doing exactly as you said but I am getting this error:

Module not found: Can't resolve './charting_library' in '/path/to/charting-library-examples/react-typescript/src'

[sniper365]

I am using Next 13 and followed the nextjs-javascript and react-typescript.

It's related with #310

I changed

tag to .

Then disappeared UDFCompatibleDataFeed error and met this error.

Hope all of your support