null & undefined in react build about react-sketch HOT 10 OPEN

I have exactly the same error. Everything works fine locally, but the above error pops up after the build. I was inquiring where it came from, it points to the utils of the whatwg-url package.

Is it possible to fix this error? It makes the package completely useless

from react-sketch.

I have the exact same issue. In development mode everything is working, if I do npm build it throws the same error as mentioned by @rohitkrishna094.

The error goes away if I install and import react-sketch2 instead of react-sketch

from react-sketch.

Can you please provide more details or your utils.js ?

from react-sketch.

Were you guys able to fix this? Even I have the same issue and it seems like this is originating from react-sketch itself. However its blowing up in utils.js of another package called whatwg-url.

from react-sketch.

I created a new typescript project and added just this piece of code

import React from 'react';
import { SketchField, Tools } from 'react-sketch';
import './App.css';

function App() {
  return (
    <div className="App" style={{ backgroundColor: 'black' }}>
      <SketchField width="100%" height="100%" widthCorrection={0} tool={Tools.Pencil} lineColor="#3182CE" lineWidth={3} />
    </div>
  );
}

export default App;

Of course it was complaining about no types being found, so I created another file called types.d.ts and added this into that file:

declare module 'react-sketch';

If I do npm start on the above code, it works perfectly fine. But if I do npm build(which is react-scripts build essentially), and then do serve -s build, it throws the same error in console:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.getPrototypeOf (<anonymous>)
    at Object.<anonymous> (utils.js:48)
    at a ((index):1)
    at Object.<anonymous> (URL.js:4)
    at a ((index):1)
    at Object.<anonymous> (webidl2js-wrapper.js:3)
    at a ((index):1)
    at Object.<anonymous> (index.js:3)
    at a ((index):1)
    at Object.<anonymous> (api.js:7)

Not sure how to proceed and fix this.

from react-sketch.

I am getting the same issue.

from react-sketch.

Any updates?
Is this related to "this is undefined" which I face in the built one not opening in the browser?! (while npm start works well...)

from react-sketch.

I changed the package into react-sketch2 which has this issue fixed

from react-sketch.

@sptaszek92 Thanks. It works... However, my problem was something else that I'm going to post here:

For those who get the "this is undefined" error leading to this page:

When defining your classes, change the arrow functions function_name = (args) => {...function body...} into this.function_name = this.function_name.bind(this); in your constructors if you have inheritance.

I faced the mentioned error and spent 2-3 hours searching for the answer. The weird thing was there is no error in your npm start runs but when you npm build the product, the browser can't open the root index.html file (of course it's not related with your webserver including nginx, serve (npm) or ... but the build system.)

from react-sketch.

I changed the package into react-sketch2 which has this issue fixed

Glad to hear it's solved! I think the reason your new package works now is somehow related to the solution I posted above. That fix might have been considered in react-sketch2.

from react-sketch.