Using Plotly from node-modules in Vaadin Flow

Flow
1

Hi,

I am trying to import plotly.js using a div component in a Vaadin test application (14.0.2).

I am able to import it using the plotly cdn link as follows and execute it.
@JavaScript(value = "https://cdn.plot.ly/plotly-latest.min.js", loadMode = LoadMode.EAGER)

protected void onAttach(AttachEvent attachEvent) {
		super.onAttach(attachEvent);
		setId("test");
		attachEvent.getUI().getPage()
				.executeJavaScript("var trace1 = {x: [1, 2, 3, 4]
, y: [10, 15, 13, 17]
, type: 'scatter'};"
						+ "var data = [trace1]
;" + "Plotly.newPlot('test', data, {}, {showSendToCloud: true});");

However I would like to import it as node module and execute it in Vaadin.

Is this possible?

I tried installing npm install plotly.js-dist node module and updated the webpack.config.js as follows (suggested by web-pack).

module.exports = merge(flowDefaults, {
	module: {
	    rules: [
	      process.env.NODE_ENV === 'production' ? { test: /\.js$/, use: 'babel-loader' } : {},
	      {
	        test: /\.js$/,
	        use: 'ify-loader'
	      },
	    ]
	}
});

I am able to start the application with out any errors.

However no success with recognizing the js module in UI.

Please let me know if the information provided is enough.

Thanks

Jamshid