Sitemap-generator fails at CSS import (`SyntaxError: Unexpected identifier`) in JS Component

[mwoz123]

I get SyntaxError: Unexpected identifier on CSS import.

In my Main.js I've CSS import: import "./Main.css";

with comented out above line it fails on CSS import in another JS file.

Error:

 babel-node src/sitemap-builder.js

/home/marcin/workspace/barbershop/src/components/Main.css:1
#main {
^^^^^

SyntaxError: Unexpected identifier
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Object.newLoader [as .js] (/home/marcin/workspace/barbershop/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/home/marcin/workspace/barbershop/src/components/Main.js:7:1)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! barber@1.0.0 sitemap: `babel-node src/sitemap-builder.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the barber@1.0.0 sitemap script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/marcin/.npm/_logs/2021-09-11T09_19_27_683Z-debug.log

my .babelrc :

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Router:

import React, { Component } from 'react'
import {
    BrowserRouter as Router,
    Route,
  } from "react-router-dom";

import Main from './components/Main'
import AboutUs from './components/AboutUs'
import Gallery from './components/Gallery/Gallery';
import Contact from './components/Contact';
import Common from './components/Common';
import Licenses from './components/Licenses';
import Footer from './components/Footer';
import NotFound from './components/NotFound404/NotFound';
import Cookies from './components/Cookies';
import BooksyPopup from './components/BooksyPopup/BooksyPopup';

export class BarberRouter extends Component {
    constructor(props) {
      super(props);
      this.state = {
        showCalendar: false
      }
      this.handleShowBookyCalendar = this.handleShowBookyCalendar.bind(this);
      this.handleHideBooksyCalendar = this.handleHideBooksyCalendar.bind(this);
    }

    render() {
      return (
        <Router>

          <Route path="/404">
            <Common onClickShowCalendar={this.handleShowBookyCalendar}></Common>
            <NotFound></NotFound>
            <BooksyPopup showCalendar={this.state.showCalendar} onCloseModal={this.handleHideBooksyCalendar}></BooksyPopup>
            <Footer></Footer>
          </Route>

          <Route path="/licenses" >
            <Common onClickShowCalendar={this.handleShowBookyCalendar}></Common>
            <Licenses></Licenses>
            <BooksyPopup showCalendar={this.state.showCalendar} onCloseModal={this.handleHideBooksyCalendar}></BooksyPopup>
            <Footer></Footer>
          </Route>

          <Route exact path="/">
              <Common onClickShowCalendar={this.handleShowBookyCalendar} ></Common>
             <Main onClickShowCalendar={this.handleShowBookyCalendar}></Main>
              <BooksyPopup showCalendar={this.state.showCalendar} onCloseModal={this.handleHideBooksyCalendar}></BooksyPopup>
              <AboutUs></AboutUs>
              <Gallery></Gallery>
            <Contact></Contact>
            <Footer></Footer>
           </Route>

        </Router>
      )
    }

    handleShowBookyCalendar() {
      this.setState({ showCalendar: true })
    }

    handleHideBooksyCalendar() {
      this.setState({showCalendar: false})
    }
  }

Main.js is class compoment (export default class Main extends Component {)

My depenedecies:

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "is-mobile": "^2.2.1",
    "js-cookie": "^2.2.0",
    "luxbar": "^0.3.2",
    "photoswipe": "^4.1.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-lazyload": "^2.6.5",
    "react-router-dom": "5.1.2",
    "react-router-hash-link": "^1.2.2",
    "react-scripts": "^3.4.1",
    "smooth-scroll": "16.1.2"
  },
  "devDependencies": {
    "@babel/node": "^7.15.4",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-plugin-react-css-modules": "^5.2.6",
    "babel-register": "6.26.0",
    "cypress": "8.3.1",
    "eruda": "^2.0.2",
    "firebase-tools": "^6.3.1",
    "husky": "^1.3.1",
    "image-size": "^0.8.3",
    "jimp": "^0.12.1",
    "license-report": "^3.0.0",
    "react-router-sitemap-generator": "^0.0.8",
    "serve": "^11.3.2",
    "start-server-and-test": "^1.11.7"
  }

[bashirdk]

Did you manage to resolve this?

I'm running into a similar issue

.shp0 { fill: #000000; }
^

SyntaxError: Unexpected token '.'

[hannasage]

Same issue here, unexpected . 🤷🏼