Grunt browserify fails when requiring react-bootstrap-typeahead

Question

I'm trying to in include https://www.npmjs.com/package/react-bootstrap-typeahead in my project, but when I run my grunt browserify task, I get a ParseError: Unexpected token error. Full message here:

Running "browserify:dist" (browserify) task
>> /path/to/project/node_modules/react-bootstrap-typeahead/css/Typeahead.css:1
>> .bootstrap-typeahead .dropdown-menu {
>> ^
>> ParseError: Unexpected token
Warning: Error running grunt-browserify. Use --force to continue.

Aborted due to warnings.

The issue being that there is a require('/some/file.css') inside the react-bootstrap-typeahead source js.

Here is my grunt browserify task:

    browserify: {
        dist: {
            cwd: 'build',
            options: {
                transform : ['browserify-css'],
                alias: {
                    'index' : './dist/index.js',
                    'root' : './dist/containers/root.js',
                    'designs' : './dist/components/designs.js',
                    'addMutationForm' : './dist/components/addMutationForm.js',
                    'ProteinChecker': './dist/containers/ProteinChecker.js',
                    'configureStore': './dist/configureStore.js',
                    'actions' : './dist/actions.js',
                    'reducers' : './dist/reducers.js',
                    'utils': './dist/utils.js',
                },
                require: [
                    './node_modules/isomorphic-fetch',
                    './node_modules/jquery',
                    './node_modules/react',
                    './node_modules/react-dom',
                    './node_modules/bootstrap',
                    './node_modules/redux',
                    './node_modules/babel-polyfill',
                    './node_modules/redux-logger',
                    './node_modules/redux-thunk',
                    './node_modules/underscore',
                    './node_modules/redux-form',
                    './node_modules/react-bootstrap-typeahead'
                ]
            },
            src: ['./dist/*.js', './dist/*/*.js'],
            dest: './public/build/app.js'
        }
    }

A few things I came across while attempting to solve the problem: A similar SO (yet unanswered) question but using webpack, not grunt+browserify so I don't believe applicable: Using react-bootstrap-typeahead generating CSS errors And a closed issue on the github page of the react-bootstrap-typeahead project, but doesn't address use through grunt: https://github.com/ericgio/react-bootstrap-typeahead/issues/2 which suggests using browserify-css transform.

I've tried to get grunt to use this transform by adding transform : ['browserify-css'] in the options field, but that didn't work. I still get the exact same error message.

I tried using browserify with the browserify-css transform on the command line to bundle up just this one library, and then include that bundle, but this leads to yet more errors down the line that I believe have to do with relative imports (and I don't think this is a good solution anyway because if I understand browserify right, it will end up including things like react twice, once for the typeahead bundle that I made on the command line and again for the actual app bundle and then the final js file is HUGE!).

Any ideas on how I can resolve this?

Thanks in advance!

Answer 1

So the solution it turns out was to add

"browserify": {
    "transform": ["browserify-css"]
}

to the packages.json of react-bootstrap-typeahead. It was in the browserify-css docs... (facepalm)