create-react-library icon indicating copy to clipboard operation
create-react-library copied to clipboard

Published 20 hours ago • verified publisher icon transitive-bullshit

UMD export does not work - missing ReactDOM

Open bartek1912 opened this issue 3 years ago • 0 comments

Hello, I want to create a UMD library embeddable on any HTML page. I've created a project with npx create-react-library app --template typescript and then add the dependencies required to make it UMD (see my package.json below). But still receive an error: image image

My package.json (I've add react-dom to peerDependencies):

{
  "name": "app",
  "version": "1.0.0",
  "description": "Made with create-react-library",
  "author": "me",
  "license": "MIT",
  "repository": "me/grpc-docs",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.tsx",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs,umd",
    "start": "microbundle-crl watch --no-compress --format modern,cjs",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && yarn install && yarn run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.12.38",
    "@types/react": "^16.9.27",
    "@types/react-dom": "^16.9.7",
    "@typescript-eslint/eslint-plugin": "^2.26.0",
    "@typescript-eslint/parser": "^2.26.0",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle-crl": "^0.13.10",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "typescript": "^3.7.5"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
  }
}

index.tsx:

import * as React from 'react'
import ReactDOM from 'react-dom'

interface Config {
  elementId: string
}
export const init = (config: Config) => {
  const el = document.getElementById(config.elementId)
  if (!el) {
    console.error('Unable to find element with id=' + config.elementId)
    return
  }
  ReactDOM.render(<div>This is react component</div>, el)
}

HTML test file (in the root of the app):

<html>
	<body>
		Hello, world!
    <script src="./dist/index.umd.js">
    </script>
    <div id="root"></div>
		<script>
      app.init({
        elementId: "root",
      })
		</script>
	</body>
</html>

Adding CDN URLs in the HTML file doesn't fix issues:

......
		Hello world!
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="./dist/index.umd.js">
    </script>
....

How to fix it?

bartek1912 avatar Jan 13 '22 12:01 bartek1912