0

enter image description hereI want to display my react components in simple scrtipt tag (a widget) I created simple react app with npx create-react-app widget_app. I built a react app in single bundle file i.e bundle.min.js by following these steps:

  1. npx embeddable-create-react-app
  2. added the following in package.json file's script section:

"web:build": "npm run build && npm run build:bundle",

"build:bundle": "webpack --config webpack.config.js"

  1. yarn web:build
  2. It provided me the a bundled file named bundle.min.js at the following path: widget_app/dist/build/static/js/bundle.min.js

I ran the above bundled file on server by using the following command:

  1. npm install -g http-server
  2. http-server

My HTML file where I want to display my react widget (bundled file):

<!doctype html>
<html lang="en">
<head>
    <title>Embedded Widget App</title>
</head>
<body>
    <script type="text/javascript" src="http://127.0.0.1:8080/bundle.min.js"></script>
</body>
</html>

But this html file not displaying any thing (as in screenshot attached).

Mubasher Ahmad
  • 75
  • 1
  • 6

1 Answers1

-1

This is because source map files are disabled by default, so when to create a build of your project source map file are not generated. To enable add the following line in a .env file at the root of your project.

GENERATE_SOURCEMAP = true

You can refer this article for more information: Easy Debugging In React With WebPack Source Maps

khush
  • 2,702
  • 2
  • 16
  • 35