moschan / react-native-simple-radio-button

Simple and handy animated radio button component for React Native
MIT License
453 stars 130 forks source link

Getting "You may need an appropriate loader to handle this file type." when trying to implement your package. #87

Open faddah opened 6 years ago

faddah commented 6 years ago

Hello,

We're trying to implement your package in a project for a client that involves a multiple choice quiz. This project is using Storybook to create a library of the UI components we use and also the react-native-web npm package, so that in addition to an iOS & Android App, portions of it can be displayed on a web site. When trying to implement your package, we get the following error —

in ./node_modules/react-native-simple-radio-button/lib/SimpleRadioButton.js
Module parse failed: Unexpected token (28:22)
You may need an appropriate loader to handle this file type.
|     this._renderButton = this._renderButton.bind(this);
|   }
|   static defaultProps = {
|     radio_props: [],
|     initial: 0,
 @ ./node_modules/react-native-simple-radio-button/index.js 1:0-101
 @ ./src/components/ExerciseCard/ExerciseTypes/multipleChoice.js
 @ ./src/components/ExerciseCard/index.js
 @ ./src/components/ExerciseCard/__stories__/examples/PropMultiple.js
 @ ./src/components \__stories__\/.*.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

Here is the code we are trying to implement for this:

import React, { Component } from "react"
import { StyleSheet, Text, View } from "react-native"

import HTML from '../../HTML/html'
import { theme, COLORS } from '../../../_config'
import '../../../fonts/ttf-font.css'
import RadioForm, { RadioButton, RadioButtonInput, RadioButtonLabel } from 'react-native-simple-radio-button';

const _renderMultipleChoice = (choice, i) => {
  const radio_props = { label: choice, value: i }

  return (
    <RadioForm
      radio_props={radio_props}
      buttonColor={'cyan'}
      animation={true}
      onPress={value => this.setState({ value })}
    />
  )
}

const MultipleChoice = ({ content = [] }) => {
  state = {
    value: 0
  }
  return (
    <View style={styles.container}>
      <Text style={styles.questionText}>{content.question}</Text>
      <Text style={styles.answerTitle}>Answer:</Text>
      <View>{content.choices.map(_renderMultipleChoice)}</View>
    </View>
  )
}

export default MultipleChoice

const styles = StyleSheet.create({
  container: {
    minHeight: 400,
    minWidth: 600,
  },
  questionText: {
    fontSize: '13px',
    fontStyle: 'italic',
  },
  answerTitle: {
    fontSize: '16px',
    fontWeight: '700',
  },
  fontContent: {
    fontSize: '18px'
  },
})

Do you have any idea why this may be happening? Could it be conflict with react-native-web? Storybook? A combination of both? Please advise.

best,

— faddah

greenais commented 6 years ago

The root is 'static' prop in your class - you need babel 7 and @babel/plugin-proposal-class-properties for webpack