React + webpack + paperjs + nodejs

[Bojan Hribernik]

Hey.

I'm trying to use paperjs with webpack using react-starter-kit. I installed paperjs using npm following this guide. I try to import papre in my React component

/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars

import styles from './CbPaper.less'; // eslint-disable-line no-unused-vars

import withStyles from '../../decorators/withStyles'; // eslint-disable-line no-unused-vars

import paper from 'paper';

@withStyles(styles)

class CbPaper extends React.Component {
    // code here
}

export default CbPaper;

And I get this error message

@linux:~/www/react/MyApp$ gulp

[01:23:50] Using gulpfile ~/www/react/MyApp/gulpfile.js

[01:23:50] Starting 'build:watch'...

[01:23:50] Starting 'clean'...

[01:23:50] Finished 'clean' after 15 ms

[01:23:50] Starting 'build'...

[01:23:50] Starting 'vendor'...

[01:23:50] Starting 'assets'...

[01:23:50] Starting 'bundle'...

[01:23:50] Finished 'vendor' after 142 ms

    Asset    Size  Chunks             Chunk Names

server.js  570 kB       0  [emitted]  main

[01:23:58] Finished 'bundle' after 8.37 s

[01:24:02] 'assets' all files 30.95 kB

[01:24:02] Finished 'assets' after 12 s

[01:24:02] Finished 'build' after 12 s

[01:24:02] Finished 'build:watch' after 12 s

[01:24:02] Starting 'serve'...

/home/bojan/www/react/MyApp/node_modules/paper/node_modules/jsdom/node_modules/contextify/node_modules/bindings/bindings.js:83

        throw e

              ^

Error: /home/bojan/www/react/MyApp/node_modules/paper/node_modules/jsdom/node_modules/contextify/build/Release/contextify.node: undefined symbol: node_module_register

    at Module.load (module.js:356:32)

    at Function.Module._load (module.js:312:12)

    at Module.require (module.js:364:17)

    at require (module.js:380:17)

    at bindings (/home/bojan/www/react/MyApp/node_modules/paper/node_modules/jsdom/node_modules/contextify/node_modules/bindings/bindings.js:76:44)

    at Object.<anonymous> (/home/bojan/www/react/MyApp/node_modules/paper/node_modules/jsdom/node_modules/contextify/lib/contextify.js:1:96)

    at Module._compile (module.js:456:26)

    at Object.Module._extensions..js (module.js:474:10)

    at Module.load (module.js:356:32)

    at Function.Module._load (module.js:312:12)

 Asset     Size  Chunks             Chunk Names

app.js  10.8 MB       0  [emitted]  main

WARNING in ./~/paper/dist/paper-node.js

require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/paper/dist/paper-node.js

Critical dependencies:

12263:19-26 require function is used in a way in which dependencies cannot be statically extracted

 @ ./~/paper/dist/paper-node.js 12263:19-26

WARNING in ./~/paper/~/jsdom/~/acorn-globals/~/acorn/dist/walk.js

Critical dependencies:

1:503-510 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.

 @ ./~/paper/~/jsdom/~/acorn-globals/~/acorn/dist/walk.js 1:503-510

WARNING in ./~/paper/~/jsdom/~/acorn-globals/~/acorn/dist/acorn.js

Critical dependencies:

1:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.

 @ ./~/paper/~/jsdom/~/acorn-globals/~/acorn/dist/acorn.js 1:478-485

WARNING in ./~/paper/~/request/~/hawk/~/hoek/lib/index.js

Critical dependencies:

403:34-60 the request of a dependency is an expression

 @ ./~/paper/~/request/~/hawk/~/hoek/lib/index.js 403:34-60

ERROR in ./~/paper/~/canvas/lib/bindings.js

Module not found: Error: Cannot resolve 'file' or 'directory' ../build/Release/canvas in /home/bojan/www/react/MyApp/node_modules/paper/node_modules/canvas/lib

 @ ./~/paper/~/canvas/lib/bindings.js 2:17-51

ERROR in ./~/paper/~/jsdom/~/xmlhttprequest/lib/XMLHttpRequest.js

Module not found: Error: Cannot resolve module 'child_process' in /home/bojan/www/react/MyApp/node_modules/paper/node_modules/jsdom/node_modules/xmlhttprequest/lib

 @ ./~/paper/~/jsdom/~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36

ERROR in ./~/paper/~/request/~/hawk/~/sntp/lib/index.js

Module not found: Error: Cannot resolve module 'dgram' in /home/bojan/www/react/MyApp/node_modules/paper/node_modules/request/node_modules/hawk/node_modules/sntp/lib

 @ ./~/paper/~/request/~/hawk/~/sntp/lib/index.js 3:12-28

ERROR in ./~/paper/~/request/~/hawk/~/sntp/lib/index.js

Module not found: Error: Cannot resolve module 'dns' in /home/bojan/www/react/MyApp/node_modules/paper/node_modules/request/node_modules/hawk/node_modules/sntp/lib

 @ ./~/paper/~/request/~/hawk/~/sntp/lib/index.js 4:10-24

^Cbojan@linux:~/www/react/MyApp$ 

This is my webpack config

/*

 * React.js Starter Kit

 * Copyright (c) Konstantin Tarkus (@koistya), KriaSoft LLC

 *

 * This source code is licensed under the MIT license found in the

 * LICENSE.txt file in the root directory of this source tree.

 */

'use strict';

var _ = require('lodash');

var webpack = require('webpack');

var argv = require('minimist')(process.argv.slice(2));

var DEBUG = !argv.release;

var STYLE_LOADER = 'style-loader/useable';

