gajus / gajus/babel-plugin-react-css-modules

Does it work with Browserify?

Open
#263 0 comments 0 reactions 0 assignees View on GitHub
question
Dominant language
JavaScript
Stars
2k
Forks
159
PR merge metrics
No merged PRs in 30d

Description

Does this plugin work with babelify? (browserify plugin for babel)

I've been trying to make it work but no luck, here is my Gulp task:

```js
gulp.task('react', function() {
const b = browserify({
entries: path.join(webContentDir, 'app/index.js'),
extensions: ['.js', '.jsx'],
debug: true,
transform: [
babelify.configure({
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins: [
['@babel/transform-react-jsx', {'pragma': 'h'}],
['babel-plugin-react-css-modules']
]
})
]
});
return b.bundle()
.pipe(source(path.join(webContentDir, 'dist/bundle.js')))
.pipe(gulp.dest('.'));
});
```

When I import a CSS file it seems to not process it with this plugin at all (as if I don't include it):

```
.answer-input {
^
ParseError: Unexpected token
```

Any ideas why it's not working?

```
"@babel/core": "^7.4.5",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-plugin-react-css-modules": "^5.2.6",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the shown Gulp task and its Browserify babelify transform configuration, then check how the CSS import reaches babel-plugin-react-css-modules. Reproduce the Unexpected token error with the listed package versions and verify that the imported CSS is processed instead of being parsed as JavaScript.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, css, javascript, react
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.