question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to render component packed in bundle with pure javascript?

See original GitHub issue

I create simple app with create-react-app and i call ‘npm run build’ in the terminal. webpack creates a bundle file and i am trying to use this bundle file in my regular JavaScript app.bu i get ‘reference not found’ error for my component like “SetBuilder is not defined”.

this is what i am trying :

in create react-app index file:

import SetBuilder from './SetBuilder';

export {
    SetBuilder 
}

in my javascript file:

ReactDOM.render(ReactDOM.createElement(SetBuilder),document.getElementById("root"));

but i get preceding error.what am i doing wrong? here is the relevant question in StackOverflow.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
bugzpoddercommented, Jul 4, 2019

Yes, you just remove react-scripts from your package.json and add create-react-library.

0reactions
B-Esmailicommented, Jul 4, 2019

@bugzpodder thanks a lot for you’r useful information.is there any way to convert create-react-app to create-react-library?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Wrap a Vanilla JavaScript Package for Use in React
Step 3 — Implementing a React Wrapper. First, we need to define a React component AgGridReact that represents our React datagrid in templates....
Read more >
Integrating with Other Libraries - React
First, we will create an empty component with a render() method where we return <select> wrapped in a ... Notice how we wrapped...
Read more >
Server-Side Rendering a React App Using Express.js
Request for the page is sent to the server from the client. · The server responds by rendering the react component in the...
Read more >
Recommended way of making React component/div draggable
First, declare types of data that can be dragged. These are used to check “compatibility” of drag sources and drop targets: // ItemTypes.js...
Read more >
How to Optimize Components to Improve React Performance
Speed up your React app by optimizing your components' render-diff process. ... React app's bundle JS files are commonly very big, so to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found