Node version should not use require('jsdom') to construct self variable #1483

HriBB · 2018-06-12T00:07:06Z

Description/Steps to reproduce

In src/node/self.js there is a check using require('jsdom'), to determine the type of self variable in node environments. This causes problems in some situations. For example when bundling paper.js with webpack to do server side rendering with react.

I am posting a stripped version of src/node/self.js for reference:

var path = require('path');
var parent = module.parent.parent,
    requireName = parent && path.basename(path.dirname(parent.filename));
requireName = /^paper/.test(requireName) ? requireName : 'paper';

var jsdom,
    self;

try {
    jsdom = require('jsdom');
} catch(e) {
    if (/\bjsdom\b/.test(requireName)) {
        throw new Error('Unable to load jsdom module.');
    }
}

if (jsdom) {
   var document = jsdom.jsdom('<html><body></body></html>', {
        url: 'file://' + process.cwd() + '/',
        features: {
            FetchExternalResources: ['img', 'script']
        }
    });
    self = document.defaultView;
    require('./canvas.js')(self, requireName);
    require('./xml.js')(self);
} else {
    self = {
        navigator: {
            userAgent: 'Node.js (' + process.platform + '; U; rv:' +
                    process.version + ')'
        }
    };
}

module.exports = self;

Link to reproduction test-case

N/A

Expected result

It's hard to tell what the right way to determine self variable is in this case. In my case, I don't need any of the jsdom stuff, and if I manually comment it out, everything works without any errors:

if (false && jsdom) {
    //...
} else {
    //...
}

I guess the expected result is that importing/requiring paper should not require any of the jsdom stuff, event when jsdom is present as a dependency of some other package.

Additional information

Paper.js 0.11.5
Node 9.2.0
Linux Ubuntu 16.04
Issues: #1347

The text was updated successfully, but these errors were encountered:

lehni · 2018-10-05T06:29:13Z

We can't just remove that, see #739 for the reasons why it's there

SBD580 · 2018-10-12T22:18:37Z

I believe an option to set the requireName from some ENV varaiable should be good enough, so this could be controlled by build scripts

lehni · 2018-10-13T09:24:21Z

@SBD580 I don't think that would be enough. requireName only changes the error reporting behaviour, not the requiring itself.

lehni · 2018-10-13T09:26:00Z

@HriBB how are you bundling paper.js? Do you use the package from NPM? If so, why is your webpack ignoring these settings here:

paper.js/package.json

Lines 75 to 80 in 5245436

    
           "canvas": false, 
        
           "jsdom": false, 
        
           "jsdom/lib/jsdom/living/generated/utils": false, 
        
           "source-map-support": false, 
        
           "./dist/node/self.js": false, 
        
           "./dist/node/extend.js": false

This should just work if you used the published versions through webpack

SBD580 · 2018-10-13T12:00:35Z

@lehni, maybe my issue is different. I don't have an error while bundling but rather at runtime saying module.parent is undefined (and thus can't access parent of undefined). Setting the requiredName fixed to paper-jsdom did the trick for me.

lehni · 2018-10-13T12:34:55Z

@SBD580 your issue is fixed here 6925888

We just need to roll out a new version soon.

SBD580 · 2018-10-13T13:07:47Z

Oh your right my bad (didn't find that on the search). I'm not sure the fix is correct though (commented on the commit)

HriBB · 2018-10-14T23:41:31Z

@lehni I use package from npm "paper": "^0.11.5"

I am importing everything from paper/dist/paper-core

import paper from 'paper/dist/paper-core'
// or
import { Item, Point } from 'paper/dist/paper-core'

I also use react-paper-bindings which imports like this

BTW, to fix this problem in SSR, I override self variable in my server.js entry script

// paper.js ssr fix
global.self = {
  navigator: {
    userAgent: `Node.js (${process.platform}; U; rv:${process.version})`
  }
}

And this is my webpack config.server.js

const webpack = require('webpack')

const config = require('../src/config')

module.exports = {
  mode: process.env.NODE_ENV,
  target: 'node',
  devtool: 'source-map',
  entry: config.server.entry,
  output: config.server.output,
  resolve: {
    modules: [
      config.paths.src,
      config.paths.modules,
    ],
    extensions: ['.js', '.css', '.gql', '.graphql'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: [config.paths.src],
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader',
      },
      {
        test: /\.node$/,
        use: 'node-loader'
      },
    ],
  },
  optimization: {
    minimize: false,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
  node: {
    console: false,
    global: false,
    process: false,
    Buffer: false,
    __filename: false,
    __dirname: false,
    setImmediate: false,
  },
}

lehni · 2018-10-15T08:33:02Z

@HriBB intersting, thank you!

I think the solution is somewhere in here:

https://webpack.js.org/configuration/resolve/#resolve-mainfields

Currently we only target the browser target scenario with webpack. We may want to create another shim project that targets webpack on node for ssr, and disables these internal modules?

Could you create a simple test-case project that allows me to replicate your problem easily for testing? Ideally just a github repo. Thanks!

HriBB · 2018-10-15T21:51:29Z

@lehni you're right. Haven't seen that config option yet.

I will create the reproduction repo, but I'm pretty busy ATM, so I cannot promise when.

renschler · 2019-04-07T18:29:37Z

I think I'm running into the same issue as @HriBB

I have a very simple gatsby site (with SSR) that can reproduce the behavior. I only see the build error when I deploy on netlify, not when I run locally.

Right now the repo is in bitbucket, i'll push it to github and link here when I get a chance.

Update: https://github.com/renschler/paperjs_example_repo

Still trying to figure out how to get it to fail locally, it only fails during the netlify build.

blimpmason · 2021-03-26T23:07:06Z

@renschler did you ever get this working? I'm getting the same build error when incorporating Paper into a Gatsby project, but only in local develop mode. Luckily it's not failing on Netlify's servers.

I've implemented the following in gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [{ test: /node_modules\/paper/, use: loaders.null() }],
      },
    });
  }
};

ricardomatias · 2021-05-10T10:23:51Z

I'm getting ModuleNotFoundError: Module not found: Error: Can't resolve 'jsdom' in '/home/ares/Projects/who-is-we/node_modules/paper/dist/node' with Next.js and Netlify. I'm using dynamic imports.

amcc · 2021-06-01T09:52:43Z

same issue with a Gatsby project:

ERROR Generating SSR bundle failed

If you're trying to use a package make sure that 'jsdom/lib/jsdom/living/generated/utils' is installed. If you're trying to use a local file make sure that the path is correct.

Can't resolve 'jsdom/lib/jsdom/living/generated/utils' in '/usr/src/app/www/node_modules/paper/dist/node'

happen to be using https://github.com/psychobolt/react-paperjs, this imports Paper: import Paper from 'paper';

markmanx · 2021-07-31T23:35:11Z

The Unable to load jsdom module error will also occur if the package was compiled against a different version of Node than the one currently running it. Try deleting node_modules and reinstalling with the same version of Node.

The try/catch in src/node/self.js suppresses a lot of useful data about this particular error, I think it would be better to show the error detail in its entirety.

noah-seltzer · 2021-08-12T15:22:30Z

I would also like to add that I ran into this error while attempting to load paper-jsdom in a worker thread (via the npm workerpool package).

I fixed this problem by:

switching paper-jsdom with paper
installing jsdom separately
passing jsdom instance to paper at runtime

  const dom = new JSDOM(`<!DOCTYPE html>
  <html>
  <head>
  <!-- Load the Paper.js library -->
  <script type="text/javascript" src="js/paper.js"></script>
  </head>
  <body>
    <canvas id="myCanvas" resize></canvas>
  </body>
  </html>`)
  const canvas_element = dom.window.document.getElementById('myCanvas')
  paperscope.setup(canvas_element);

renschler mentioned this issue Apr 8, 2019

Gatsby build fails on netlify but can't reproduce locally - more examples of wepback config customization? gatsbyjs/gatsby#13219

Closed

amcc mentioned this issue Jun 1, 2021

SSR and GatsbyJS and jsdom psychobolt/react-paperjs#22

Closed

alecmolloy mentioned this issue Nov 9, 2023

Help with barebones Next.js and Paper.js project #2050

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Node version should not use require('jsdom') to construct self variable #1483

Node version should not use require('jsdom') to construct self variable #1483

HriBB commented Jun 12, 2018 •

edited

Loading

lehni commented Oct 5, 2018

SBD580 commented Oct 12, 2018

lehni commented Oct 13, 2018

lehni commented Oct 13, 2018

SBD580 commented Oct 13, 2018

lehni commented Oct 13, 2018

SBD580 commented Oct 13, 2018

HriBB commented Oct 14, 2018

lehni commented Oct 15, 2018

HriBB commented Oct 15, 2018

renschler commented Apr 7, 2019 •

edited

Loading

blimpmason commented Mar 26, 2021

ricardomatias commented May 10, 2021

amcc commented Jun 1, 2021

markmanx commented Jul 31, 2021

noah-seltzer commented Aug 12, 2021 •

edited

Loading

Node version should not use require('jsdom') to construct self variable #1483

Node version should not use require('jsdom') to construct self variable #1483

Comments

HriBB commented Jun 12, 2018 • edited Loading

Description/Steps to reproduce

Link to reproduction test-case

Expected result

Additional information

lehni commented Oct 5, 2018

SBD580 commented Oct 12, 2018

lehni commented Oct 13, 2018

lehni commented Oct 13, 2018

SBD580 commented Oct 13, 2018

lehni commented Oct 13, 2018

SBD580 commented Oct 13, 2018

HriBB commented Oct 14, 2018

lehni commented Oct 15, 2018

HriBB commented Oct 15, 2018

renschler commented Apr 7, 2019 • edited Loading

blimpmason commented Mar 26, 2021

ricardomatias commented May 10, 2021

amcc commented Jun 1, 2021

markmanx commented Jul 31, 2021

noah-seltzer commented Aug 12, 2021 • edited Loading

HriBB commented Jun 12, 2018 •

edited

Loading

renschler commented Apr 7, 2019 •

edited

Loading

noah-seltzer commented Aug 12, 2021 •

edited

Loading