Skip to content
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 opened this issue Feb 28, 2018 · 1 comment
Closed

Cannot mix JS and TS in a single project #266

compulim opened this issue Feb 28, 2018 · 1 comment

Comments

@compulim
Copy link

compulim commented Feb 28, 2018 •
edited
Loading

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.)
@compulim
Copy link
Author

It was fixed in PR #242. Waiting for a drop.

eanders-ms pushed a commit to microsoft/BotFramework-Emulator that referenced this issue Apr 27, 2018
Merged PR 4076: Revisit all package.json and lerna setup
9712da8 
# Changelog
* Put `devDependencies` to root, fixed `package-lock.json`
  * Removed unnecessary `devDependencies`
  * Please use `lerna add` from now on, don't use `npm install` or edit `package.json`
    * To add `jest` as `devDependencies` to `botframework-emulator-shared` package
    * At root, run `npm install jest --save-dev` followed by `lerna add jest --dev --scope=botframework-emulator-shared`
  * Please commit `package-lock.json` if you have any changes
    * Lerna [bug](lerna/lerna#1290) may cause unnecessary changes in `package-lock.json`, `#master` or `@3.0.0` will fix it
    * Until their next drop, please verify/tweak your changes in `package-lock.json` before committing the file
* Bumped all dependencies to latest version
  * We are on latest `typescript@2.7.2` 🎉
  * `electron@1.8.1`
  * `restify@4.3.2` (@6 now, but their plugins architecture changed)
* Scoping internal packages with `@bfemulator` for CI/CD on our NPM feed
  * `/app/client` (`botframework-emulator-client`) is now `@bfemulator/client`
  * `/app/shared` (`botframework-emulator-shared`) is now `@bfemulator/app-shared`
* Revisited all `.gitignore` files
* Added `npm test` scripts to all `package.json`, by default, use `jest`
* Temporarily added `react-app-rewired` to mix JSX in TypeScript React app (broken since `react-scripts-ts@>2.9.0`)
  * [Tracking bug](wmonk/create-react-app-typescript#266) at `react-scripts-ts`, their [next drop](wmonk/create-react-app-typescript#242) should have it

# Notes
Added few TypeScript ignores because:

* Some typings are wrong (added `skipLibCheck`)
* Some typings are outdated (using `any` type)
This was referenced Jul 16, 2020
Open
Open
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@compulim