Using babelify in Gulp, importing css results to unexpected token "{"

Question

I'm importing a css in my jsx, and using gulp with browserify and babelify. Somehow I'm getting this error: error screenshot

I have the following jsx which imports a css:

import '../../css/app.css';

function Square(props) {
    return (
        <button className="squares" onClick={props.onClick}>
          {props.value}
        </button>
        );
} ...

Then I have this in my gulp file:

var bundler = watchify(browserify(files[i], {
    debug : true
}).transform(babelify, {
    ignore : /\.([json]|[css])$/,
    presets : [ 'es2015', 'react', 'env' ]
}), {
    poll : true
}); ...

In my package.json file, I have thos config for browserify:

  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "env",
            "react"
          ]
        }
      ]
    ]
  },

And I have the following dependencies:

  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-env": "^1.5.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "glob": "^7.1.2",
    "gulp": "^3.9.1",
    "gulp-cli": "^1.3.0",
    "gulp-exit": "0.0.2",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^3.0.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.9.0"
  }

As you can see, I may have added more presets that I need, I'm really new to this and I thought that maybe babel doesn't know that it's looking at a css file and treats it as jsx.

Brian · Accepted Answer · 2017-06-28 22:07:45Z

1

I found out what I was missing, "browserify-css".

I changed my gulpfile into:

var bundler = watchify(browserify(files[i], {
    debug : true
}).transform(babelify.configure({
    presets : [ 'es2015', 'react', 'env' ]
})).transform(browserifyCss), {
    poll : true
});

answered Jun 28, 2017 at 22:07

Brian

113 bronze badges

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

Comments

Chris J · Accepted Answer · 2017-12-09 22:48:56Z

1

I would be careful with importing CSS directly like this. It's actually a Webpack-specific feature, and not part of the ES6 spec to arbitrarily import static assets like that. You're now writing source code that directly depends on having browserify-css or webpack, and if you later decide to switch out build systems, it's going to be a hassle to refactor your code to do it the proper way (just including css in a link element in your html file like you would normally)

answered Dec 9, 2017 at 22:48

Chris J

3,8481 gold badge22 silver badges17 bronze badges

1 Comment

Jérôme B Over a year ago

What kind of alternative do you propose?

Collectives™ on Stack Overflow

Using babelify in Gulp, importing css results to unexpected token "{"

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related