Fix BLUI RN CLI command

ektaghag-eaton commented 1 year ago

Fixes 4881 .

Changes proposed in this Pull Request:

Fix 188

Screenshots / Screen Recording (if applicable)

All template creates project after fixing an error for transformIgnorePatterns .

Blank Template

To Test:

run yarn build under blui-cli
yarn unlink
yarn unlink "@brightlayer-ui/cli"
yarn link "@brightlayer-ui/cli"
blui new

Any specific feedback you are looking for?

Fixing yarn test command

joebochill commented 1 year ago

Might just be me/my local setup, but I tried creating a new project (auth template) and running it fails:

huayunh commented 1 year ago

I wish our CLI had a "precheck" for the user's dev environment before installing stuff, and output recommended dev environment set up.

JeffGreiner-eaton commented 1 year ago

been looking a this and several attempts move our code over to AwesomeProject but still had similar issues as @joebochill mentioned. There are several issues open here on compileC items https://github.com/facebook/react-native/issues?q=is%3Aissue+is%3Aopen+compilec

Also we are installing latest of react-native 72.7 and there seems to be more issues around that. RN 72.7 requires react-native-reanimated 3.0.X and we use 2.0.X https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility/#:~:text=To%20use%20Reanimated%20with%20the,stable%20version%20of%20React%20Native.

Some other findings

https://www.linkedin.com/pulse/react-native-developers-beware-xcode-143-update-heres-rajendran

ektaghag-eaton commented 12 months ago

https://github.com/facebook/react-native/issues?q=is%3Aissue+is%3Aopen+compilec

Might just be me/my local setup, but I tried creating a new project (auth template) and running it fails:

The Blank Template works fine. The auth and route template gives the error that you mentioned.

ektaghag-eaton commented 12 months ago

been looking a this and several attempts move our code over to AwesomeProject but still had similar issues as @joebochill mentioned. There are several issues open here on compileC items https://github.com/facebook/react-native/issues?q=is%3Aissue+is%3Aopen+compilec

Also we are installing latest of react-native 72.7 and there seems to be more issues around that. RN 72.7 requires react-native-reanimated 3.0.X and we use 2.0.X https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility/#:~:text=To%20use%20Reanimated%20with%20the,stable%20version%20of%20React%20Native.

Some other findings

https://www.linkedin.com/pulse/react-native-developers-beware-xcode-143-update-heres-rajendran

Fixed dependecies https://github.com/etn-ccis/blui-react-native-cli-templates/pull/102

JeffGreiner-eaton commented 12 months ago

@ektaghag-eaton after talking with you about failing tests on routing, I tested out a few things. In pxblue-extensions I tried appending jest(-.)? and spun up a new project but it gave error on jest-runner, so I added jest-runner which doesn't make sense because I specified jest(-.) which should cover anything for jest.

transformIgnorePatterns: [
        "node_modules/(?!(jest(-.*)?|jest-runner|react-native|@react-native/*|react-native-vector-icons|react-native-animatable|react-native-reanimated|react-native-iphone-x-helper|react-native-modal|react-native-collapsible|@react-native/polyfills|react-native-status-bar-height|react-native-webview|react-native-webview/*)/)"

With the above configuration the test failed on private methods from babel, so I added the additional plugin '@babel/plugin-transform-private-methods', { "loose": true } to the routing project I spun up

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    // react-native-reanimated/plugin must be listed last
    plugins: [
        'react-native-reanimated/plugin',
        ['@babel/plugin-transform-private-methods', { "loose": true }]
    ],
};

My current error details

Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers.

Details:
/blui-react-native-cli-templates/testrouting/node_modules/@brightlayer-ui/react-native-components/
node_modules/react-native-modal/dist/index.js:1 ({"Object<anonymous>":function(module,exports,require,__dirname,__filename,jest)
{import { ReactNativeModal } from './modal';

SyntaxError: Cannot use import statement outside a module

1 | import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@brightlayer-ui/react-native-components'; | ^ 2 | import React, { useState, useCallback } from 'react'; 3 | import * as Colors from '@brightlayer-ui/colors'; 4 | import { StackNavigationProp } from '@react-navigation/stack';

joebochill commented 12 months ago

Add @brightlayer-ui/react-native-components to the transformIgnore pattern or change the test so it's not rendering the entire application like we did for React:

it('renders correctly', () => {
  renderer.create(<View />);
});

Or both. It's probably best to add the entry to the transform ignore anyway if our components are going to be causing challenges with jest.

ektaghag-eaton commented 12 months ago

Add @brightlayer-ui/react-native-components to the transformIgnore pattern

Added @brightlayer-ui/react-native-components to the transformIgnore pattern

Add @brightlayer-ui/react-native-components to the transformIgnore pattern or change the test so it's not rendering the entire application like we did for React:
it('renders correctly', () => {
  renderer.create(<View />);
});
Or both. It's probably best to add the entry to the transform ignore anyway if our components are going to be causing challenges with jest.

Added @brightlayer-ui/react-native-components to the transformIgnore pattern

etn-ccis / blui-cli