Parse errors in imported module 'react-router-dom' errors

[tommi-lew-tw]

Read this first

As of time of writing this issue, V7 of this course is releasing soon. You may want to refer to the V7 course for a solution.

Context

This issue occured at the React Capabilities --> Class Properties section of the course.

Issue

I was running into these Parse errors in imported module 'react-router-dom' errors right after adding and configuring the new Babel dependencies.

Parse errors in imported module 'react-router-dom': No Babel config file detected for /path/to/project/node_modules/react-router-dom/esm/react-router-dom.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.

This is highlighted for any files which imports react-router-dom.

Solution

This Github issue (https://github.com/babel/babel/issues/11975) helped. It also explained the root cause. I explicitly specify the .babelrc config file in .eslintrc.json and the error is now gone.

"parserOptions": {
    "babelOptions": {
      "configFile": "./.babelrc"
    }
  }

Note that babelOptions has to be under parserOptions.

If above solution does not work

If the above solution doesn't help doesn't help, there is another solution as a Pull Request in this repo - https://github.com/btholt/complete-intro-to-react-v6/pull/41 . Do take a look too.

Hope it helps!

-- @tommi-lew