cannot find module 'babel-register' while creating react-router-sitemap

322 views Asked by At

I'm trying to create a sitemap.xml for my react app using npm react-router-sitemap but I keep hitting errors in trying to follow the instructions. I created a router.jsx file as instructed:

import React from "react";
import { Routes, Route } from "react-router";

export default (
  <Routes>
    <Route path="/" />
    <Route path="about" />
    <Route path="resources" />
  </Routes>
);

Then I made my sitemap-builder.js file:

require("@babel/register");

const router = require("./router").default;
const Sitemap = require("../").default;

new Sitemap(router).build("mysite.com").save("./sitemap.xml");

When I run this script I get this error:

/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/core/lib/parser/index.js:75
    throw err;
    ^

SyntaxError: /Users/almoni/Desktop/Code/react-sitemap/src/router.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (5:3):

  3 |
  4 | export default (
> 5 |   <Routes>
    |   ^
  6 |     <Route path="/" />
  7 |     <Route path="about" />
  8 |     <Route path="resources" />

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
    at instantiate (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:67:32)
    at constructor (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:364:12)
    at Parser.raise (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:3364:19)
    at Parser.expectOnePlugin (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:3413:18)
    at Parser.parseExprAtom (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:11529:18)
    at Parser.parseExprSubscripts (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:11171:23)
    at Parser.parseUpdate (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:11153:21)
    at Parser.parseMaybeUnary (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:11127:23)
    at Parser.parseMaybeUnaryOrPrivate (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10956:61)
    at Parser.parseExprOps (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10962:23)
    at Parser.parseMaybeConditional (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10937:23)
    at Parser.parseMaybeAssign (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10895:21)
    at /Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10863:39
    at Parser.allowInAnd (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:12640:12)
    at Parser.parseMaybeAssignAllowIn (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10863:17)
    at Parser.parseParenAndDistinguishExpression (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:11817:28)
    at Parser.parseExprAtom (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:11446:23)
    at Parser.parseExprSubscripts (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:11171:23)
    at Parser.parseUpdate (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:11153:21)
    at Parser.parseMaybeUnary (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:11127:23)
    at Parser.parseMaybeUnaryOrPrivate (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10956:61)
    at Parser.parseExprOps (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10962:23)
    at Parser.parseMaybeConditional (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10937:23)
    at Parser.parseMaybeAssign (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10895:21)
    at /Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10863:39
    at Parser.allowInAnd (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:12635:16)
    at Parser.parseMaybeAssignAllowIn (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:10863:17)
    at Parser.parseExportDefaultExpression (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:14171:22)
    at Parser.parseExport (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:14075:25)
    at Parser.parseStatementContent (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:13020:27)
    at Parser.parseStatement (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:12917:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:13497:25)
    at Parser.parseBlockBody (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:13489:10)
    at Parser.parseProgram (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:12832:10)
    at Parser.parseTopLevel (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:12822:25)
    at Parser.parse (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:14674:10)
    at parse (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/parser/lib/index.js:14716:38)
    at parser (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/core/lib/parser/index.js:41:34)
    at parser.next (<anonymous>)
    at normalizeFile (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/core/lib/transformation/normalize-file.js:66:38)
    at normalizeFile.next (<anonymous>)
    at run (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/core/lib/transformation/index.js:21:50)
    at run.next (<anonymous>)
    at transform (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/core/lib/transform.js:22:41)
    at transform.next (<anonymous>)
    at evaluateSync (/Users/almoni/Desktop/Code/react-sitemap/node_modules/gensync/index.js:251:28)
    at sync (/Users/almoni/Desktop/Code/react-sitemap/node_modules/gensync/index.js:89:14)
    at stopHiding - secret - don't use this - v1 (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at Object.transformSync (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/core/lib/transform.js:43:76)
    at exports.transformSync (/Users/almoni/Desktop/Code/react-sitemap/node_modules/@babel/register/lib/worker/transform.js:94:15) {
  code: 'BABEL_PARSE_ERROR',
  reasonCode: 'MissingOneOfPlugins',
  loc: Position { line: 5, column: 2, index: 93 },
  pos: [Getter/Setter],
  missingPlugin: [Getter/Setter]
}

This is the layout of my project and where the aforementioned files are located:

├── package-lock.json
├── package.json
├── public
│   ├── 404.html
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── robots.txt
│   └── site.webmanifest
├── src
│   ├── App.js
│   ├── App.scss
│   ├── components
│   │   ├── footer
│   │   │   ├── index.js
│   │   │   └── style.index.scss
│   │   ├── header
│   │   │   ├── index.js
│   │   │   └── style.index.scss
│   │   └── main
│   │       ├── 404
│   │       │   ├── index.js
│   │       │   ├── notes.txt
│   │       │   └── style.index.scss
│   │       ├── about
│   │       │   ├── index.js
│   │       │   └── style.index.scss
│   │       ├── home
│   │       │   ├── index.js
│   │       │   └── style.index.scss
│   │       ├── index.js
│   │       ├── resources
│   │       │   └── index.js
│   ├── index.js
│   ├── index.scss
    // the important files here
│   ├── router.jsx
│   └── sitemap-builder.js
// file to show this tree lol
└── tree.txt

Are the necessary files in the wrong location? Is that why I'm getting this error? The npm instructions didn't exactly say where to place the files although it may have been obvious and I just didn't pick up on it.

My version of react-router is "^6.3.0", and I'm running node sitemap-builder.js

I originally was looking for what I was doing wrong in trying to create a sitemap, but I would also be interested to know the better way to go about doing this. As in, it's very possible I just am going about this the completely wrong way.

0

There are 0 answers