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

[faddah]

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]

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