Issue working with react-granim

I tried your example zip to compare it with a local project that i’m having an issue on. I’ve tracked it down to the react-granim library, but i’m not sure why it’s throwing an error.

If I remove this library, the issue goes away and i’m able to create the sitemap.

Below are the files I either added or modified in order to get your example to throw the error.

Issue

console

$ node sitemap-builder.js 
/home/user/dev/examples/react-sitemap/node_modules/react-granim/lib/index.js:11
import React, { Component } from 'react';
       ^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Module._compile (/home/user/dev/examples/react-sitemap/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Object.newLoader [as .js] (/home/user/dev/examples/react-sitemap/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)

How to replicate the issue

Add the react-granim library console

$ yarn add react-granim

I created a dummy component and added the granim library there for testing ./components/TestSection2.js

import React, { Component } from 'react';
import Granim from 'react-granim';

const granimColor = ({"default-state": {gradients: [['#FE802D', '#D04ED6'],['#D04ED6', '#FF9C3F']]}});

class TestSection2 extends Component {

  render() {

    return (
      <div>
        <h2>Test Section 2</h2>
        <Granim states={granimColor} />
      </div>
    )
  }
}

export default TestSection2;

App.js

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
import { default as Routes } from './router';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        {Routes}
      </BrowserRouter>
    );
  }
}

export default App;

router.js *Note, you’'ll notice the other two components are missing, they were just for isolation testing.

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';

import TestSection from './components/TestSection';
import TestSection2 from './components/TestSection2';
import TestSection3 from './components/TestSection3';

export default (
	<Switch>
		<Route exact path='/' component={TestSection} />
		<Route path='/about' component={TestSection2} />
		<Route path='/projects'>
			<Route path=':projectName'>
				<Route path='view' />
			</Route>
		</Route>
		<Route path='/contacts' component={TestSection3} />
		<Route path='/auth' component={TestSection3}/>
		<Redirect from='/home' to='/' />
		<Route path='*' component={TestSection3}/>
	</Switch>
);

[dougmorin]

Thank you, that worked! I tried to ignore the entire node_modules folder before but it didn’t work.

[kuflash]

@dougmorin you need add ignore: [/node_modules\/(?!react-granim)/] in babel.config.js