null & undefined in react build

[jaswant100]

Getting an error on react build
console.log

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

[fosteman]

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

[rohitkrishna094]

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.

[rohitkrishna094]

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.

[buigabor]

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

[sptaszek92]

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

[JaiPrakash-Saarthi]

I am getting the same issue.

[ADanayi]

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...)

[sptaszek92]

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

[ADanayi]

@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.)

[ADanayi]

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.