Get error after `yarn dev`

yarn dev cause ReferenceError: Element is not defined

How to repeat

git clone https://github.com/wellyshen/react-cool-starter.git
cd react-cool-starter
rm yarn.lock
yarn
yarn dev

Full error log

/react-cool-starter/node_modules/react-router-dom/cjs/react-router-dom.js:209
    current: PropTypes.instanceOf(Element)
                                  ^

ReferenceError: Element is not defined
    at Object.<anonymous> (/react-cool-starter/node_modules/react-router-dom/cjs/react-router-dom.js:209:35)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Module._compile (/react-cool-starter/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Object.newLoader [as .js] (/react-cool-starter/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:20:18)

system:

mac os node v11.7.0 yarn v1.13.0 npm v6.5.0

Dependencies

"dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.3.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "asset-require-hook": "^1.2.0",
    "autoprefixer": "^9.4.7",
    "axios": "^0.18.0",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "better-npm-run": "^0.1.1",
    "chalk": "^2.4.2",
    "compression": "^1.7.3",
    "connected-react-router": "^6.3.1",
    "cross-spawn": "^6.0.5",
    "css-modules-require-hook": "^4.2.3",
    "express": "^4.16.4",
    "helmet": "^3.15.1",
    "history": "^4.7.2",
    "hpp": "^0.2.2",
    "html-minifier": "^3.5.21",
    "lodash": "^4.17.11",
    "morgan": "^1.9.1",
    "node-sass": "^4.11.0",
    "normalize.css": "^8.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.2",
    "react-dev-utils": "^7.0.3",
    "react-dom": "^16.8.2",
    "react-helmet": "^5.2.0",
    "react-hot-loader": "^4.6.5",
    "react-loadable": "^5.5.0",
    "react-redux": "^6.0.0",
    "react-router": "^4.4.0-beta.6",
    "react-router-config": "^4.4.0-beta.6",
    "react-router-dom": "^4.4.0-beta.6",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "serialize-javascript": "^1.6.1",
    "serve-favicon": "^2.5.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.3",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-istanbul": "^5.1.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "compression-webpack-plugin": "^2.0.0",
    "coveralls": "^3.0.2",
    "css-hot-loader": "^1.4.3",
    "css-loader": "^2.1.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "eslint": "^5.3.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-import-resolver-webpack": "^0.11.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-lodash": "^5.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.11.0",
    "file-loader": "^3.0.1",
    "flow-bin": "^0.93.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "husky": "^1.3.1",
    "identity-obj-proxy": "^3.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "jest": "^24.1.0",
    "lint-staged": "^8.1.4",
    "lodash-webpack-plugin": "^0.11.5",
    "mini-css-extract-plugin": "^0.5.0",
    "nock": "^10.0.6",
    "nodemon": "^1.18.10",
    "npm-run-all": "^4.1.5",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss": "^7.0.14",
    "postcss-loader": "^3.0.0",
    "prettier": "^1.16.4",
    "raf": "^3.4.1",
    "react-test-renderer": "^16.8.2",
    "redux-mock-store": "^1.5.3",
    "rimraf": "^2.6.3",
    "sass-loader": "^7.1.0",
    "stylelint": "^9.10.1",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-scss": "^3.5.3",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.4",
    "webpack-bundle-analyzer": "^3.0.4",
    "webpack-cli": "^3.2.3",
    "webpack-dev-middleware": "^3.5.2",
    "webpack-hot-middleware": "^2.24.3",
    "webpack-manifest-plugin": "^2.0.4"
  },

[mattcarlotta]

Alrighty, round 2! There appears to be a problem with using webpack’s alias and babel/register. So here’s a work around:

Step 1: Run yarn add -D babel-plugin-module-resolver Step 2: OPTIONAL - Run yarn remove react-router-dom Step 3: Run yarn add temp-react-router-dom Step 4: In the package.json’s babel config, add the following to the plugins:

"plugins": [
      [
        "module-resolver",
        {
          "alias": {
            "react-router-dom": "temp-react-router-dom"
          }
        }
      ],

Step 5: Continue to use react-router-dom for import statements.

[parties]

Alrighty, round 2! There appears to be a problem with using webpack’s alias and babel/register. So here’s a work around:

Step 1: Run yarn add -D babel-plugin-module-resolver Step 2: OPTIONAL - Run yarn remove react-router-dom Step 3: Run yarn add temp-react-router-dom Step 4: In the package.json’s babel config, add the following to the plugins:

"plugins": [
      [
        "module-resolver",
        {
          "alias": {
            "react-router-dom": "temp-react-router-dom"
          }
        }
      ],

Step 5: Continue to use react-router-dom for import statements.

As of the latest NPM release (v6.9.0) there is now support for aliasing packages. I was able to accomplish the same thing without a change to my babel configuration by installing the packages like so:

npm install react-router-dom@npm:temp-react-router-dom

Side note: it looks like there aren’t docs yet for the aliasing function within the install docs, but I was able to deduce the functionality from the corresponding test, found in test/tap/aliases.js here.