Browserify SyntaxError: Unexpected character '�' (2:2)

[Noah-Huppert]

When I try and use Marky-Markdown with Browserify I get the following error

>> SyntaxError: Unexpected character '�' (2:2) while parsing C:\Users\noahh_000
Noah\Programing\Polymer\Polymer-Markdown-Tag\node_modules\marky-markdown\node_m
dules\highlights\node_modules\first-mate\node_modules\oniguruma\build\Release\o
ig_scanner.node while parsing file: C:\Users\noahh_000\Noah\Programing\Polymer\
olymer-Markdown-Tag\node_modules\marky-markdown\node_modules\highlights\node_mo
ules\first-mate\node_modules\oniguruma\build\Release\onig_scanner.node

This appears to be an issue with a dependency of Marky-Markdown.

OS: Windows 8.1

[Noah-Huppert]

I ran the browserify command on my CI Server(Linux) and I got the same error. So this issue is probably not a platform specific encoding error.

[zeke]

Hi @Noah-Huppert. What command or code are your running that generates this error?

[Noah-Huppert]

@zeke

The repository for the code is Noah-Huppert/Polymer-Markdown-Tag.

I encounter this error using the browserify cli(browserify src/polymer-markdown-tag.js) and grunt browserify on both operating systems.

[Noah-Huppert]

I have opened an issue for the package that is actually causing this error

Issue

[adjavaherian]

I just ran into the same error using sassify and browserify.

var browserify = require('browserify');
var gulp = require('gulp');
var source = require("vinyl-source-stream");
var reactify = require('reactify');
var debug = require('gulp-debug');
var babelify = require('babelify');
var sassify = require('sassify');

gulp.task('browserify', function(){

    //init browserify with entry and transform
    var b = browserify({
        "debug": true,
        "extensions":  [".jsx", ".scss"]
    })
        .transform(babelify)
        .transform(sassify, {
            'auto-inject': false, // Inject css directly in the code
            base64Encode: true, // Use base64 to inject css
            sourceMap: true // Add source map to the code
        });

    b.add('server/middleware/react.js');
    b.bundle()
        .pipe(source('index.js')) //read docs for source, index.js is placeholder
        .pipe(process.stdout);

    //return source('server/middleware/react.js')
    //        .pipe(debug());
});

Update: I think this may be the result of a binary / hex image coming down the pipeline. I was able to filter some out like this.

module.exports = function (file, opts) {

    opts = opts || {};

    return through(function (buf, enc, next) {
        var binHex = /\.(jpg|jpeg|png|gif|svg)\b/.test(file);
        if (!binHex) {
            this.push(processRequires(buf.toString('utf8'), opts));
        } else {
            this.push(null);
        }

        next();
    });

};

[ashleygwilliams]

this seems like an upstream problem with oniguruma. leaving this open to keep track of that.

[Noah-Huppert]

Opened an issue with oniguruma on May 7, 2015 and there has been no response. For all intents and purposes I would considered this a permanant bug with oniguruma

[billiegoose]

There are two things preventing mark-markdown from working in the browser.

1. require(marky-markdown) > /lib/render.js > require(highlights) > lib/highlights.js > require(first-mate) > lib/scanner.js,grammar.js > require(oniguruma)

oniguruma is "Native Node bindings to the Oniguruma regular expressions library." Translation: it's in C++. Ain't never gonna work in browserify.

2. require(marky-markdown) > /lib/render.js > require.resolve()

Browserify's "require" has no .resolve method.

My proposed solution is as follows:

1. Accept that "highlights" will not work in the browser.
2. Make a slight change to lib/render.js to put off require'ing highlights until render is called with options.highlightSyntax == true

I've got a hacked demo working on my desktop, will make a pull request shortly.

[zikaari]

Nice Update: oniguruma has been successfully ported to the web with WebAssembly.

https://github.com/NeekSandhu/onigasm

[zeke]

oniguruma has been successfully ported to the web with WebAssembly.

cc @bcoe, who was working on a JS port of oniguruma back in the day.

[billiegoose]

Nice Update: oniguruma has been successfully ported to the web with WebAssembly.

Ooooooooooo man. This is gonna be so cool!