Get error after `yarn dev` #214

taime · 2019-03-06T12:01:38Z

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"
  },

The text was updated successfully, but these errors were encountered:

taime · 2019-03-07T11:56:42Z

Does somebody use this boilerplate? Am I the only won how tried yarn dev ?
how do you use it without yarn dev ?

taime · 2019-03-07T12:17:43Z

Here is the solution:
add this line:
var Element = typeof Element === "undefined" ? function () {} : Element;
in node_modules/react-router-dom/cjs/react-router-dom.js at 208s

mattcarlotta · 2019-03-09T01:54:13Z

I noticed this error too. Seems to happen randomly. Affects npm and yarn. Doesn't appear to be fixed in react-router-dom@4.4.0-beta7 either. While the above fix may work, it shouldn't be considered a long-term viable solution.

wellyshen · 2019-03-09T11:31:32Z

Waiting for the release of react-router to fix this bug (refer : remix-run/react-router#6607)

taime · 2019-03-09T19:21:36Z

How to prevent react-router-dom.js from been rewritten?
(Every day I had to do this fix, and next day again i see original react-router-dom.js in node_modules folder, and again I see this error....)

wellyshen · 2019-03-10T06:22:49Z

@taime You can fork it and release a fixed version of repo. Then install the react-router-dom of yours.

mattcarlotta · 2019-03-10T07:49:01Z

I published a temporary fix, as such, this package will not be maintained and should only be used for development purposes only. The package is react-router-dom with the patch added, so technically you don't need react-router-dom as a dependency. However, if react-router-dom is ever updated beyond 4.4.0-beta.7, remove this package.

Click here for installation instructions.

wellyshen · 2019-03-11T13:21:52Z

@mattcarlotta Great solution atm 👍

taime · 2019-03-12T05:45:29Z

@taime You can fork it and release a fixed version of repo. Then install the react-router-dom of yours.

@wellyshen How to install react-router-dom from fork?

taime · 2019-03-12T06:46:12Z

@mattcarlotta doesn't work, still got

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

ReferenceError: Element is not defined

mattcarlotta · 2019-03-12T08:05:57Z

@taime I see the problem. I'll try to fix it later.

mattcarlotta · 2019-03-12T10:16:18Z

@taime I managed to fix the problem for the time being. Remove the old temp-react-router-dom package and reinstall. Remove the alias from the webpack.babel.config and you'll need to change all react-router-dom imports to temp-react-router-dom imports. I'll look for a better solution in the coming days.

wellyshen · 2019-03-12T10:57:11Z

@taime Plz refer here

taime · 2019-03-12T15:33:30Z

@martin2786 about your idea with aliaces, may be something like this should work

if (stage.startsWith('develop') && config.resolve) {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-dom': '@hot-loader/react-dom'
    }

@wellyshen thanks, but it looks like, I can not find in react-router repo place that should be fixed as I wrote above. Here is my fork repo https://github.com/taime/react-router, and I cant find react-router-dom.js there.

wellyshen · 2019-03-12T16:42:14Z

@taime After you build the library of react-router-dom, you can find where it's in here

mattcarlotta · 2019-03-12T17:44:04Z

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.

taime · 2019-03-14T14:01:55Z

@mattcarlotta
Did exactly this steps. Got this error:

/Users/tema/Sites/controlumMTS/SkedFrontend/node_modules/@babel/core/lib/config/full.js:135
    throw e;
    ^

Error: [BABEL] /Users/tema/Sites/controlumMTS/SkedFrontend/tools/webpack/hooks.js: .alias is not a valid Plugin property
    at Object.keys.forEach.key (/Users/tema/Sites/controlumMTS/SkedFrontend/node_modules/@babel/core/lib/config/validation/plugins.js:52:56)
    at Array.forEach (<anonymous>)
    at validatePluginObject (/Users/tema/Sites/controlumMTS/SkedFrontend/node_modules/@babel/core/lib/config/validation/plugins.js:50:20)

Have you tried this steps for yourself for clean install react-cool-starte? Does it work?

taime · 2019-03-14T14:32:39Z

By the way, I've found another solution.
just install "react-router-dom": "4.4.0-beta.6"

steps:

1) run

git clone https://github.com/wellyshen/react-cool-starter.git
cd react-cool-starter

2) edit package.json and change react-router-dom": "^4.4.0-beta.6 to react-router-dom": "4.4.0-beta.6

3) run

yarn
yarn dev

mattcarlotta · 2019-03-14T14:51:44Z

