Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Doesn't work from package.json

See original GitHub issue

...
"browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "stage-0",
            "react"
          ],
          "plugins": [
            [
              "transform-decorators-legacy"
            ]
          ]
        }
      ],
      [
        "style-templateify"
      ],
      [
        "browserify-css",
        {
          "global": true
        }
      ]
    ]
}
...

SyntaxError: 
/Users/dangreen/github/jam-editor/jam-editor/node_modules/cropper/dist/cropper.css:10
.cropper-container {
^
ParseError: Unexpected token
    at wrapWithPluginError (/Users/dangreen/github/jam-editor/jam-editor/node_modules/gulp-browserify/index.js:44:10)
    at Stream.<anonymous> (/Users/dangreen/github/jam-editor/jam-editor/node_modules/gulp-browserify/index.js:123:28)
    at Stream.<anonymous> (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/index.js:344:22)
    at Stream.<anonymous> (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/index.js:344:22)
    at emitOne (events.js:82:20)
    at Stream.emit (events.js:169:7)
    at Transform.onerror (/Users/dangreen/github/jam-editor/jam-editor/node_modules/stream-combiner/index.js:29:18)
    at emitOne (events.js:82:20)
    at Transform.emit (events.js:169:7)
    at onwriteError (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:250:10)
    at onwrite (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:268:5)
    at WritableState.onwrite (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:106:5)
    at afterTransform (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_transform.js:104:5)
    at TransformState.afterTransform (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_transform.js:79:12)
    at Transform._transform (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/index.js:585:25)
    at Transform._read (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at Transform._write (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:237:10)
    at writeOrBuffer (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:227:5)
    at Transform.Writable.write (/Users/dangreen/github/jam-editor/jam-editor/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:194

Issue Analytics

State:
Created 8 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

chetoncommented, Jan 9, 2016

It works well using the following configuration from both command line (i.e. browserify src/index.js) and gulp-browserify:

src/index.js

import './index.css';

console.log('browserify-css test');

src/index.css

body {
    background-color: #fff;
}

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "stage-0",
            "react"
          ]
        }
      ],
      [
        "browserify-css",
        {
          "rootDir": "src"
        }
      ]
    ]
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify-css": "^0.8.4",
    "gulp": "^3.9.0",
    "gulp-browserify": "^0.5.1"
  }
}

gulpfile.js

var gulp = require('gulp');
var browserify = require('gulp-browserify');

gulp.task('default', function() {
    gulp.src('src/index.js')
        .pipe(browserify({
          debug : true
        }))
        .pipe(gulp.dest('./build'));
});

0reactions

chetoncommented, Jan 9, 2016

Here is my src/index.js with above gulpfile.js example:

var Cropper = require('react-cropper');
var Demo = React.createClass({
  _crop: function(){
    // image in dataUrl
    console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
  },

  render: function() {
    return (
      <Cropper
        ref='cropper'
        src='http://fengyuanchen.github.io/cropper/img/picture.jpg'
        style={{height: 400, width: '100%'}}
        // Cropper.js options
        aspectRatio={16 / 9}
        guides={false}
        crop={this._crop} />
    );
  }
});

Top Results From Across the Web

npm can't find package.json - Stack Overflow

It may be very evident, but try to launch CMD (for Windows) from the project folder, where your package.json file is located. Do...

[BUG] `--location=global` does not work from `package.json ...

From a fresh npm project ( npm init -y ). · Set the package.json "test" script to npm install --location=global stylelint . ·...

package.json - npm Docs

Description. This document is all you need to know about what's required in your package.json file. It must be actual JSON, not just...

What Is package.json? | heynode.com

A package.json file must be valid JSON. This means any missing commas, unclosed quotes, or other formatting errors will prevent npm from interacting...

5 Ways to Fix the Npm Install Not Working Issue

Way 1. Make Sure Npm Is Installed · Way 2. Make Sure There Is a Package.json File · Way 3. Delete Lock File...