Webpack?

[anitagraham]

Versions
roughjs@3.0.0
webpack@4.29.4

I am trying to use roughjs with webpack. (Actually using webpacker, as main app is a Rails application)

I have tried using rough.svg and rough.canvas, and I end up getting this error (or the same for canvas) every time:

TypeError: roughjs_dist_rough__WEBPACK_IMPORTED_MODULE_0___default.a.svg is not a function

from this:

import rough from "roughjs/dist/rough";
  return {
    bgFrame: (element) => {

      let svgBg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
      **const rs = rough.svg(svgBg);**
      let frameWidth = element.width;
      let frameHeight = element.height;
      let node = rs.rectangle(0, 0, frameWidth, frameHeight, {fill: "red"}); 
      svgBg.appendChild(node);
    }
  }
}) ();
export default frame

called here:

 [...document.querySelectorAll('img.frame')].forEach(
    (image) => {
      frame.bgFrame(image)
    }
  )

I have tried several variations on this without luck.
I can create an svg without roughjs, and add it to the document.

Thanks for any thoughts on where I am going wrong.

[jeasonstudio]

Try this:

import rough from 'roughjs/dist/rough.umd';

[anitagraham]

Thanks ... moving foward!

[pshihn]

Thanks for the help @jeasonstudio

[Cosmitar]

for roughjs v4.3.1

import rough from 'roughjs/bundled/rough.cjs';

[guimeisang]

for roughjs v4.3.1

import rough from 'roughjs/bundled/rough.esm.js' 

[pshihn]

A lot of it comes from the fact that webpack pays attention to the "browser" field in the package.json over "module" field.
Should remove browser from roughjs' package.json

[hamza1220]

I am working on a Next Js application and have tried both @guimeisang and @Cosmitar's solutions for roughjs v4.3.1. I get this error:

SyntaxError: Unexpected token 'export'
module.exports = require("roughjs/bundled/rough.esm.js");

[Rameshv]

Its the same issue for me @hamza1220 . have you got it working with next??

[davincios]

I have the same issue with next

[davincios]

I have the same issue with next

@Rameshv did you get it to work with next?

[Jasurb3k-coding]

not working with React I believe.