Module parse failed: Unexpected token (18:22)

[Shamoon Siddiqui]

Expected Behavior

Should not have the error

Current Behavior

Error I get is:

 error ] ./node_modules/@ptomasroos/react-native-multi-slider/MultiSlider.js 18:22
Module parse failed: Unexpected token (18:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export default class MultiSlider extends React.Component {
>   static defaultProps = {
|     values: [0],
|     onValuesChangeStart: () => {},

Possible Solution

Steps to Reproduce (for bugs)

My _app.tsx has:

import App from 'next/app'
import { UIProvider } from 'react-native-web-ui-components';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <UIProvider amp={false}><Component {...pageProps} /></UIProvider>
  }
}

export default MyApp

Context

Your Environment

    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
    IDEs:
      Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
    npmPackages:
      expo: ^37.0.8 => 37.0.8 
      react: ~16.9.0 => 16.9.0 
      react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 

[CareLuLu Gabriel]

@shamoons it seems that the problem is related to parsing the word static. Are you using babel-preset-expo?

Based on your code, I tested something similar and it worked. Here are my steps:

1. I stated a new project with expo init. I think you project is missing the babel.config.js:

2. Added the dependencies:

$ yarn add react-router react-router-native react-native-web-ui-components

3. Changed the App.js:

import React from 'react';
import { StyleSheet } from 'react-native';
import {
  UIProvider,
  Column,
  Slider,
  Bold,
  MainContainer
} from 'react-native-web-ui-components';
import { useScreen } from 'react-native-web-ui-components/Screen';

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
  },
  center: {
    alignItems: 'center',
  },
});

const App = () => {
  const screen = useScreen();
  return (
    <UIProvider amp={false}>
      <MainContainer style={styles.container}>
        <Column xs={12} style={styles.center}>
          <Bold auto>Slider Test</Bold>
          <Slider
            min={0}
            max={1440}
            step={15}
            values={[900, 1200]}
            sliderLength={parseInt(screen.width * 0.8, 10)}
          />
        </Column>
      </MainContainer>
    </UIProvider>
  );
}

export default App;

4. Ran the project with yarn start.

Here is the result:

[Shamoon Siddiqui]

The only other thing I had was next.js, which has a babel.config.js:

module.exports = { presets: ['@expo/next-adapter/babel'] };

[CareLuLu Gabriel]

@shamoons I didn't understand your comment.

1. Do you have a babel.config.js or is the code above in the file next.js?
2. If you used nextjs framework, what command did you use to start?

If you could create a repository with a simple example of your code, it'd be helpful.

I replaced my babel.config.js with the preset you're using and it worked as well.

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['@expo/next-adapter/babel'], // ['babel-preset-expo'],
  };
};

[CareLuLu Gabriel]

@shamoons, I'm closing this bug but feel free to send a minimal repository so we can help you find any problems.

[chichke]

Same issue whenever i import any of the component in this module

Babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

Package.json

    "expo": "~37.0.9",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
    "react-native-web": "~0.11.7",
    "react-native-web-ui-components": "^4.1.5",

[CareLuLu Gabriel]

@chichke

Please run:

yarn add @babel/plugin-proposal-class-properties

And try changing your babel.config.js to:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['@babel/plugin-proposal-class-properties'],
  };
};

[chichke]

Added what you told me and still same error

[CareLuLu Gabriel]

@chichke please upgrade to react-native-web-ui-components@5.0.1. I removed Slider from the library since it hasn't been maintained and updated on npm. Please let me know if it works this time.