@taime Your problem is here:

Error: [BABEL] /Users/tema/Sites/controlumMTS/SkedFrontend/tools/webpack/hooks.js: .alias is not a valid Plugin property

You've added an .alias in the webpack/hooks file.

Anyway, try this forked version.

parties · 2019-03-15T18:55:02Z

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.

mattcarlotta · 2019-03-15T19:14:56Z

@parties Great find! That works well with one caveat: It shows up as installing react-router-dom, which may confuse inexperienced/unaware developers:

success Saved 1 new dependency.
info Direct dependencies
└─ react-router-dom@4.4.0-beta.82
info All dependencies
└─ react-router-dom@4.4.0-beta.82

Since this just a temporary fix, I want to make sure it's obvious that react-router-dom isn't installed and that temp-react-router-dom is an alias for react-router-dom.

wellyshen · 2019-03-16T18:31:29Z

Fixed in v2.8.5

taime changed the title ~~yarn dev cause ReferenceError: Element is not defined~~ yarn dev cause error: "ReferenceError: Element is not defined" Mar 7, 2019

taime changed the title ~~yarn dev cause error: "ReferenceError: Element is not defined"~~ Get error after yarn dev Mar 7, 2019

wellyshen added the bug label Mar 9, 2019

mattcarlotta mentioned this issue Mar 13, 2019

ReferenceError: Element is not defined remix-run/react-router#6610

Closed

wellyshen closed this as completed Mar 16, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Get error after `yarn dev` #214

Get error after `yarn dev` #214

taime commented Mar 6, 2019 •

edited

taime commented Mar 7, 2019

taime commented Mar 7, 2019

mattcarlotta commented Mar 9, 2019 •

edited

wellyshen commented Mar 9, 2019

taime commented Mar 9, 2019

wellyshen commented Mar 10, 2019 •

edited

mattcarlotta commented Mar 10, 2019 •

edited

wellyshen commented Mar 11, 2019

taime commented Mar 12, 2019

taime commented Mar 12, 2019 •

edited

mattcarlotta commented Mar 12, 2019 •

edited

mattcarlotta commented Mar 12, 2019 •

edited

wellyshen commented Mar 12, 2019 •

edited

taime commented Mar 12, 2019

wellyshen commented Mar 12, 2019

mattcarlotta commented Mar 12, 2019 •

edited

taime commented Mar 14, 2019

taime commented Mar 14, 2019 •

edited

mattcarlotta commented Mar 14, 2019 •

edited

parties commented Mar 15, 2019

mattcarlotta commented Mar 15, 2019

wellyshen commented Mar 16, 2019

Get error after yarn dev #214

Get error after yarn dev #214

Comments

taime commented Mar 6, 2019 • edited

How to repeat

Full error log

system:

Dependencies

taime commented Mar 7, 2019

taime commented Mar 7, 2019

mattcarlotta commented Mar 9, 2019 • edited

wellyshen commented Mar 9, 2019

taime commented Mar 9, 2019

wellyshen commented Mar 10, 2019 • edited

mattcarlotta commented Mar 10, 2019 • edited

wellyshen commented Mar 11, 2019

taime commented Mar 12, 2019

taime commented Mar 12, 2019 • edited

mattcarlotta commented Mar 12, 2019 • edited

mattcarlotta commented Mar 12, 2019 • edited

wellyshen commented Mar 12, 2019 • edited

taime commented Mar 12, 2019

wellyshen commented Mar 12, 2019

mattcarlotta commented Mar 12, 2019 • edited

taime commented Mar 14, 2019

taime commented Mar 14, 2019 • edited

mattcarlotta commented Mar 14, 2019 • edited

parties commented Mar 15, 2019

mattcarlotta commented Mar 15, 2019

wellyshen commented Mar 16, 2019

Get error after `yarn dev` #214

Get error after `yarn dev` #214

taime commented Mar 6, 2019 •

edited

mattcarlotta commented Mar 9, 2019 •

edited

wellyshen commented Mar 10, 2019 •

edited

mattcarlotta commented Mar 10, 2019 •

edited

taime commented Mar 12, 2019 •

edited

mattcarlotta commented Mar 12, 2019 •

edited

mattcarlotta commented Mar 12, 2019 •

edited

wellyshen commented Mar 12, 2019 •

edited

mattcarlotta commented Mar 12, 2019 •

edited

taime commented Mar 14, 2019 •

edited

mattcarlotta commented Mar 14, 2019 •

edited