Create-react-app: Loader for TypeScript dependencie

[fabienbranchel]

Is this a bug report?

Maybe.

I'm starting a project with your very newly create react app --typescript :)

I import a class located in .tsx file, from the project, in App.tsx :

import Home from './components/home/Home';

Classic scenario, works fine.

I'm trying to import a class located in .tsx file, from an NPM module, in App.tsx, :

import Home from "@npmmodule/home/Home";

I've got this issue when I run my npm start :

./node_modules/@npmmodule/home/Home.tsx 4:0
Module parse failed: The keyword 'interface' is reserved (4:0)
You may need an appropriate loader to handle this file type.

Do I need to implement a loader myself to handle that ?

NB : The files are exactly the same. This is the code of both Home.tsx :

import * as React from 'react';
import './Home.scss';

interface IHomeProps {
  value: string,
  name: string
}

interface IHomeState {
  merge: string
}

class Home extends React.Component<IHomeProps, IHomeState>{
  constructor(props: IHomeProps) {
    super(props);
    this.state = {
      merge: props.value + props.name
    };
  }

  public render() {
    return (
      <div>Working. Merge: { this.state.merge }</div>
    )
  }
}

export default Home;

[kdela]

I'm not sure is that related, but It's also not possible to import interface from external dependency.

import { withNamespaces, WithNamespaces } from 'react-i18next';

Attempted import error: 'WithNamespaces' is not exported from 'react-i18next'.

Interface WithNamepsaces is exported from /node_modules/react-i18next/index.d.ts

export interface WithNamespaces extends WithI18n {
  tReady: boolean;
  initialI18nStore?: {};
  initialLanguage?: string;
}

[bjarkehs]

Back when I tried to do something like this (with lerna) it was necessary to compile the Typescript component, since the Typescript compiler will expect everything in node_modules to be compiled already.

[Timer]

You cannot consume uncompiled TypeScript from npm. Be sure to compile the package before publishing it!

If this package is not yours, file an issue asking the package maintainer for a compiled copy.