Paciolan / remote-component

Dynamically load a React Component from a URL
MIT License
599 stars 48 forks source link

Adding External Libraries #59

Closed seikosantana closed 1 year ago

seikosantana commented 1 year ago

Hi,

I gave this library a try and i liked how it works, but I encounter problems when trying to add more external libraries like chart js. Here's what I tried: npm i chart-js react-chartjs-2

I haven't even tinkered with the remote component configuration as i dont mind if libraries get bundled anyway, webpack wasnt able to build:

[webpack]     ERROR in ./src/components/Title.js
[webpack]     Module not found: Error: Can't resolve 'react-chartjs-2' in '/home/seikosantana/Projects/remote-component-starter/src/components'
[webpack]     resolve 'react-chartjs-2' in '/home/seikosantana/Projects/remote-component-starter/src/components'
[webpack]       Parsed request is a module
[webpack]       using description file: /home/seikosantana/Projects/remote-component-starter/package.json (relative path: ./src/components)
[webpack]         Field 'browser' doesn't contain a valid alias configuration
[webpack]         resolve as module
...
[webpack]     ERROR in ./node_modules/chart.js/dist/chart.js 568:17
[webpack]     Module parse failed: Unexpected token (568:17)
[webpack]     You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[webpack]     |     };
[webpack]     | class DatasetController {
[webpack]     >  static defaults = {};
[webpack]     |  static datasetElementType = null;
[webpack]     |  static dataElementType = null;
[webpack]      @ ./src/components/Title.js 2:0-73 5:0-7 5:17-27 5:29-36 5:38-44
[webpack]      @ ./src/App.js
[webpack]      @ ./src/index.js
[webpack]      @ ./src/webpack-dev-server.js
[webpack]     Child HtmlWebpackCompiler:
...

Any clue on how to fix this? I'm really hoping to use this remote-component.

Thanks in advance

joelnet commented 1 year ago

The npm statement you are using npm i chart-js react-chartjs-2 is using a package that does not exist. chart-js is not on npm.

I was able to install the react-chartjs-2 lib successfully with this command:

npm i react-chartjs-2

I tested with the remote-component-starter. If you are having difficulties with another project, can you include a link to a github repo so we can reproduce it?

seikosantana commented 1 year ago

Sorry i think i mistyped it when creating the issue. It meant to be chart.js instead of chart-js.

I have also solved the issue (I think at least for now), and updated the library dependencies for newer version of webpack and typescript support. I haven't started using it intensively for now and i think this issue can be closed.

Maybe will reopen if i encounter anything else related to this issue.

Thanks a lot!