TypeError: Cannot read property 'USER_SPACE_ON_USE' of undefined #1210

likern · 2019-12-02T20:57:25Z

Bug

Enums should not be placed to index.d.ts files, because they are not processed by Babel.
Now Typescript is used as type-checking in React Native and whole conversion from tsx to js is done by https://babeljs.io/docs/en/next/babel-plugin-transform-typescript.

This plugin doesn't process *.d.ts files:

*.d.ts files are declaration files, not source files. They are not meant to be parsed by Babel, so you should exclude them.

Link to comment babel/babel#10502 (comment)

But Enums are not only types, but are real runtime objects, so they becomes undefined on import.

Environment info

React native info output:

likern@likern:~/Breaffy/Smarty$ npx react-native info
info Fetching system and libraries information...
System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
    Memory: 213.52 MB / 15.60 GB
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 12.13.1 - ~/.local/opt/node-v12.13.1-linux-x64/bin/node
    Yarn: 1.19.2 - /usr/bin/yarn
    npm: 6.13.1 - ~/Breaffy/Smarty/node_modules/.bin/npm
    Watchman: 4.9.0 - /home/likern/.local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 28.0.3
      System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

Library version: "react-native-svg": "^9.13.3"

Steps To Reproduce

Import EMaskUnits from react-native-svg
Use enum member EMaskUnits.USER_SPACE_ON_USE in maskUnits

Describe what you expected to happen:

Enum values should be available at runtime

This is a workaround code, where Enums are used only for type-checking

import Svg, {Mask, Path, G, Rect, Circle, EMaskUnits} from 'react-native-svg';
...
<Mask
      id="Onboarding1_svg__a"
      maskUnits={'useSpaceOnUse' as EMaskUnits.USER_SPACE_ON_USE}
      x={0}
      y={0}
      width={411}
      height={295}>
      <Path fill="#C4C4C4" d="M0 0h411v295H0z" />
</Mask>

This is a invalid code, where Enums are used at runtime.

import Svg, {Mask, Path, G, Rect, Circle, EMaskUnits} from 'react-native-svg';
...
<Mask
      id="Onboarding1_svg__a"
      maskUnits={EMaskUnits.USER_SPACE_ON_USE}
      x={0}
      y={0}
      width={411}
      height={295}>
      <Path fill="#C4C4C4" d="M0 0h411v295H0z" />
</Mask>

Reproducible sample code

Repository with reproduction https://github.com/likern/SVGTest

Helpful links:
https://lukasbehal.com/2017-05-22-enums-in-declaration-files

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

likern · 2019-12-02T20:59:49Z

I've added repo with minimal source code for reproduction https://github.com/likern/SVGTest

msand · 2019-12-09T20:39:02Z

Thanks for reporting, would you mind making a pr to fix this?

simistern · 2020-01-21T01:39:11Z

How would I go about solving this issue? Would exporting the enum from a ts declaration file work?

likern · 2020-01-21T09:30:02Z

How would I go about solving this issue? Would exporting the enum from a ts declaration file work?

Workaround is already provided in the original message

simistern · 2020-01-21T16:20:35Z

@likern yes I see :) I am just trying to figure out how I would go about solving this issue via a PR, and allow users to use:

maskUnits={EMaskUnits.USER_SPACE_ON_USE}

in the correct way

likern · 2020-01-21T17:01:44Z

@likern yes I see :) I am just trying to figure out how I would go about solving this issue via a PR, and allow users to use:

maskUnits={EMaskUnits.USER_SPACE_ON_USE}

in the correct way

I think EMaskUnits and other enums should be moved into index.ts (or another ts file). And it should be usual enums, existing in runtime (not const enums).
And they should be re-exported in *.d.ts to be visible aa types (probably?)

msand · 2020-03-18T17:32:10Z

Should probably import the units from /src/lib/units.ts into src/ReactNativeSVG.ts and export it from there, and also to use that type in all the places where 'objectBoundingBox' | 'userSpaceOnUse' is used:

https://github.com/react-native-community/react-native-svg/search?q=objectBoundingBox&unscoped_q=objectBoundingBox

https://github.com/react-native-community/react-native-svg/search?q=userSpaceOnUse&unscoped_q=userSpaceOnUse

stale · 2020-05-17T18:19:55Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

tatva-hiral · 2020-12-24T10:10:23Z

Getting same error, TypeError: Cannot read property 'USER_SPACE_ON_USE' of undefined
I have svg format like :

parth-pandeyy · 2022-07-01T12:48:48Z

hey , can any one guide here any begineer friendly issue ?

After #1800 merged, the refactoring 286c02f was performed and enum declaration was back to previous one. So type error mentioned at #1210 for maskUnits should occurred again.

msand added bug good first issue help wanted labels Dec 9, 2019

msand added enhancement and removed bug labels Mar 18, 2020

stale bot added the stale label May 17, 2020

jbinda mentioned this issue May 28, 2020

[react-native-svg] TypeError: Cannot read property 'USER_SPACE_ON_USE' of undefined callstack/react-native-open-source-board#226

Open

avery-pierce mentioned this issue Mar 31, 2021

Remove broken enums from typescript declaration file #1559

Closed

4 tasks

tainakanchu mentioned this issue Jul 13, 2022

Change enum declaration in index.d.ts to UnionType #1800

Merged

4 tasks

WoLewicki closed this as completed in #1800 Jul 22, 2022

tainakanchu mentioned this issue Jul 28, 2022

feat: fix broken enum declaration #1819

Merged

4 tasks

WoLewicki pushed a commit that referenced this issue Aug 9, 2022

feat: fix broken enum declaration (#1819)

6d1110b

After #1800 merged, the refactoring 286c02f was performed and enum declaration was back to previous one. So type error mentioned at #1210 for maskUnits should occurred again.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot read property 'USER_SPACE_ON_USE' of undefined #1210

TypeError: Cannot read property 'USER_SPACE_ON_USE' of undefined #1210

likern commented Dec 2, 2019 •

edited

Loading

likern commented Dec 2, 2019 •

edited

Loading

msand commented Dec 9, 2019

simistern commented Jan 21, 2020

likern commented Jan 21, 2020

simistern commented Jan 21, 2020

likern commented Jan 21, 2020

msand commented Mar 18, 2020

stale bot commented May 17, 2020

tatva-hiral commented Dec 24, 2020

parth-pandeyy commented Jul 1, 2022

TypeError: Cannot read property 'USER_SPACE_ON_USE' of undefined #1210

TypeError: Cannot read property 'USER_SPACE_ON_USE' of undefined #1210

Comments

likern commented Dec 2, 2019 • edited Loading

Bug

Environment info

Steps To Reproduce

Reproducible sample code

likern commented Dec 2, 2019 • edited Loading

msand commented Dec 9, 2019

simistern commented Jan 21, 2020

likern commented Jan 21, 2020

simistern commented Jan 21, 2020

likern commented Jan 21, 2020

msand commented Mar 18, 2020

stale bot commented May 17, 2020

tatva-hiral commented Dec 24, 2020

parth-pandeyy commented Jul 1, 2022

likern commented Dec 2, 2019 •

edited

Loading

likern commented Dec 2, 2019 •

edited

Loading