Update to React 17

[AskAlice]

create-react-library creates a react 16.13.1 module, but people who use packages made with this will get a warning saying that it expects react 16, unless you change the peer dependencies. Furthermore, I think the module itself should be running on react 17.

[joaolucasgtr]

@AskAlice After manually tweaking dependencies, I came out with this package.json:

{
  "name": "new-comp",
  "version": "1.0.0",
  "description": "Made with create-react-library",
  "author": "joaolucasgtr",
  "license": "MIT",
  "repository": "joaolucasgtr/new-comp",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.js",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs",
    "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 && npm install && npm run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "react": "^17.0.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.20.0",
    "eslint-config-prettier": "^8.0.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-config-standard-react": "^11.0.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-promise": "^4.3.1",
    "gh-pages": "^3.1.0",
    "microbundle-crl": "^0.13.11",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.3",
    "web-vitals": "^1.1.0"
  },
  "files": [
    "dist"
  ]
}

I tested some deps who depend on "react": "^17.0.1" and it worked fine.

[yracnet]

@AskAlice this is my custom package.json for library and example:

package.json for library project

{
  "name": "my-library",
  "version": "1.0.0",
  "description": "...",
  "author": "...",
  "license": "MIT",
  "repository": "...",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "module": "dist/index.modern.js",
  "source": "src/index.js",
  "engines": {
    "node": ">=12"
  },
  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs",
    "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 && npm install && npm run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "react": "^17.0.1"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1",
    "microbundle-crl": "^0.13.10",
    "gh-pages": "^2.2.0",
    "npm-run-all": "^4.1.5"
  },
  "files": [
    "dist"
  ]
}

package.json for example project

{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
  },
  "dependencies": {
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-scripts": "file:../node_modules/react-scripts",
    "web-vitals": "file:../node_modules/web-vitals",
    "my-library": "file:.."
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[AskAlice]

@yracnet @JoaoLucasGtr could one of you make a PR?

[yracnet]

PR? Project React?

[AskAlice]

no, this repo

[joaolucasgtr]

@AskAlice I just changed my package.json to make it work. I'll check this later to see if I can make a Pull Request of it

[mitchellwarr]

Does your implementation work with shorthand fragments (these: <></>) and allow for the use of jsx without importing React? I tried to update my own CRL and am having trouble with these issues

[vitorpdasilva]

I am also having issues with this and the fragment syntax.

[AskAlice]

@mitchellwarr could be linter version

[mitchellwarr]

@mitchellwarr could be linter version

Actually i have managed to track the issues down to the microbundle-crl.

[fplgusmao]

I used this tool to create a reusable component library some time ago. A few days ago, I tried to update react to v17. I got it working on the library side, but when I used the library on an app, I got a "React is not defined error". This is due to me using JSX without importing React, a feature which is included in both React 17 but also on more recent versions of React 16.

After a lot of struggling I've also reached @mitchellwarr's conclusion that my issue is probably due to microbundle-crl: my library tests are passing but tests in my example folder are not.

You can easily replicate this:

• bootstrap a new library with npx create-react-library ...
• update react and react-dom to ^17.0.2
• update react-scripts to 4.0.3 (and eslint to ^7.11.0)
• remove the import React line in the src/index.js

This will make the example's npm test fail, and also fail in runtime with ReferenceError: React is not defined

(As a side note, the library's npm test will fail due to lint .. This last issue is due to eslint-config-standard-react which still has the react/react-in-jsx-scope rule active. This to say that any effort to support React 17 should also consider this.)

So maybe we should look into #284 to maybe drop microbundle-crl for microbundle instead. I'll try to do it and see if I can get it working. If I can, I'll get back to you with a codesandbox

[mr-ristic]

You can use my fork for typescript template, tests are working and I switched it from microbundle-crl to microbundle. I changed the code style and lint rules though... https://github.com/mr-ristic/create-react-library

[jkauszler]

I've updated to 17.0.2 but am still required to import React directly.

I was however able to use "dev": "microbundle-crl watch --jsxFragment React.Fragment --no-compress --format modern,cjs" from https://github.com/developit/microbundle/issues/564#issuecomment-593146626 to skip manual importing of Fragment.

[zachkaigler]

@joaolucasgtr I updated my package.json to resemble yours (with a few minor changes) but running npm install gives me errors with the dependency tree before it ultimately fails. Did you not have this issue?