This repository was archived by the owner on Apr 1, 2023. It is now read-only.
This repository was archived by the owner on Apr 1, 2023. It is now read-only.
UMD export does not work - missing ReactDOM #362
Description
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:
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?