Unable to import CSS with "babel-plugin-react-css-modules" - get "ParseError: Unexpected token"

Question

Please see https://github.com/gajus/babel-plugin-react-css-modules/issues/162 for full description of issue.

Git repo = https://github.com/basher/react-no-webpack

This is a simple POC / scaffold for a React UI lib without Webpack or Gulp but it must support CSS Modules + Sass.

I'm just trying to use Babel + Browserify.
And executing NPM scripts directly from "package.json".

I have a sample widget component that imports a CSS file, and another that imports a Sass file. The error happens when parsing the content of both CSS + Sass files - e.g. transpiler does not understand "." in the class selector.

Here's the specific error:

$ npm run watch

> [email protected] watch C:\...path-to-project-folder...\react-no-webpack
> watchify ./src/index.js -o ./build/bundle.js -t babelify -v


C:\...path-to-project-folder...\react-no-webpack\src\lib\components\WidgetCSS\WidgetCSS.css:1
.widget {
^
ParseError: Unexpected token

Edit / Update:

I've done some more investigation, and have asked a question in react-css-modules repo too = https://github.com/gajus/react-css-modules/issues/268

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

+50

ParseError: Unexpected token mean your babel not understand css syntax

react-css-modules module need transpiler css like webpack, read for more detail.

For your case you can use css-modulesify.

1) Install css modulesify

$ npm install --save css-modulesify

2) Update your package json script

"build": "browserify ./src/index.js -p [ css-modulesify -o ./build/main.css ] -o ./build/bundle.js -t babelify",
"watch": "watchify ./src/index.js -p [ css-modulesify -o ./build/main.css ] -o ./build/bundle.js -t babelify -v"

remember to include ./build/main.css to index.html for css.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 10, 2018 at 15:27

hendrathings

3,78520 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

basherkev Over a year ago

Thanks @hendrathings 2 comments about your answer: 1. babel-plugin-react-css-modules claims to work without Webpack, and with browserify. This is why I'm seeking help as there is quite clearly an issue with this actually working as expected. 2. css-modulesify is highly experimental and has not been updated for 8 months. I've chosen to ignore this package.

hendrathings Over a year ago

@basherkev react-css-module need 2 setup either webpack or browserfy. Please check github.com/gajus/react-css-modules#browserify for detail. It's says, if use browserfy refer to css-modulesify.

hendrathings Over a year ago

also, babel-plugin-react-css-modules claims to work without Webpack where is you find this? The docs use webpack, check here: github.com/gajus/babel-plugin-react-css-modules#installation. If you see the demo, it is using webpack.

hendrathings Over a year ago

There is no way without webpack or css-modulesify. It will throw error ParseError: Unexpected token because javascript trying parse css syntax.

basherkev · Accepted Answer · 2018-03-12 22:31:43Z

1

Thanks @hendrathings - you are correct.

I must have misread the docs, or read about a non-webpack setup somewhere else. I've read so many articles recently that I have probably confused myself!

I have followed your suggestion - I'm now using css-modulesify.

I have a working example POC UI lib with minimal React + CSS Modules config, with both CSS and Sass syntax (using a couple of example PostCSS plugins). This can be found in my updated https://github.com/basher/react-no-webpack repo.

answered Mar 12, 2018 at 22:31

basherkev

831 silver badge6 bronze badges

Collectives™ on Stack Overflow

Unable to import CSS with "babel-plugin-react-css-modules" - get "ParseError: Unexpected token"

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related