himelbrand / react-native-numeric-input

a stylish numeric input for react native
MIT License
150 stars 98 forks source link

[BUG] - bundling error: Missing class properties transform #58

Closed AndroidDoctorr closed 4 years ago

AndroidDoctorr commented 4 years ago

My project won't bundle after adding react-native-numeric-input. I installed the basic usage according to the readme

<NumericInput
          value={this.state.number}
          onChange={number => this.setState({number})}
        />

(I also have number set to 0 in the initial state) and I get this error:

error: bundling failed: node_modules\react-native-numeric-input\NumericInput\NumericInput.js: C:\Users\andre\Documents\geopad\node_modules\react-native-numeric-input\NumericInput\NumericInput.js: Missing class properties transform.
  30 |         }
  31 |     }
> 32 |     updateBaseResolution = (width, height) => {
     |     ^
  33 |         calcSize = create({ width, height })
  34 |     }
  35 |     inc = () => {

I have the following packages installed;

...
"dependencies": {
    "@babel/preset-env": "^7.9.0",
    "@react-native-community/cli": "^4.3.0",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/picker": "^1.3.0",
    "@react-native-firebase/app": "~6.3.4",
    "@react-native-firebase/auth": "~6.3.4",
    "@react-native-firebase/firestore": "~6.3.4",
    "@react-native-firebase/functions": "~6.3.4",
    "@react-native-firebase/storage": "~6.3.4",
    "eject": "0.0.4",
    "moment": "^2.24.0",
    "npx": "^10.2.2",
    "react": "16.9.0",
    "react-native": "^0.61.5",
    "react-native-easy-toast": "^1.2.0",
    "react-native-eject": "^0.1.2",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-image-picker": "0.28.0",
    "react-native-image-resizer": "^1.2.0",
    "react-native-lightbox": "^0.8.1",
    "react-native-maps": "0.27.1",
    "react-native-numeric-input": "^1.8.3",
    "react-native-reanimated": "^1.7.0",
    "react-native-router-flux": "^4.2.0",
    "react-native-screens": "^2.3.0",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-vector-icons": "^6.6.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "shelljs": "^0.8.3",
    "ts-jest": "^25.2.1",
    "util": "^0.12.2",
    "uuid-random": "^1.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/runtime": "^7.8.7",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "^25.2.3",
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "^16.13.1"
  },
...

I've googled this error and it seems to be something related to babel, but I don't know anything about babel, and none of the other situations that give rise to this error seem similar or relevant, as far as I can tell...

AndroidDoctorr commented 4 years ago

Nevermind, I needed to install babel-plugin-transform-class-properties and include it in my .babelrc file:

{
  "plugins": [
    "transform-class-properties"
  ]
}

So for anyone else with this issue that's hopefully the solution