ignite-cli complains when doing import on multiple lines

Created on 13 Jun 2017 · 12Comments · Source: infinitered/ignite

What's going on?
I get a debug error message when trying to do ignite generate screen MyVehicles.

Development/Work/Alterview.OpusApp  reactnavigation-redux ✗                                                                                                                         0m ⚑
▶ ignite generate screen MyVehicles

✔︎ App/Containers/MyVehiclesScreen.js
✔︎ App/Containers/Styles/MyVehiclesScreenStyle.js
vvv -----[ DEBUG ]----- vvv
Error: 'import\s+.+?\s+from\s+'react-navigation';?' was not found in file /Users/nonameolsson/Development/Work/Alterview.OpusApp/App/Navigation/AppNavigation.js.
    at Object.insertInFile (/usr/local/lib/node_modules/ignite-cli/src/extensions/patching.js:31:33)
    at Object.patchInFile (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/patchInFile.js:44:16)
    at Object.module.exports [as run] (/Users/nonameolsson/Development/Work/Alterview.OpusApp/node_modules/ignite-ir-next/commands/screen.js:50:12)
    at process._tickCallback (internal/process/next_tick.js:109:7)
    at Module.runMain (module.js:607:11)
    at run (bootstrap_node.js:423:7)
    at startup (bootstrap_node.js:147:9)
    at bootstrap_node.js:538:3
^^^ -----[ DEBUG ]----- ^^^

After multiple times I figured out why. My code in AppNavigation.js is:

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import {
  StackNavigator,
  TabNavigator,
  addNavigationHelpers
} from 'react-navigation'
import MyVehiclesScreen from '../Containers/MyVehiclesScreen'
...

But if I change it to:

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { StackNavigator, TabNavigator, addNavigationHelpers } from 'react-navigation'
import MyVehiclesScreen from '../Containers/MyVehiclesScreen'

then it works.

I use Prettier and StandardJS, so the code is automatically formatted on multiple lines.

Steps to reproduce

Do a multirow import in AppNavigation.js.
ignite generate screen MyVehicles

3. Tada!

ignite doctor results:

System
  platform           darwin
  arch               x64
  cpu                8 cores                                                  Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  directory          /Users/nonameolsson/Development/Work/Alterview.OpusApp

JavaScript
  node               7.8.0        /usr/local/bin/node
  npm                4.2.0        /usr/local/bin/npm
  yarn               0.24.6       /Users/nonameolsson/.yarn/bin/yarn

React Native
  react-native-cli   2.0.1
  app rn version     0.44.2

Ignite
  ignite             2.0.0-rc.1   /usr/local/bin/ignite

Android
  java               1.8.0_112    /usr/bin/java
  android home       -            /usr/local/opt/android-sdk

iOS
  xcode              8.3.3

bug help wanted

Source

nonameolsson

👍3

Most helpful comment

you can ignite add the github or when this publish happens, you can ignite add the @latest version of the update. This will update your generators.

GantMan on 27 Jun 2017

👍2

All 12 comments

The issue is in the pattern that we are using in the generator to add to the import statement:

https://github.com/infinitered/ignite-ir-boilerplate/blob/master/commands/screen.js#L51

Pattern is located here:

https://github.com/infinitered/ignite-ir-boilerplate/blob/master/lib/patterns.js#L8

We need to adjust that pattern to accommodate multi-line imports. @nonameolsson , are you interested in taking a crack at this over in the boilerplate repo?

jamonholmgren on 23 Jun 2017

@jamon - We're trying to be cool and put the code right after the navigation stack... but there's no reason why it has to be there.

Regardless, we can still do it. This Regex (unescaped) will overmatch, but place the code in the desired spot.
https://regex101.com/r/zdUO1z/1

Open to feedback, but it's a 1 line pull-request if we're good.

GantMan on 24 Jun 2017

👍1

Pushed up the new regex as https://github.com/infinitered/ignite-ir-boilerplate/pull/94.

jamonholmgren on 24 Jun 2017

👍1

@jamonholmgren Great!
So.. I have a project generated before this fix. Each time I generate a component I get this error message. How would I do to get this update in my project?

nonameolsson on 27 Jun 2017

you can ignite add the github or when this publish happens, you can ignite add the @latest version of the update. This will update your generators.

GantMan on 27 Jun 2017

👍2

@GantMan , please tell , how to apply this fix in previous projects

devanshsadhotra on 3 Aug 2017

@devanshsadhotra Does ignite add ignite-ir-boilerplate work for you?

jamonholmgren on 10 Aug 2017

@jamonholmgren , no it did not . It still works same, the create containers are not added to appNavigation.js .

devanshsadhotra on 10 Aug 2017

vvv -----[ DEBUG ]----- vvv
Error: 'import[\s\S]*from\s+'react-navigation';?' was not found in file E:\ReactNativeYoungClay\youngclay/App/Navigation/AppNavigation.js.
    at Object.insertInFile (C:\Users\oserlabs\AppData\Roaming\npm\node_modules\ignite-cli\src\extensions\patching.js:31:33)
    at Object.patchInFile (C:\Users\oserlabs\AppData\Roaming\npm\node_modules\ignite-cli\src\extensions\ignite\patchInFile.js:44:16)
    at Object.module.exports [as run] (E:\ReactNativeYoungClay\youngclay\node_modules\ignite-ir-boilerplate\commands\container.js:49:12)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:607:11)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

devanshsadhotra on 10 Aug 2017

@GantMan Any updates on this?