[Bug] react-static-react-router plugin breaks

Reporting a bug?

I created a “blank” project using react-static create and it works when running yarn start right after.

But as soon as I add react-static-plugin-react-router (as stated in this guide) to my project and start using it in static.config I get this error in the terminal after running yarn start :

[❌] Application bundling failed  
/.../client/node_modules/@babel/runtime/helpers/esm/extends.js 1:0-47  
"export 'default' was not found in '../extends/_index.mjs'  
    @ /.../client/node_modules/react-router-dom/esm/react-router-dom.js  
    @ /.../client/node_modules/react-static-plugin-react-router/browser.api.js  
    @ /.../client/artifacts/react-static-browser-plugins.js  
    @ ../lib/bootstrapPlugins.js  
    @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js  
/.../client/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js 1:0-53
"export 'default' was not found in '../inheritsLoose/_index.mjs'
     @ /.../client/node_modules/react-router-dom/esm/react-router-dom.js
     @ /.../client/node_modules/react-static-plugin-react-router/browser.api.js
     @ /.../client/artifacts/react-static-browser-plugins.js
     @ ../lib/bootstrapPlugins.js
     @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js
/.../client/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js 1:0-68
"export 'default' was not found in '../objectWithoutPropertiesLoose/_index.mjs'
     @ /.../client/node_modules/react-router-dom/esm/react-router-dom.js
     @ /.../client/node_modules/react-static-plugin-react-router/browser.api.js
     @ /.../client/artifacts/react-static-browser-plugins.js
     @ ../lib/bootstrapPlugins.js
     @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js
/.../client/node_modules/@babel/runtime/helpers/esm/typeof.js 1:0-46
"export 'default' was not found in '../typeof/_index.mjs'
     @ /.../client/node_modules/react-helmet/es/Helmet.js
     @ ../lib/index.js
     @ /.../client/node_modules/react-static-plugin-react-router/browser.api.js
     @ /.../client/artifacts/react-static-browser-plugins.js
     @ ../lib/bootstrapPlugins.js
     @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js

I tried adding react-hot-loader manually but i still get these errors.

I did the exact same thing about 1 month ago when installing react-static for the first time and it worked perfectly…

I may be missing something really basic here but I could’t figure out what and why it doesn’t work right away.

Environment

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 258.79 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.7.0 - ~/.nvm/versions/node/v13.7.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.5.6 - ~/.nvm/versions/node/v13.7.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 88.0.4324.192
    Firefox: 85.0
    Safari: 14.0
  npmPackages:
    babel-eslint: ^10.1.0 => 10.1.0 
    eslint: ^7.20.0 => 7.20.0 
    eslint-config-react-app: ^6.0.0 => 6.0.0 
    eslint-config-react-tools: ^1.1.7 => 1.1.7 
    eslint-plugin-flowtype: ^5.2.2 => 5.3.1 
    eslint-plugin-import: ^2.22.1 => 2.22.1 
    eslint-plugin-jsx-a11y: ^6.4.1 => 6.4.1 
    eslint-plugin-react: ^7.22.0 => 7.22.0 
    react: ^16.14.0 => 16.14.0 
    react-dom: ^16.14.0 => 16.14.0 
    react-hot-loader: ^4.13.0 => 4.13.0 
    react-router: ^5.2.0 => 5.2.0 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-static: ^7.5.1 => 7.5.3 
    react-static-plugin-reach-router: ^7.5.1 => 7.5.3 
    react-static-plugin-react-router: ^7.5.3 => 7.5.3 
    react-static-plugin-sitemap: ^7.5.1 => 7.5.3 
    react-static-plugin-source-filesystem: ^7.5.1 => 7.5.3 
    serve: ^11.3.2 => 11.3.2 
  npmGlobalPackages:
    appfairy: 0.8.2
    npm: 7.5.6

Here is my static.config.js :

export default {
  maxThreads: 1, // Remove this when you start doing any static generation,
  plugins: ["react-static-plugin-react-router"],
};

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

1. run react-static create and follow the steps to create a blank project
2. cd into the project
3. run yarn add react-static-plugin-react-router react-router-dom react-router
4. adding react-static-plugin-react-router to static.config.js plugins
5. run yarn start

Expected Behavior

Project runs smoothly after yarn start

Reproducible Demo

[TriDotS]

@complexanomaly

I was having a similar problem (not with react-static-react-router). Resolved by:

I tried but it doesn’t work for me and I also compare my old yarn.lock with the new one.

Background: Its not react-router that broke it. For me it seems a bug in the @babel/runtime. There was a bug in release v7.13.0 probably with results in a bug fix in release 7.13.2 Correctly update module.exports.default of typeof This sounds quite similar to the error message above.

Solution: I force the resolution to @babel/runtime@7.12.18 to get a workaround.

my package.json

{
  "scripts": { [...] },
  "dependencies": {
    [...]
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-static": "^7.5.1",
    "react-static-plugin-react-router": "^7.5.3",
    [...]
  },
  "devDependencies": { [...] },
  "resolutions": {
    "**/react-universal-component": "4.0.1",
    "@babel/runtime": "7.12.18"
  }
}
––––––––
rm -rf node_modules yarn.lock && yarn install && yarn start
––––––––
yarn build

From here and only to be sure I removed the "@babel/runtime": "7.12.18"resolution to test it again with a complete fresh install.

after rollback:

rm -rf node_modules yarn.lock && yarn install && yarn start
––––––––
yarn run v1.22.10
$ react-static start
Starting Development Server...
Fetching Site Data...
[✓] Site Data Downloaded
Building Routes...
Importing routes from directory...
{ has404: true }
[✓] Routes Built (0.2s)
Building Templates...
[✓] Templates Built
Bundling Application...
Fetching Site Data...
[✓] Site Data Downloaded
Running plugins...
[✓] Application Bundled (10.3s)
[✓] App serving at http://localhost:3000

[TriDotS]

I thought, judging from my screenshot, the problem still seems to exist. The one commit sounded promising. I honestly have to say that I’m really confused by all the dependencies and cross-references. I only came up with it because I had a lot to do with babel through rollup.js.