New project with typescript template causes Haste module naming collision error

[stefanedberg]

When creating a new React Native project with typescript template the following error occurs:

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   /Users/user/development/ProjectName 

Loading dependency graph...jest-haste-map: Haste module naming collision: ProjectName
  The following files share their name; please adjust your hasteImpl:
    * <rootDir>/package.json
    * <rootDir>/template/package.json

Failed to construct transformer:  { Error: Duplicated files or mocks. Please check the console for more info
    at setModule (/Users/user/development/ProjectName/node_modules/jest-haste-map/build/index.js:620:17)
    at workerReply (/Users/user/development/ProjectName/node_modules/jest-haste-map/build/index.js:691:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  mockPath1: 'package.json',
  mockPath2: 'template/package.json' }
(node:4451) UnhandledPromiseRejectionWarning: Error: Duplicated files or mocks. Please check the console for more info
    at setModule (/Users/user/development/ProjectName/node_modules/jest-haste-map/build/index.js:620:17)
    at workerReply (/Users/user/development/ProjectName/node_modules/jest-haste-map/build/index.js:691:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:4451) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:4451) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Error: Duplicated files or mocks. Please check the console for more info
    at setModule (/Users/user/development/ProjectName/node_modules/jest-haste-map/build/index.js:620:17)
    at workerReply (/Users/user/development/ProjectName/node_modules/jest-haste-map/build/index.js:691:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)

React Native version:

    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 530.60 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.5.1 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 22, 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.2, 27.0.3, 28.0.3
      System Images: android-22 | Intel x86 Atom, android-22 | Intel x86 Atom_64, android-22 | Google APIs Intel x86 Atom_64, android-23 | Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Android TV Intel x86 Atom, android-26 | Android Wear Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom
      Android NDK: 16.1.4479499
  IDEs:
    Android Studio: 3.1 AI-173.4697961
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.5 => 0.60.5
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-app-id: 0.0.4
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

Steps To Reproduce

1. react-native init ProjectName --template typescript
2. cd ProjectName && react-native run-ios

Describe what you expected to happen:
The development server should start and the app would run successfully.

[lordkiz]

There appears to be a package.json file in both ./rootAppFolder and ./rootAppFolder/template. I wonder if the default file structure should be so.

[kristianhasselknippe]

Removing the template folder fixed the issue for me. Thanks for the hint @lordkiz

[lordkiz]

@kristianhasselknippe if you still want to use typescript after removing the template folder, just follow the instructions on https://github.com/Microsoft/TypeScript-React-Native-Starter

[ycai2]

I'm facing the same issue. The above solution definitely will work, but it feels wrong...
Isn't the whole point of init --template typescript to have a typescript RN project without any manual installation? Just removing the template folder and manually install typescript would defeat the purpose of --template config, no? ... Does this mean that template support is being dropped?
If it were just a bug, it'd all make sense though.

[larkintuckerllc]

FYI... Just over a month ago, I used the documented --template typescript approach and got a fully operational solution. Used as a baseline for an article that I wrote about adding ESLint for linting.

Happened to notice today that the exact same command produces a completely different project.

Here is the repository, with the Baseline commit being what was generated by the command at the time.

https://github.com/larkintuckerllc/ESLintReactNative/tree/60c1ffc99be6485a6dfb55971c3c2dd93a6af861

[ycai2]

@stefanedberg I also found react-native-community/react-native-template-typescript#64. Don't if it's related or whether it could help.
It seems somehow you have to npm uninstall react-native-cli first, as an IMPORTANT STEP.

[larkintuckerllc]

FYI.. Confirmed that the updated command of:

npx react-native init [YOUR PROJECT] --template react-native-template-typescript

starts up an entirely different looking installer (blue logo, etc). Also looks like you have to refer to the template directly (not just typescript).

[alradadi]

npm uninstall -g react-native-cli
npx react-native init MyApp --template react-native-template-typescript

This worked for me.

[andytrich]

I was caught out by this too. abdullah-sr soloution worked for me.

The CLI git hub page recommends using the local command npx react-native init MyApp --template react-native-template-typescript rather than the global react-native init MyApp --template typescript

We strongly encourage you to only use global react-native-cli for bootstrapping new projects. Use local version for everything else.

To be fair even the getting started documentation is lagging behind https://facebook.github.io/react-native/docs/typescript

[cargallo]

It seems that people behind react native strives the community to move to flutter platform. Lately coding on this is a hell of warnings, deprecations and this kind of problems where something that works a month ago, suddenly stops working with no reasonable cause

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.