Parser Error while generating sitemap using react router site map

[mailtomohana4918]

Here is my routes.js
import React from 'react';
import { Route } from 'react-router';

//Lazy
const Homepage = lazy(() => import('@views/homepage'));
export default (

<Route exact path="/" component={() => } />

);

Error:

[email protected] sitemap /Users/gurrkr/sitemapgenerator
babel-node src/sitemap/sitemap-generator.js

/Users/gurrkr/sitemapgenerator/node_modules/babel-core/lib/transformation/file/index.js:558
throw err;
^

SyntaxError: /Users/gurrkr/sitemapgenerator/src/sitemap/sitemap-routes.js: Unexpected token (5:28)
3 |
4 | //Lazy

5 | const Homepage = lazy(() => import('@views/homepage'));
| ^
6 | export default (
7 |
8 | <Route exact path="/" component={() => } />
at Parser.pp$5.raise (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:4454:13)
at Parser.pp.unexpected (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp$3.parseExprAtom (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:3627:50)
at Parser.parseExprAtom (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:7238:22)
at Parser.pp$3.parseExprSubscripts (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:3494:19)
at Parser.pp$3.parseMaybeUnary (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:3474:19)
at Parser.pp$3.parseExprOps (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:3404:19)
at Parser.pp$3.parseMaybeConditional (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:3381:19)
at Parser.pp$3.parseMaybeAssign (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:3344:19)
at Parser.parseMaybeAssign (/Users/gurrkr/sitemapgenerator/node_modules/babylon/lib/index.js:6474:20) {
pos: 101,
loc: Position { line: 5, column: 28 },
_babel: true,
codeFrame: '\u001b[0m \u001b[90m 3 | \u001b[39m\n' +
' \u001b[90m 4 | \u001b[39m\u001b[90m//Lazy\u001b[39m\n' +
"\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 5 | \u001b[39m\u001b[36mconst\u001b[39m \u001b[33mHomepage\u001b[39m \u001b[33m=\u001b[39m lazy(() \u001b[33m=>\u001b[39m \u001b[36mimport\u001b[39m(\u001b[32m'@views/homepage'\u001b[39m))\u001b[33m;\u001b[39m\n" +
' \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n' +
' \u001b[90m 6 | \u001b[39m\u001b[36mexport\u001b[39m \u001b[36mdefault\u001b[39m (\n' +
' \u001b[90m 7 | \u001b[39m \u001b[33m<\u001b[39m\u001b[33mRoute\u001b[39m\u001b[33m>\u001b[39m\n' +
' \u001b[90m 8 | \u001b[39m \u001b[33m<\u001b[39m\u001b[33mRoute\u001b[39m exact path\u001b[33m=\u001b[39m\u001b[32m"/"\u001b[39m component\u001b[33m=\u001b[39m{() \u001b[33m=>\u001b[39m \u001b[33m<\u001b[39m\u001b[33mHomepage\u001b[39m \u001b[35m/>} /\u001b[39m\u001b[33m>\u001b[39m\u001b[0m'
}

Can you please provide a suggestion ?

[mfaizan1]

Facing same issue, i guess it doesn't support lazy loaded components

[isaacsquires]

same issue for me too

[joshbedo]

same issue, this plugin seems really outdated I can't believe there isn't a better solution.

[kmlx]

i'm not sure lazy loading is the problem, as I use it with React's lazy loading without a problem.

what I suspect is going on is babel throwing an error when it encounters this:

'@views/homepage'

in my code I have the following and it works:

import React, { lazy } from 'react';
const Home = lazy(() => import('../Pages/Home/Home'));

---

this is my config in the sitemapGenerator.js file which works for me:

// configure babel since we're running node
require('@babel/register')({
  'presets': [
    [
      '@babel/preset-env',
      { 'targets': { 'esmodules': true } }
    ],
    '@babel/preset-react'
  ],
  'plugins': [
    ['@babel/plugin-proposal-decorators', { 'legacy': true}],
    ['@babel/plugin-proposal-class-properties', { 'loose': true}],
    ['@babel/plugin-transform-modules-commonjs', {
      'allowTopLevelThis': true,
      'loose': true,
      'lazy': true
    }]
  ],
  'ignore': [
    /node_modules/
  ]
});

// remove unnecessary extensions for babel
const noop = function () {};
require.extensions['.css'] = noop;
require.extensions['.mp3'] = noop;
require.extensions['.png'] = noop;

[JeremyBrent]

Any updates on this issue?

[kmlx]

@JeremyBrent fairly sure at this point that this issue has to do with configuring babel inside node, nothing to do with the plugin.

[JeremyBrent]

@kmlx I see. Do you have any resources at hand, besides the config you defined above, that could point me in the right direction?

[krishnarastogi]

any update on this error or which babel version to use to fix the issue? @kuflash

[kmlx]

@krishnarastogi i use this one in package.json

"@babel/register": "7.15.3",

and my config hasn't changed since my last comment. and it still works.

i assume people should try different babel configs until it works for their use case, since you'll be running react inside node.