Running example

[CaiIsProgrammer]

so trying to run your example on here i get this error

`TypeError: react_1.useState is not a function useRemoteComponent C:/Users/cmart/Desktop/New folder/node_modules/@paciolan/remote-component/dist/hooks/useRemoteComponent.js:20 17 | var loadRemoteModule = remote_module_loader_1"default"; 18 | 19 | var useRemoteComponent = function useRemoteComponent(url) {

20 | var _a = react_1.useState({ | ^ 21 | loading: true, 22 | err: undefined, 23 | component: undefined View compiled remoteComponent C:/Users/cmart/Desktop/New folder/node_modules/@paciolan/remote-component/dist/createRemoteComponent.js:56 53 | render = _a.render, 54 | props = __rest(_a, ["url", "fallback", "render"]); 55 | 56 | var _c = useRemoteComponent(url), | ^ 57 | loading = _c[0], 58 | err = _c[1], 59 | Component = _c[2]; View compiled mountIndeterminateComponent C:/Users/cmart/Desktop/New folder/node_modules/react-dom/cjs/react-dom.development.js:14322 14319 | } 14320 | 14321 | ReactCurrentOwner$3.current = workInProgress; 14322 | value = Component(props, context); | ^ 14323 | } // React DevTools reads this flag. 14324 | 14325 | workInProgress.effectTag |= PerformedWork; View compiled beginWork C:/Users/cmart/Desktop/New folder/node_modules/react-dom/cjs/react-dom.development.js:14659 14656 | case IndeterminateComponent: 14657 | { 14658 | var _Component3 = workInProgress.type; 14659 | return mountIndeterminateComponent(current$$1, workInProgress, _Component3, renderExpirationTime); | ^ 14660 | } 14661 | 14662 | case FunctionalComponent:`

[joelnet]

What are the steps you used to create the app? Are you trying to create a remote-component or are you trying to use a remote-component? Do you have a link to a repo that reproduces this bug that I can look at?

[CaiIsProgrammer]

i just used the example you provided and it didnt work. So i guess the repo would just be your example. i havent done anything else to it and i dont have it on git sadly.

[joelnet]

Are you trying to create a remote-component or are you trying to use a remote-component?

[joelnet]

I just ran through the example directions on remote-component-starter and everything appears to be working properly.

I am going to need more info on how to reproduce your error.

Are you getting the error in the remote-component-starter or in a create react app?

Are you trying to build a remote component or are you trying to add one into a react app?

Is this error during the build step? If so, what command are you running?

Is the error in the browser?

[CaiIsProgrammer]

So yeah in dev mode is the error. I'm trying to first just import the one in the example. I want to add remote components made by users to a DB and then render them on the site after inspection of their components. Though I don't want to add all their components one by one into my app.

[CaiIsProgrammer]

error is in create react app

[CaiIsProgrammer]

so i recreated in code sandbox and i still cant get it to work. https://codesandbox.io/s/shy-sky-k8spz?file=/src/App.js

[joelnet]

so i recreated in code sandbox and i still cant get it to work. https://codesandbox.io/s/shy-sky-k8spz?file=/src/App.js

First, the error you are seeing is unrelated to remote component

Inside of your src/App.js, make this change. Comment the render and add a default export.

// ReactDOM.render(<HelloWorld name="Paciolan" />, element);
export default HelloWorld;

Now you will see an error from the remote component

Unknown Error: DependencyNotFoundError: Could not find dependency: 'remote-component.config.js' relative to '/node_modules/@paciolan/remote-component/dist/getDependencies.js'

So now you have to add the dependencies, like react.

Because you are not using webpack, follow the directions here: https://github.com/Paciolan/remote-component#injecting-dependencies-without-webpack

create remote-component.config.js at the root.

/**
 * Dependencies for Remote Components
 */
module.exports = {
  resolve: {
    react: require("react")
  }
};

Create src/RemoteComponent.js and import the dependencies from remote-component.config.js.

import {
  createRemoteComponent,
  createRequires
} from "@paciolan/remote-component";
import { resolve } from "../remote-component.config.js";

const requires = createRequires(resolve);

export const RemoteComponent = createRemoteComponent({ requires });

Last, in your src/App.js, change it to import the custom RemoteComponent.

import { RemoteComponent } from "./components/RemoteComponent";
const url = "https://raw.githubusercontent.com/Paciolan/remote-component/master/examples/remote-components/HelloWorld.js"; // prettier-ignore

const HelloWorld = (props) => <RemoteComponent url={url} {...props} />;

export default HelloWorld;