gajus / gajus/babel-plugin-react-css-modules
Does it work with Browserify?
- 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