Module parse failed: The keyword 'interface' is reserved

[enes-get-local]

Bit version: 0.0.337 Node version: v12.18.3 npm version: 6.14.6 Platform: Windows WSL2 Ubuntu Bit compiler (include version): bit.envs/compilers/react-typescript@3.1.53 Bit tester (include version):

I m using bit harmony in my next js project. I exported simple component has two dependencie. So i get Module parse failed: The keyword 'interface' is reserved when try to work it.

import React from 'react';
import { Property } from 'csstype';
import LocalButton from '@local/local-ui.common.button.local-button';
import LocalIconButtonWithTitle from '@local/local-ui.common.button.local-icon-button-with-title';
import { Block } from 'baseui/block/index';

interface Props {
  height: string;
  buttons: Array<any>;
  groupType?: 'action' | 'button';
  columnGap?: Property.Width;
}

const LocalButtonGroup: React.FC<Props> = ({ groupType, height, buttons, columnGap }) => {
  const buttonCount = buttons?.length;
  let templateColumns = '';
  [...Array(buttonCount)].map(() => {
    templateColumns = templateColumns.concat('auto ');
  });

  const generateButton = (button: any, index: number) => {
    switch (groupType) {
      case 'action': {
        return (
          <LocalIconButtonWithTitle
            disabled={button.disabled}
            icon={button.icon}
            iconAlt={button.iconAlt}
            isLoading={button.loading}
            isSelected={button.selected}
            kind={button.kind}
            shape={button.shape}
            size={button.size}
            title={button.title}
            height={button.height}
            width={button.width}
            backgroundColor={button.backgroundColor}
            backgroundColorHover={button.backgroundColorHover}
            backgroundColorActive={button.backgroundColorActive}
            social={button.social}
            onClick={button.onClick}
            key={`${button.alt}-${index}`}
          />
        );
      }
      case 'button': {
        return (
          <LocalButton
            isFullWidth={true}
            disabled={button.disabled}
            icon={button.icon}
            iconAlt={button.iconAlt}
            isLoading={button.loading}
            isSelected={button.selected}
            kind={button.kind}
            shape={button.shape}
            size={button.size}
            title={button.title}
            type={button.type}
            borderRadius={button.borderRadius}
            height={button.height}
            width={button.width}
            backgroundColor={button.backgroundColor}
            backgroundColorHover={button.backgroundColorHover}
            backgroundColorActive={button.backgroundColorActive}
            social={button.social}
            onClick={button.onClick}
            key={`${button.alt}-${index}`}
          />
        );
      }
      default: {
        return (
          <LocalButton
            disabled={button.disabled}
            icon={button.icon}
            iconAlt={button.iconAlt}
            isLoading={button.loading}
            isSelected={button.selected}
            kind={button.kind}
            shape={button.shape}
            size={button.size}
            title={button.title}
            type={button.type}
            height={button.height}
            width={button.width}
            backgroundColor={button.backgroundColor}
            backgroundColorHover={button.backgroundColorHover}
            backgroundColorActive={button.backgroundColorActive}
            social={button.social}
            onClick={button.onClick}
            key={`${button.alt}-${index}`}
          />
        );
      }
    }
  };

  return (
    <Block
      display="grid"
      gridTemplateColumns={templateColumns}
      height={height}
      gridColumnGap={columnGap}
      alignContent="center"
    >
      {buttons.map((button, index) => generateButton(button, index))}
    </Block>
  );
};

LocalButtonGroup.defaultProps = {
  columnGap: '3px',
  groupType: 'button',
};

export const id = 'com.local.componentTemplate.ButtonGroup';
export default LocalButtonGroup;

 "bit": {
    "env": {
      "compiler": "bit.envs/compilers/react-typescript@3.1.53"
    },
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm"
  }

[davidfirst]

@enes-get-local , I'm a bit confused. You're working on Harmony project, however the last snippet you added is legacy. The following doesn't work on Harmony:

"env": {
      "compiler": "bit.envs/compilers/react-typescript@3.1.53"
    },

And this compiler doesn't work with Harmony code.

Also, it's not clear which command failed.

[enes-get-local]

@enes-get-local , I'm a bit confused. You're working on Harmony project, however the last snippet you added is legacy. The following doesn't work on Harmony:

"env": {
      "compiler": "bit.envs/compilers/react-typescript@3.1.53"
    },

And this compiler doesn't work with Harmony code.

Also, it's not clear which command failed.

@davidfirst ignore it. Compiler lines added long time ago when I try to get used bit. I realized that my import line was wrong so now it looks work.

[benjgil]

Hi @enes-get-local - if you're able to, can you please post here exactly which line/s you changed to solve the issue, as reference for other bit users?

[hopingsteam]

I am also encountering the same problem..