checkPropTypes is not a function error while using with sveltekit

Question

I am using prop-types npm package with sapper and It working fine but when I migrate to sveltekit it gives error.

Command: npm run preview

Uses eg:

import * as PropTypes from "prop-types";
const {checkPropTypes, number} = PropTypes;
   const propTypes = {
    threshold: number,
};
checkPropTypes(propTypes, $$props, "prop", "Observer");

Error: checkPropTypes is not a function

Answer 1

Putting the function inside onMount seems to work:

<script lang="ts">
    import * as PropTypes from "prop-types";
    import { onMount } from "svelte";

    const { checkPropTypes, number } = PropTypes

    const propTypes = {
        threshold: number,
    };

    onMount(() => {
        checkPropTypes(propTypes, $$props, "prop", "Observer");
    })
</script>

However, from my testing, npm run dev works fine without changes, so it's strange that with npm run preview it breaks. For some reason, both checkPropTypes and number are undefined when using preview. What's weirder is that the module object looks like this:

[Module: null prototype] {
  default: <ref *2> {
    array: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    bigint: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    bool: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    func: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    number: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    object: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    string: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    symbol: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    any: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    arrayOf: [Function: getShim],
    element: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    elementType: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    instanceOf: [Function: getShim],
    node: <ref *1> [Function: shim] { isRequired: [Circular *1] },
    objectOf: [Function: getShim],
    oneOf: [Function: getShim],
    oneOfType: [Function: getShim],
    shape: [Function: getShim],
    exact: [Function: getShim],
    checkPropTypes: [Function: emptyFunctionWithReset] {
      resetWarningCache: [Function: emptyFunction]
    },
    resetWarningCache: [Function: emptyFunction],
    PropTypes: [Circular *2]
  }
}

So the function is there, it's just undefined. Again, it works correctly when using build. And there's a lot more weird behaviour if you experiment more, so maybe it's just a SvelteKit issue.

Anyways, you should simply use onMount for now to solve the issue.

---