2

I've created a create-react-app simple application (as a lib) and want to load it inside an HTML page as an external script.

  1. I created a create-react-app with the command npx create-react-app my-lib

  2. Changed my-lib/src/index.js to this:

enter image description here

  1. Inside the my-lib directory I run yarn build. This generated the following production files:

enter image description here

  1. Created an external HTML file loading the production version of my-lib.

enter image description here

I'm getting the following error:

enter image description here

Improve this question
7
  • I see there are two chunks. main and 2.js. So in which chunk the AssetsManager class is packaged? Commented Aug 4, 2019 at 16:14
  • @PrakashSharma The AssetsManager class is defined in the src/App.js file. And the src/App.js file is located in the main.[hash].chunk.js, as you can see here. Commented Aug 4, 2019 at 16:20
  • Although, the build ready-to-deploy versions that we create by running -usually- npm run build was not meant for this kind of use cases: const a = new AssetsManager(), what are you trying to achieve by doing that?! Commented Aug 4, 2019 at 16:20
  • @SultanH. Thats not true. uglify won't change the property name. Commented Aug 4, 2019 at 16:20
  • @SultanH. I want to develop a modal that can be called via a callback function (this is my-lib here). I want to pass this callback function to another application, but I don't want to use in the npm package format. Commented Aug 4, 2019 at 16:26

2 Answers 2

Reset to default
1

Production build creates 2 JS files i.e. chunk.js and main.js so we need to import both in index.html file

  1. Loaded react component in variable and assigned to window

enter image description here

  1. Called same window variable in index.html

enter image description here

Please try this way

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@Punnet Bhandari, what is the above script in the fifth line? !function (1)...
@PabloDarde this came in index.html when i created production build, refer pastebin.com/9ZVr0YEM
Thanks, @Puneet Bhandari, this approach worked for me.
@PabloDarde Great
1

The create-react-app build is creating two chunks. main.js and 2.js. The 2.js chunk contain the vendor related files and main.js contains your app code. To run the app you need to import both the bundles in your html file with 2.js file imported before main.js because the vendor files are required to run your app code.

create-react-app also creates an index.html file after building which contain all the imports correctly. So I would recommend to use that index.html file only and do the necessary changes in that file only.

Improve this answer

2 Comments

I added these two js files in the correct order but nothing changed to me.
I would recommend to use the index.html file created by the create-react-app and make necessary changes in that file only.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.