Using Remote Component with CRA

[grafolean]

Hi,

nice library and very well documented, thank you for your effort!

I am having trouble using it within a regular Create React App (without ejecting or rewiring) and would appreciate any advice...

I am getting an error when I start my app:

Module not found: Can't resolve 'remote-component.config.js' in '/path/to/my/app/node_modules/@paciolan/remote-component/dist/lib'

Which later results in: Could not require 'react'. 'react' does not exist in dependencies.

I assume this is because CRA doesn't use webpack.config.js... Do you maybe know a way around it which would not require ejecting or rewiring the app?

[grafolean]

I was able to make it work without ejecting / rewiring by using React Hooks example.

I encountered another (small) issue of a typo in an example, see PR.

Feel free to close this issue, and thank you again!

[joelnet]

We'll investigate this further to see if it can be used with Create React App without ejecting

[grafolean]

Cool, let me know if I can help somehow.

The only remaining issue I see is the warning:

./node_modules/@paciolan/remote-component/dist/lib/getDependencies.js
Module not found: Can't resolve 'remote-component.config.js' in '/mnt/old/var/www/grafolean/frontend/node_modules/@paciolan/remote-component/dist/lib'

I investigated a bit and I think this is caused by importing from RemoteComponent.js. Removing component would probably work in my case, though I'm not sure how to fix this properly.

[joelnet]

So it looks like there's no easy way to access Create React App's webpack.config.js without doing an eject. It seems like that's the recommended method.

There are some alternatives like this tool: https://github.com/gsoft-inc/craco that will let you make modifications without ejecting.

I would also recommend doing an eject as other methods aren't supported by CRA and could break in the future.

I'll try to spend some time investigating a solution for CRA, but I am not optimistic.

[joelnet]

I was able to get CRA working with the RemoteComponent without using eject.

I followed the manual configuration section.

Some changes I needed to make:

I moved remote-component.config.js into src/remote-component.config.js

Then I create src/components/RemoteComponent.js. I pointed to the new location for src/remote-component.config.js. I also had to change the imports.

/*
 * src/components/RemoteComponent.js
 */
//import {
//  createRemoteComponent,
//  createRequires
//} from "@paciolan/remote-component";
import { createRemoteComponent } from "@paciolan/remote-component/dist/lib/createRemoteComponent";
import { createRequires } from "@paciolan/remote-component/dist/lib/createRequires";
import { resolve } from "../../remote-component.config";

const requires = createRequires(resolve);
export const RemoteComponent = createRemoteComponent({ requires });

The error message seems to be from eager loading of RemoteComponent, even though it's not used. I'm gonna work on changing this to be lazy in the next version.

[joelnet]

I updated the docs to include the changes required to get Remote Component working with Create React App.

https://github.com/Paciolan/remote-component#create-react-app

I also made a note about that Warning message that appears.

https://github.com/Paciolan/remote-component#you-may-see-some-warnings