var CSS_LOADER = DEBUG ? 'css-loader' : 'css-loader?minimize';

var AUTOPREFIXER_LOADER = 'autoprefixer-loader?{browsers:' + JSON.stringify([

  'Android 2.3',

  'Android >= 4',

  'Chrome >= 20',

  'Firefox >= 24',

  'Explorer >= 8',

  'iOS >= 6',

  'Opera >= 12',

  'Safari >= 6']) + '}';

var GLOBALS = {

  'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',

  '__DEV__': DEBUG

};

//

// Common configuration chunk to be used for both

// client-side (app.js) and server-side (server.js) bundles

// -----------------------------------------------------------------------------

var config = {

  output: {

    path: './build/',

    publicPath: './',

    sourcePrefix: '  '

  },

  cache: DEBUG,

  debug: DEBUG,

  devtool: DEBUG ? '#inline-source-map' : false,

  stats: {

    colors: true,

    reasons: DEBUG

  },

  plugins: [

    new webpack.optimize.OccurenceOrderPlugin()

  ],

  resolve: {

    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']

  },

  module: {

    preLoaders: [

      {

        test: /\.js$/,

        exclude: /node_modules/,

        loader: 'eslint-loader'

      }

    ],

    loaders: [

      {

        test: /\.json$/,

        loader: "json-loader"

      },

      {

        test: /\.css$/,

        loader: STYLE_LOADER + '!' + CSS_LOADER + '!' + AUTOPREFIXER_LOADER

      },

      {

        test: /\.less$/,

        loader: STYLE_LOADER + '!' + CSS_LOADER + '!' + AUTOPREFIXER_LOADER +

                '!less-loader'

      },

      {

        test: /\.gif/,

        loader: 'url-loader?limit=10000&mimetype=image/gif'

      },

      {

        test: /\.jpg/,

        loader: 'url-loader?limit=10000&mimetype=image/jpg'

      },

      {

        test: /\.png/,

        loader: 'url-loader?limit=10000&mimetype=image/png'

      },

      {

        test: /\.svg/,

        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'

      },

      {

        test: /\.jsx?$/,

        exclude: /node_modules/,

        loader: 'babel-loader'

      }

    ]

  }

};

//

// Configuration for the client-side bundle (app.js)

// -----------------------------------------------------------------------------

var appConfig = _.merge({}, config, {

  entry: './src/app.js',

  output: {

    filename: 'app.js'

  },

  plugins: config.plugins.concat([

      new webpack.DefinePlugin(_.merge(GLOBALS, {'__SERVER__': false}))

    ].concat(DEBUG ? [] : [

      new webpack.optimize.DedupePlugin(),

      new webpack.optimize.UglifyJsPlugin(),

      new webpack.optimize.AggressiveMergingPlugin()

    ])

  )

});

//

// Configuration for the server-side bundle (server.js)

// -----------------------------------------------------------------------------

var serverConfig = _.merge({}, config, {

  entry: './src/server.js',

  output: {

    filename: 'server.js',

    libraryTarget: 'commonjs2'

  },

  target: 'node',

  externals: /^[a-z][a-z\.\-0-9]*$/,

  node: {

    console: false,

    global: false,

    process: false,

    Buffer: false,

    __filename: false,

    __dirname: false

  },

  plugins: config.plugins.concat(

    new webpack.DefinePlugin(_.merge(GLOBALS, {'__SERVER__': true}))

  ),

  module: {

    loaders: config.module.loaders.map(function(loader) {

      // Remove style-loader

      return _.merge(loader, {

        loader: loader.loader = loader.loader.replace(STYLE_LOADER + '!', '')

      });

    })

  }

});

module.exports = [appConfig, serverConfig];

It's all from the starter kit, I just added json-loader, but it still does not work.

Any ideas?

[Bojan Hribernik]

So I managed to fix the build problem by adding node-loader

npm install node-loader --save-dev

But now I get the following error in the browser

Uncaught Error: Cannot open /home/bojan/www/react/MyApp/node_modules/paper/node_modules/canvas/build/Release/canvas.node: TypeError: process.dlopen is not a function

No idea what's wrong ... :)

[Jürg Lehni]

It sounds like you’re trying to run the node version of paper.js in a browser environment? That will not work, as there are different versions, and the node version depends on node-canvas.

See this issue for a similar problem with browserify:

https://github.com/paperjs/paper.js/issues/461

You’ll have to load dist/paper-full.js instead of dist/paper.js

But I’m not sure how to do this with react, as I’ve never used it.

J

> --
> You received this message because you are subscribed to the Google Groups "Paper.js" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Bojan Hribernik]

Hey, yeah I figured that much from the stack overflow question that I posted. Makes sense.

Next problem that boggles my mind is how to handle isomorphic canvas rendering. React components are basically simple javascript functions, so you can pre-render your app on the server with node.js, send it to the client, render it in the browser and hook your javascript to the existing dom. This is pretty cool because it works faster and is better for the end user.

I don't know enough about canvas and paper.js, but I guess that pre-rendering canvas on the server then "hooking into it" on the client is not an option, makes no sense, since we're in a different environment. So I guess I need to draw canvas only in the browser. I can check React's ExecutionEnvironment.canUseDOM then create canvas in componentDidMount and manipulate it in componentWillUpdate and componentDidUpdate. Also should handle requestAnimationFrame ... hmm .... gets tricky.

Anyone else out there using Paper.js and React? Would love to talk and share ideas ...

[he...@chaseries.com]

Hi Bojan,

I know I'm necromancing this thread but I've hit the same exact roadblock as you, three years on. I just can't seem to find any resources on the issue, and I'd really love to know if you ended up solving it.