Skip to content
This repository was archived by the owner on Jan 26, 2019. It is now read-only.
This repository was archived by the owner on Jan 26, 2019. It is now read-only.

Cannot mix JS and TS in a single project #266

Closed
@compulim

Description

@compulim

Is this a bug report?

Yes.

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

"Mix JS and TS"

Environment

  1. npm ls react-scripts-ts (if you haven’t ejected): 2.13.0
  2. node -v: 9.6.1
  3. npm -v: 5.6.0
  4. yarn --version (if you use Yarn):

Then, specify:

  1. Operating system: Windows 10 (Insider Fast 17107)
  2. Browser and version (if relevant): N/A

Steps to Reproduce

(Write your steps here:)

  1. Run create-react-app my-app --scripts-version react-scripts-ts
  2. Rename /my-app/src/App.tsx to App.js
  3. Run npm run build

Expected Behavior

It should compile successfully. We should be able to write apps mixed with JSX and TSX. That's why in tsconfig.json, we set jsx to react.

Actual Behavior

It failed with:

./src/App.js
Module parse failed: C:\Users\JohnDoe\Source\Repos\my-app\node_modules\source-map-loader\index.js!C:\Users\JohnDoe\Source\Repos\my-app\src\App.js Unexpected token (9:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div className="App">
|         <div className="App-header">
|           <img src={logo} className="App-logo" alt="logo" />

This StackOverflow answer have some insights into the problem, by using react-app-rewired. By running thru JS/X files with Babel (without eject).

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions