Doesn't Compile

[AlexBasile123]

I wanted to use your component.

I'm getting compilations errors after adding: "import SegmentedControl from '@react-native-segmented-control/segmented-control/SegmentedControl.js';" to my js file.

I'm running on a Mac.

I've followed the installation instructions. I can see the module in node_modules.

Please advise.

-------------------------- Error Message ----------------------------

react-scripts build

Creating an optimized production build...
Failed to compile.

./node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js
SyntaxError: /Users/alexbasile/jars_workspace/src/gitlab.com/jarsgroup/ras.gg/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControl.js: Unexpected token (18:12)

16 | } from 'react-native';
17 |

18 | import type {SegmentedControlProps} from './types';
| ^
19 | import {SegmentedControlTab} from './SegmentedControlTab';
20 | import {SegmentsSeparators} from './SegmentsSeparators';
21 |
at parser.next ()

[Hafiz]

Same here using it with react-native-web

[ihor-zhvanko]

Also had an issue in segmented-input with react-native-web. Just modify your webpack.config.js where you configure your babel loader:

// Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    // extra modules to compile 
    path.resolve(appDirectory, 'node_modules/@react-native-segmented-control/segmented-control'),
  ],

Adding this solves the problem:

path.resolve(appDirectory, 'node_modules/@react-native-segmented-control/segmented-control'),

[Matěj Balga]

I needed to make this work with NextJS and achieved that using a webpack loader, that strips away the flow types (which is the root cause of the problem:

1. install the loader with yarn -D add remove-flow-types-loader
2. Adjust webpack config (e.g. in next.config.js)

webpack: c => {
      c.module.rules.push({
        test: /\.jsx?$/,
        use: ['remove-flow-types-loader'],
      });
      return c;
    },

Solution with babel will be similar. Hope this helps!

[Conor O'Brien]

I needed to make this work with NextJS and achieved that using a webpack loader, that strips away the flow types (which is the root cause of the problem:

Thanks @balgamat your solution helped me get most of the way. I have a similar use case with @expo/next-adapter

I also had to add the package to transpilePackages in next.config.js so my full solution looks like this:

const nextConfig = {
  reactStrictMode: false,
  transpilePackages: [
    '@react-native-segmented-control/segmented-control',
    // blah blah blah...
  ],
  webpack: (c) => {
    c.module.rules.push({
      test: /\.jsx?$/,
      use: ['remove-flow-types-loader']
    })
    return c
  }
}

module.exports = withExpo(nextConfig)