Breaks with @react-native-community/[email protected]

[ifiokjr]

Expected results

The project should initialise properly.

Observed results

Can't be built because of the new template api documented here

Logs

✔ Downloading template
✖ Copying template
error Error: Cannot find module '/var/folders/78/49srzccj41jg4k660nnt6b8w0000gn/T/rncli-init-template-1UgDus/node_modules/react-native-template-typescript/template.config'

Steps to reproduce

1. Install the latest version of the cli

yarn global add @react-native-community/[email protected] 
# Or 
npm i -g @react-native-community/[email protected]

2. Create the app

react-native init YoYoYo --version react-native@next --template typescript

3. Observe the failure

[ifiokjr]

Okay, this seems to be a general problem with the latest version of @react-native-community/cli.

I'm seeing the issue even with a plain setup.

npx [email protected] init YoYoYo

With the same error

✔ Downloading template
✖ Copying template
error Error: Cannot find module '/var/folders/78/49srzccj41jg4k660nnt6b8w0000gn/T/rncli-init-template-oKCDRL/node_modules/react-native/template.config'

They don't seem to be using the latest template version yet either.

[emin93]

Thanks for creating the issue and raising awareness about the new CLI changes. Luckily it seems like it can be fixed easily by creating a template config file and changing the folder structure. As this will break the process in the current CLI, I'll do that in a separate branch and release a pre-release version.

[emin93]

Okay, I did some progress with the changes but I'm going to pause it for now.

As you already figured out, the current (and also the one from 0.60.0-rc.1) default React Native template isn't ready yet for the new CLI. Therefore I can't use it as a reference point for the TypeScript template. There is a sample template for the new CLI but even that one doesn't work.

It also seems like the CLI documentation isn't up to date anymore as a few things don't work as described (template.config doesn't work if it has the .js extension, misleading sample post install script as the script is not being executed as a node script).

Let's just wait a little more until the things get a bit more stable 😄.

[thymikee]

Hey! Looks like we didn't communicate clearly enough on how the new init works.

When you call:

npx [email protected] init Project

the init will use the latest tag from npm (currently 0.59.9, which is not supported).

To use a new init in RC phase you need to use --template argument, like this:

npx [email protected] init [email protected] Project

After RN 0.60 is stable, it's gonna be as easy as:

npx react-native init Project

I think the docs are pretty clear on that. However if you still find something not being obvious enough, please send PRs with clarifications 🙏 (we're clearly biased because we created the new command, so any outside feedback is appreciated).

It's also worth to note that the legacy init (as we call react-native init now using global react-native-cli) is not going anywhere soon, because a lot of guides and tutorials use that and we don't want to break it especially for newcomers.

[emin93]

Hi Michał 😄

Oh wow, I feel honored to have you here! Thanks a lot for helping out and clarify a few things.

There are a few things that are documented differently than the actual implementation, which confused me and that's why I paused for now. I'm also not quite sure if it's either documented or implemented "incorrectly" because both could be intentional. But hey, let's move that discussion over to the soon to be created PR in the CLI repo. 👍

Cheers

[thymikee]

If you mean moving this template to CLI, then that's not a good idea. However we're happy to have it in react-native-community :)

[emin93]

Ah I see how you came here 😄.

Yeah no, I meant the PR which contains the doc changes because it's not directly related with this template.

P.S. I agree it's not a good idea to integrate it directly in the CLI.

[emin93]

FYI: I created a separate issue to discuss how to handle both CLI versions.

[paulmelnikow]

I see that RN 0.60 has been released. Is there a way to use this template with the current version of the CLI?

[emin93]

The migration process isn't finished yet, so you'd have to be a bit patient. But as Michał mentioned, the legacy CLI is still working, you can use that in the meantime. 🙂

[JunichiSugiura]

@paulmelnikow I submitted PR #45 to make master-cli-v2 branch work. It hasn't been merged yet you can try out this command for now.

npx react-native init MyApp --template=https://github.com/LukeSugiura/react-native-template-typescript#master-cli-v2

[emin93]

You can now use the new CLI to create a project 🎉 : npx react-native init MyApp --template react-native-template-typescript@next

[beau6183]

@emin93 Getting the following exception on an unchanged project using the above command:

Unable to resolve module `./../../../../../../../../.nvm/versions/node/v10.16.0/lib/node_modules/@react-native-community/cli/node_modules/react-transform-hmr/lib/index.js` from `/Users/bscott/src/lifetime/AthlinksMobile/node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS.ios.js`: The module `./../../../../../../../../.nvm/versions/node/v10.16.0/lib/node_modules/@react-native-community/cli/node_modules/react-transform-hmr/lib/index.js` could not be found from `/Users/bscott/src/lifetime/AthlinksMobile/node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS.ios.js`. Indeed, none of these files exist:
  * `/Users/bscott/.nvm/versions/node/v10.16.0/lib/node_modules/@react-native-community/cli/node_modules/react-transform-hmr/lib/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`
  * `/Users/bscott/.nvm/versions/node/v10.16.0/lib/node_modules/@react-native-community/cli/node_modules/react-transform-hmr/lib/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
0x0

(putting here because the template github repo doesn't accept issues)

[emin93]

On first glance it looks like you're using an old version of RN. But that shouldn't be if you set up the project with the exact above command. Can you check the package.json for the RN version?

How do you mean the template repo doesn't accept issues?