Using NPM version of Rainbow on front-end with webpack

[mcat]

Is there a way to install and use Rainbow when using webpack for a front-end app? I get this error when I try to use webpack to build Rainbow.

ERROR in ./~/rainbow-code/src/rainbow-node.js
Module parse failed: [...]/node_modules/rainbow-code/src/rainbow-node.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| /* eslint-disable */
| var fs = require('fs');
 @ ./src/javascripts/main.js 6:0-35

[ccampbell]

Hmm. This must be related to the package.json main referencing rainbow-node.js and not rainbow.js. I'm not sure if there is an easy way to get around this or not. I wasn't thinking about how package.json may be used from the client too

[mcat]

Using browser in the package.json might work https://github.com/defunctzombie/package-browser-field-spec

[mcat]

I can get it to work by doing the following:

In package.json add "browser": "./src/rainbow.js"

I then get this error when using webpack:

ERROR in ./~/bindings/bindings.js
Module not found: Error: Can't resolve 'fs' in '/Users/mark/Sites/takeshape/node_modules/bindings'
 @ ./~/bindings/bindings.js 6:9-22
 @ ./~/webworker-threads/index.js
 @ ./~/rainbow-code/src/util.js
 @ ./~/rainbow-code/src/rainbow.js
 @ ./src/javascripts/main.js

To fix that error I comment out the following in util.js

if (isNode()) {
        /* globals global, require, __filename */
        global.Worker = require('webworker-threads').Worker;
        return new Worker(__filename);
}

And then I can get it to work in the browser. I think the isNode function isn't specific enough

export function isNode() {
    /* globals module */
    return typeof module !== 'undefined' && typeof module.exports === 'object';
}

[ccampbell]

Hmm. That seems a bit strange. Do you know if there is a library you are using that might be defining module.exports from the browser?

I think this is a fairly common way to check for node support:

http://stackoverflow.com/questions/4224606/how-to-check-whether-a-script-is-running-under-node-js

[k-funk]

I've got the same Unexpected character '#' (1:0) error when importing by import rainbow from 'rainbow-code'.

When I try to import with import { color } from 'rainbow-code/src/rainbow' I also get an fs error:

ERROR in ./~/bindings/bindings.js
Module not found: Error: Can't resolve 'fs' in '<absolute_path>/node_modules/bindings'
 @ ./~/bindings/bindings.js 6:9-22
 @ ./~/webworker-threads/index.js
 @ ./~/rainbow-code/src/util.js
 @ ./~/rainbow-code/src/rainbow.js
 @ ./app/_assets/javascripts/app/views/<view_name>.js

[antony]

I'm getting similar errors with ParcelJS. There isn't a way to import rainbow as part of my build (inside my component), and import the themes too.

If I import the browser version it's fine, but I can't add any languages as they throw errors about not finding the Rainbow module.

[ccampbell]

I am not sure about specifics, but I think I do need to modularize the language bundles too. I am aware that #234 deals with some of that. I just haven’t have time to implement it.

I actually am trying to use Rainbow directly with modules in a project now and ran into the same problem. The solution is adding this to the top of each language/*.js file.

import Rainbow from '../rainbow';

Currently they depend on Rainbow being on the global window object which is not ideal.

---

Rainbow was originally designed with the idea that you would just build a bundle with the library and languages and include that as a separate JavaScript file (or concatenated with your existing js). Using directly as modules was only something I started thinking about recently.

I think it is fair to say that support will be released eventually, but I can’t give a definitive timeline.