Issues with babel jsx transform

[loganmurphy]

I am having issues with babel jsx transform following the steps in this article (it's a bit old but seems valid) https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html. I am trying to remove the need to import React into every component that uses JSX and can't seem to figure out how to get that working with this library. The relevant parts of my package.json and babel.config.js are as follows:

// package.json
{
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.js",
  "files": [
    "dist"
  ],
  "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": "^16.0.0",
    "react-html-parser": "^2.0.2",
    "lodash": "^4.17.19",
    "@material-ui/core": "^4.11.0",
    "react-redux": "^7.1.1",
    "redux": "^4.0.1",
    "redux-localstorage": "^0.4.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "react-router-dom": "^5.1.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "react-svg": "^12.0.0",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "microbundle-crl": "^0.13.10",
    "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",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "babel-plugin-module-resolver": "^3.2.0"
  },
  "dependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "node-sass": "^7.0.0"
   }
}

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'automatic'
      }
    ]
  ],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          src: './src',
          actions: './src/actions',
          components: './src/components',
          constants: './src/constants',
          contexts: './src/contexts',
          hoc: './src/hoc',
          selectors: './src/selectors',
          styles: './src/styles',
          themes: './src/themes',
          utils: './src/utils'
        },
        extensions: ['.js', '.jsx', '.es', '.es6', '.mjs', '.scss']
      }
    ]
  ]
}

[worthlutz]

create-react-library has not been updated in a while so I wrote the script below to help me get things working. I'll post it here to give you a start if you have not figured out your problem. It is a work in progress and therefore your mileage may vary.

#! /bin/bash
# this script updates a new library package created by create-react-app
# npx create-react-app new-library

## updates for React v17
echo "  update to REACT v17"
# update peerDependencies line in package.json
sed -i '/"react": "\^16.0.0"/c\    "react": "\^17.0.0"' package.json
# update react version line in .eslintrc
sed -i '/"version": "16"/c\      "version": "17"' .eslintrc
# fix for react in jsx
sed -i '/"react\/jsx-fragments"/a\    "react/jcx-uses-react": 0,' .eslintrc
sed -i '/"react\/jsx-fragments"/a\    "react/react-in-jsx-scope": 0,' .eslintrc

# add react to .eslintrc
sed -i '/"standard-react"/a\    "react"' .eslintrc

# change from microbundle-crl to microbundle
sed -i '/"scripts": {/a\    "mb": "microbundle --jsx \x27React.createElement\x27 --jsxImportSource react --globals react/jsx-runtime=jsx --format modern,cjs",' package.json
sed -i '/"build":/c\    "build": "npm run mb",' package.json
sed -i '/"start":/c\    "start": "npm run mb watch --no-compress",' package.json

# fix for eslint-config-prettier >v8
echo "  update .eslinrc for eslint-config-prettier >v8"
# https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
sed -i '/"prettier\/standard"/c\    "prettier"' .eslintrc
sed -i '/"prettier\/react"/d ' .eslintrc

# add fix create-react-library issue #243  (not needed with microbundle change above)
#echo "  fix create-react-library issue #243"
#sed -i 's/--format modern,cjs/--format modern,cjs --jsxFragment React.Fragment/g' package.json
#sed -i 's/--format modern,cjs/--format modern,cjs --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx/g' package.json

# remove:
#    babel-eslint, replaced with @babel/eslint-parser
#    eslint-plugin-standard - not needed anymore
#    microbundle-crl - replacing with original microbundle
echo "  remove uneeded packages"
npm rm babel-eslint eslint-plugin-standard microbundle-crl

# update all to latest except eslint (others do not work with eslint v8)
# NOTE: there may be other problems with using @latest
# adding microbundle to replace microbundle-crl
echo "  update all packages"
npm install --save-dev \
  @babel/eslint-parser \
  cross-env@latest \
  eslint@7.32.0 \
  eslint-config-prettier@latest \
  eslint-config-standard@latest \
  eslint-config-standard-react@latest \
  eslint-plugin-import@latest \
  eslint-plugin-node@latest \
  eslint-plugin-prettier@latest \
  eslint-plugin-promise@latest \
  eslint-plugin-react@latest \
  gh-pages@latest \
  microbundle@latest \
  npm-run-all@latest \
  prettier@latest \
  react@latest \
  react-dom@latest \
  react-scripts@latest \

## update .gitignore and .editorconfig
echo "  update .gitignore and .editorconfig"
cp ../scripts/misc-files/.editorconfig .
cp ../scripts/misc-files/.gitignore .

git status