ignite: Ignite generators don't work on Windows

Describe the bug

When generating a screen with a command such as npx ignite-cli generate screen TestScreen, the frontmatter gets left in if executing from a Windows machine. For example:

---
patch:
  path: "app/screens/index.ts"
  append: "export * from \"./TestScreen\"\n"
  skip: 
---
import React, { FC } from "react"
import { observer } from "mobx-react-lite"
import { ViewStyle } from "react-native"
import { StackScreenProps } from "@react-navigation/stack"
import { AppStackScreenProps, AppStackParamList } from "../navigators"
import { Screen, Text } from "../components"
// import { useNavigation } from "@react-navigation/native"
// import { useStores } from "../models"

// STOP! READ ME FIRST!
// To fix the TS error below, you'll need to add the following things in your navigation config:
// - Add `Test: undefined` to AppStackParamList
// - Import your screen, and add it to the stack:
//     `<Stack.Screen name="Test" component={TestScreen} />`
// Hint: Look for the 🔥!

// REMOVE ME! ⬇️ This TS ignore will not be necessary after you've added the correct navigator param type
// @ts-ignore
export const TestScreen: FC<StackScreenProps<AppStackScreenProps, "Test">> = observer(function TestScreen() {
  // Pull in one of our MST stores
  // const { someStore, anotherStore } = useStores()

  // Pull in navigation via hook
  // const navigation = useNavigation()
  return (
    <Screen style={$root} preset="scroll">
      <Text text="test" />
    </Screen>
  )
})

const $root: ViewStyle = {
  flex: 1,
}

Fix the new line parsing based on the platform we’re executing on to allow generators to be cross-platform

Ignite version

8.2.0

Additional info

System
  platform           win32
  arch               x64
  cpu                16 cores        Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
  directory          GeneratorTest   C:\temp\GeneratorTest

JavaScript (and globally-installed packages)
  node                16.14.2      C:\Program Files\nodejs\node.EXE
  npm                 8.6.0        C:\Program Files\nodejs\npm.CMD
    corepack          0.10.0
    eas-cli           0.60.0
    expo-cli          6.0.1
    ignite-cli        8.2.
    npm               8.6.0
    yarn              1.22.19
  yarn                1.22.19      C:\Program Files\nodejs\yarn.CMD
    create-expo-app   1.1.1
  pnpm                -            not installed
  expo                46.0.14      managed

Ignite
  ignite-cli         8.2.         C:\Program Files\nodejs\ignite.CMD
  ignite src         src          C:\Users\Frank\Documents\GitHub\ignite-cli\src

Android
  java               -            null
  android home       -            undefined

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 19 (8 by maintainers)

Most upvoted comments

@olnsbr @Badtor question for you both if you don’t mind trying something:

Since on Windows, can you open up one of the generator templates, ie: PizzaApp\ignite\templates\screen\NAMEScreen.tsx.ejs

Then, in VS Code (or however else you want to) change the line endings from LF to CRLF (which Windows expects, but it’s checked into git with regular LF). Safe that file.

Re-run the generator and see that it generates all the proper files and the front matter is removed.

This worked for me, hope it reproduces correctly.

I’m sorry for the late.

Thanks @frankcalise and @olnsbr, in definitely I have adopted the method of @olnsbr cause in VS Code I wasn’t able to see the EOF Symbols correctly. So as @olnsbr mention, these are my steps:

Opened the file, ie: PizzaApp\ignite\templates\screen\NAMEScreen.tsx.ejs
View -> Show Symbol -> Show End of Line
Edit -> EOL Conversion -> Windows
Save the file.
In prompt I’ve lounched: npx ignite-cli generate screen Dashboard

It works. <g-emoji alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png" class="social-button-emoji">🎉</g-emoji><g-emoji alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png" class="social-button-emoji">🎉</g-emoji><g-emoji alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png" class="social-button-emoji">🎉</g-emoji>

Thank you so much! <g-emoji alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f499.png?v8" class="social-button-emoji">💙</g-emoji>

Badtor on Jun 1, 2023

Thanks a lot @frankcalise, that was so easy. I used the Notepad++ EOL conversion tool and it fixed the problem.

Opened the file, ie: PizzaApp\ignite\templates\screen\NAMEScreen.tsx.ejs
View -> Show Symbol -> Show End of Line
Edit -> EOL Conversion -> Windows
Save the file.

Re-run the generator and worked fine.

Thanks again!

olnsbr on May 30, 2023

@Microhive should be automatic now in 8.10.1

Also made a documentation update in the event someone does need additional manual help with it, so thanks for that suggestion as well

frankcalise on Nov 3, 2023

@frankcalise I have the following setup:

Windows 11 64x 10.0.22621 Build 22621
Yarn 1.22.19
NPM 10.1.0
Node 20.5.1
Ignite 9.0.0-alpha.7.

Microhive on Nov 2, 2023

I didn’t know about that setting, that’s a great idea

joshuayoes on Aug 7, 2023

@joshuayoes maybe we can have prettier format these after copying via --end-of-line crlf for just those template files?

frankcalise on Aug 7, 2023

Thanks Every one;

For those who are still struggling in VS CODE

In VS code you can find the LF in bottom Tabbar right side
Opened the file, ie: PizzaApp\ignite\templates\screen\NAMEScreen.tsx.ejs
Change LF to CRLF
In prompt I’ve lounched: npx ignite-cli generate screen Dashboard
Boom It worked😎🎉

priyanshusaini105 on Jul 30, 2023

@olnsbr glad it worked for you! Thanks for confirming that fix, will figure out a solution to provide it in the cli so the end user doesn’t have to think about this.

frankcalise on May 30, 2023

@olnsbr @Badtor question for you both if you don’t mind trying something:

Since on Windows, can you open up one of the generator templates, ie: PizzaApp\ignite\templates\screen\NAMEScreen.tsx.ejs
Then, in VS Code (or however else you want to) change the line endings from LF to CRLF (which Windows expects, but it’s checked into git with regular LF). Safe that file.
Re-run the generator and see that it generates all the proper files and the front matter is removed.

This worked for me, hope it reproduces correctly.

frankcalise on May 30, 2023

@frankcalise @joshuayoes I still see this issue in my system using npx ignite-cli. The version I have:

windows 10

node --version: 18.12.1

npx ignite-cli --version: 8.4.2

npx --version: 8.19.2

Hey thanks for the update - we have a PR in the works here: https://github.com/infinitered/ignite/pull/2328

I just have to get pair with @joshuayoes at se point to clean up the unit tests, but I think the cli works.

Hope to fix it for you soon!

frankcalise on Dec 17, 2022