WEBPACK error with tradingview #86

Cryptoforecast · 2019-02-27T22:12:35Z

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?

The text was updated successfully, but these errors were encountered:

timocov · 2019-03-04T09:36:46Z

Hey,

what version of charting library you have?

Cryptoforecast · 2019-03-05T10:55:21Z

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

timocov · 2019-03-11T08:47:00Z

the lastest one

Can you please provide exact version you have?

Cryptoforecast · 2019-03-11T13:30:50Z

It is the VERSION 1.13 @ 2018-08-24

timocov · 2019-03-11T13:35:30Z

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 · 2019-03-20T16:07:32Z

@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 · 2019-03-20T16:15:46Z

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

tbohnen · 2019-04-30T10:34:08Z

@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 · 2019-04-30T12:10:51Z

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 · 2019-05-01T11:44:04Z

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 · 2019-05-01T15:40:40Z

@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 · 2019-05-02T08:53:03Z

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

tbohnen · 2019-05-02T10:28:29Z

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 · 2019-05-14T17:17:26Z

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 · 2019-08-30T04:32:11Z

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 · 2019-09-03T08:55:47Z

@galipmedia what did you do to get this error?

galipmedia · 2019-09-03T09:03:29Z

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 · 2019-12-07T07:46:17Z

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 · 2019-12-09T09:54:22Z

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 · 2020-06-22T17:16:17Z

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 · 2020-06-23T06:47:14Z

@Padavan-itbeard look at pinned issue #36

Padavan-itbeard · 2020-06-23T07:59:12Z

@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 · 2020-11-14T13:42:47Z

@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 · 2020-11-16T09:52:11Z

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 · 2020-11-17T17:08:58Z

I followed the following steps given in next js example.

Install dependencies npm install.
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.
Copy datafeeds folder from https://github.com/tradingview/charting_library/ to /static.
Run npm build and npm run. It will build the project and open a default browser with the Charting Library.
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 · 2020-11-27T09:50:27Z

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 · 2020-12-03T16:14:37Z

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 · 2021-08-03T08:51:40Z

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 · 2022-05-26T17:47:02Z

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 · 2022-12-29T03:05:01Z

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

It's related with #310

I changed

<Script src="/static/datafeeds/udf/dist/bundle.js"></Script> tag to <script src="/static/datafeeds/udf/dist/bundle.js" async></script>.

Then disappeared UDFCompatibleDataFeed error and met this error.

Hope all of your support

vin8299 · 2023-06-05T11:28:32Z

I am using the latest tradingview library but create alerts button is not showing on the header.
Can someone help me here?

tradingview deleted a comment from Cryptoforecast Mar 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WEBPACK error with tradingview #86

WEBPACK error with tradingview #86

Cryptoforecast commented Feb 27, 2019

timocov commented Mar 4, 2019

Cryptoforecast commented Mar 5, 2019

timocov commented Mar 11, 2019

Cryptoforecast commented Mar 11, 2019

timocov commented Mar 11, 2019

timocov commented Mar 20, 2019

Lory1990 commented Mar 20, 2019

tbohnen commented Apr 30, 2019 •

edited

Loading

timocov commented Apr 30, 2019

tbohnen commented May 1, 2019

tbohnen commented May 1, 2019 •

edited

Loading

tbohnen commented May 2, 2019

tbohnen commented May 2, 2019

timocov commented May 14, 2019

galipmedia commented Aug 30, 2019

timocov commented Sep 3, 2019

galipmedia commented Sep 3, 2019

manhnt9 commented Dec 7, 2019 •

edited

Loading

timocov commented Dec 9, 2019

Padavan-itbeard commented Jun 22, 2020

timocov commented Jun 23, 2020

Padavan-itbeard commented Jun 23, 2020 •

edited

Loading

Abolfazl2647 commented Nov 14, 2020 •

edited

Loading

timocov commented Nov 16, 2020

nantha42 commented Nov 17, 2020

timocov commented Nov 27, 2020

hartantojuc commented Dec 3, 2020

india-dion commented Aug 3, 2021

alihesari commented May 26, 2022

sniper365 commented Dec 29, 2022 •

edited

Loading

vin8299 commented Jun 5, 2023

WEBPACK error with tradingview #86

WEBPACK error with tradingview #86

Comments

Cryptoforecast commented Feb 27, 2019

timocov commented Mar 4, 2019

Cryptoforecast commented Mar 5, 2019

timocov commented Mar 11, 2019

Cryptoforecast commented Mar 11, 2019

timocov commented Mar 11, 2019

timocov commented Mar 20, 2019

Lory1990 commented Mar 20, 2019

tbohnen commented Apr 30, 2019 • edited Loading

timocov commented Apr 30, 2019

tbohnen commented May 1, 2019

tbohnen commented May 1, 2019 • edited Loading

tbohnen commented May 2, 2019

tbohnen commented May 2, 2019

timocov commented May 14, 2019

galipmedia commented Aug 30, 2019

timocov commented Sep 3, 2019

galipmedia commented Sep 3, 2019

manhnt9 commented Dec 7, 2019 • edited Loading

timocov commented Dec 9, 2019

Padavan-itbeard commented Jun 22, 2020

timocov commented Jun 23, 2020

Padavan-itbeard commented Jun 23, 2020 • edited Loading

Abolfazl2647 commented Nov 14, 2020 • edited Loading

timocov commented Nov 16, 2020

nantha42 commented Nov 17, 2020

timocov commented Nov 27, 2020

hartantojuc commented Dec 3, 2020

india-dion commented Aug 3, 2021

alihesari commented May 26, 2022

sniper365 commented Dec 29, 2022 • edited Loading

vin8299 commented Jun 5, 2023

tbohnen commented Apr 30, 2019 •

edited

Loading

tbohnen commented May 1, 2019 •

edited

Loading

manhnt9 commented Dec 7, 2019 •

edited

Loading

Padavan-itbeard commented Jun 23, 2020 •

edited

Loading

Abolfazl2647 commented Nov 14, 2020 •

edited

Loading

sniper365 commented Dec 29, 2022 •

edited

Loading