How to change Expo entry point properly? - ios

I want to change entry point of my expo app. I have tried these simple steps:
First of all, I have created a simple expo project.
$ expo init test
$ cd test
$ rm App.js
$ mkdir src
$ touch src/App.js
I have changed app.json of my expo based app as follows
{
"expo": {
...,
entryPoint: "./src/App.js",
...
}
}
Then i have filled the App.js as folows
import React from "react";
import { Text } from "react-native";
export default () => <Text>Hello World</Text>;
However, the first trial have been failed. It have shown only splash screen.
Then i have edited the App.js as follows:
import React from "react";
import { Text } from "react-native";
import { registerRootComponent } from "expo";
const App = () => <Text>Hello World</Text>;
registerRootComponent(App);
I have seen "Hello World" text in the screen. However, hotreloading have not been working.
Then i have modified main entry in package.json
"main": "./src/App.js",
In this way hot reloading is working in second save action.
I am wondering
How can i solve hot reloading problem (in first save action)?
What is the difference between app.json's entryPoint and package.json's main field?

I suggest you read this article:
https://docs.expo.dev/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my
and be sure you restarted your whole dev process

Related

Antd_dayjs_vite_plugin : TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function

At the beginning I got a problem with the french date in the antd calendar. I use vite so I install the antd_dayjs_vite_plugin to switch from Moment.js to Day.js. It worked well but this morning the vite build process is in error. I tried to update the antd_dayjs_vite_plugin version (was 1.1.4) and now I got the same problem when I try to lunch a yarn dev as you can see :
$ yarn dev
yarn run v1.22.15
$ vite
failed to load config from vite.config.ts
error when starting dev server:
TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function [...]
Here is the code in vite.config.ts :
import reactRefresh from '#vitejs/plugin-react-refresh';
import antdDayjs from 'antd-dayjs-vite-plugin';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), antdDayjs()],
server: {
host: process.env.HOST || '127.0.0.1',
},
resolve: {
alias: [{ find: '#', replacement: '/src' }],
},
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
},
},
});
The problem also appears in antd-dayjs-vite-plugin 1.1.4 version or the 1.2.2. I also already tried to update vite to 3.1 (was in 2.5).
I don't understand the code seems to be exactly the same as the usage in the Readme package.
Thanks in advance for your help. 🙏🏻
Seams that a default export is expected by vite.js (tried to replace import statement with import {antdDayjs} from 'antd-dayjs-vite-plugin'; without success)
I was able to create a workaround using patch-package with the below steps:
modifiy node_modules/antd-dayjs-vite-plugin/dist-node/index.js
at the very end of that file, add exports.default = antdDayjs;
create a patch for antd-dayjs-vite-plugin
ensure you have the postinstall script (refer to patch-package doc)

Can a Mac Catalyst app manage a different iOS firestore database? If so how to config it

How can I point a Mac Catalyst App to another firestore area so 2 editor users can easily manage their data from their laptops?
Background: I have a fully functioning iOS app using a Google firestore DB. A couple of users are editors but currently have to choose images and mp3s and upload these from the app, in editor mode, on their phone. This is not very efficient.
Problems: I see a lot of Mac Catalyst stackoverflow problems with getting iOS/iPad code and firebase to work together. Mac Catalyst is not yet supported by Google's Firebase.
Thanks
FIXED
I have a set of steps that solves creating a Mac app to edit another firebase database. At the end you can zip up and send the app to another mac user to run.
1.Create a new XCode project - called here tryMacCatalyst.
2.Tick the box Mac and tap the enable button that comes up. Then run on the Mac to confirm. Then close the project to add PODS.
3.From the command line of the project do the usual to init a pod project.
pod init
Edit the podfile to look just like this:
Run pod install:
Open the xcworkspace in XCode, and run on 'My Mac' to test building of these libraries.
Now copy in to the project the 'GoogleService-Info.plist' from the target firebase installation. it should look something like this:
It turns out that you can swap in-out any Google-Service-Info file here to point to any Firebase DB.
Build the App. It will give an error:
Signing for "gRPC-C++-gRPCCertificates-Cpp" requires a development team. Select a development team in the Signing & Capabilities editor.
So, in XCode hilight the PODS folder so it shows like below: And set the Team.
Now add some swift code,FirebaseApp.configure to AppDelegate:
11.Add code to ViewController to test connection:Run and you should see in the log "firebase auth checked - no user""
import FirebaseAuth
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
if Auth.auth().currentUser == nil {
print("firebase auth checked - no user")
}else{
print("firebase auth checked - we have a user")
}
}
}
12.Add code to ViewController to test connection to Firebase Auth:
import FirebaseAuth
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
if Auth.auth().currentUser == nil {
print("firebase auth checked - no user")
Auth.auth().signInAnonymously { (authResult, err) in
if let err = err {
print("Cannot login in anon - something bad happened ")
print(err)
}else{
if let user = authResult?.user {
print(user.uid)
}
}
}
}else{
print("firebase auth checked - we have a user")
}
}
}
When you run this you will get an error:
An error occurred when accessing the keychain.
To fix simply go to the XCode project / Signing and Capabilities / and add 'Keychain Sharing'.
Run again and it should work with the log showing something like:
gvMPr3Z7Aoh6tOA4lo1S3r9abcde
This is the anon userid. If you go to the Firebase console auth section this uid will be present. All firestore commands will now work. There is one final Step because if we try to Archive this it will fail.
Archiving gives the error:
ssl_transport_security.h:29:12: Did not find header 'x509.h' in framework 'openssl_grpc'
To fix this we use the well known answer given by zummenix on github: zummenix answer github link
The steps are given here:
Create a mac sh file 'runBORINGSSLPatch.sh' and use the following (changing <YOUR_MAC_LOGON_NAME> and <PROJECT_NAME>):
# This works
# CD to <PROJECT_NAME> folder
# 1. run using command line
# ./runBoringSSLPatch.sh
# 2. then do archive - distribute directly to customers - Export
# 3. Ctrl/C to stopscript
#
# script is at:
# https://github.com/grpc/grpc/issues/20500
while true; do
sleep 0.1
_boring_ssl=$(find /Users/<YOUR_MAC_LOGON_NAME>/Library/Developer/Xcode/DerivedData/<PROJECT_NAME>* \
-name "BoringSSL-GRPC" | head -n1)
cd "$_boring_ssl/openssl_grpc.framework" && ln -s Versions/Current/Headers Headers &&
echo "Patched openssl_grpc"
_grpc_core=$(find /Users/<YOUR_MAC_LOGON_NAME>/Library/Developer/Xcode/DerivedData/<PROJECT_NAME>* \
-name "gRPC-Core" | head -n1)
cd "$_grpc_core/grpc.framework" && ln -s Versions/Current/Headers Headers &&
echo "Patched grpc"
done
Run this file using the command:
./runBoringSSLPatch.sh
Archive again - and it should work. Now 'Distribute App', Developer ID, Export. Then send the folder to another user.
CTRL-C the runBoringSSLPatch program.
Thanks
John Goodstadt

Adding Typescript to Vue + Rails app - Imports no longer work?

I'm trying to add TypeScript to an existing VueJS + Rails app. I cloned this demo (https://github.com/gbarillot/rails-vue-demo-app) then followed the instructions from https://github.com/rails/webpacker
$ bundle exec rails webpacker:install:vue
$ bundle exec rails webpacker:install:typescript
I then modified config/webpack/loaders/typescript.js as described here.
Everything seems to compile, but when I go into my "home" view and change the script to typescript:
<script lang="ts">
import Layout from '../shared/layout';
export default {
components: {
Layout
}
}
</script>
I get the following error:
Failed to compile.
/Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts
[tsl] ERROR in /Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts(13,20)
TS2307: Cannot find module '../shared/layout'.
Why can I no longer find the layout file when typescript is enabled?
I remember running into a similar problem for presentational components. Try adding an empty export in shared/layout so typescript can pick it up:
<script lang="ts">
export default {}
</script>

dynamic import in webpack 2 not working

I want to use dynamic import in webpack 2. I use webpack 2.4.1
index.js
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './containers/Root'
import '../styles/custom.scss'
var btn = document.getElementsById('button');
btn.addEventListener("click", () => {
import('./assets/chunk.css').then(()=>{
console.log("Success")
})
});
render(
<Root />,
document.getElementById('root')
)
But when I run "npm start" it didn't work and notify an error at line 9 of index.js
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (9:4)
Thanks for any help!
As wuxiandiejia mentioned, the answer is
install babel-plugin-syntax-dynamic-import
make sure 'syntax-dynamic-import' appears in your babel options.plugins
Example babel.rc
{
"plugins": [
"syntax-dynamic-import",
}

Electron - How to add react dev tool

What is the easy way to add react dev tool to electron window? I try add the extension hash
BrowserWindow.addDevToolsExtension('path/to/extension/ade2343nd23k234bdb').15.01
But when the extension update, I had to manually update the string in main.js. I'm looking for a better way.
Here is a Solution for Electron <= 1.2.1 version
1- In your app folder
npm install --save-dev electron-react-devtools
2- Open your electron app, click on (view/toggle developer tools). In the console tab insert the following code and hit enter:
require('electron-react-devtools').install()
3- Reload/refresh your electron app page and you'll see the react dev tools appear.
4- Done!
See screen shots bellow
You can add react devtools directly from your main.js file like this
const installExtensions = async () => {
const installer = require('electron-devtools-installer')
const forceDownload = !!process.env.UPGRADE_EXTENSIONS
const extensions = [
'REACT_DEVELOPER_TOOLS',
'REDUX_DEVTOOLS',
'DEVTRON'
]
return Promise
.all(extensions.map(name => installer.default(installer[name], forceDownload)))
.catch(console.log)
}
app.on('ready', async () => {
if (dev && process.argv.indexOf('--noDevServer') === -1) {
await installExtensions()
}
createWindow()
})
addDevToolsExtension is not an instance method, so you need to call BrowserWindow.addDevToolsExtension('path/to/extension').
Below solution worked for me (https://github.com/MarshallOfSound/electron-devtools-installer#usage) -
npm install electron-devtools-installer --save-dev
or
yarn add electron-devtools-installer -D
import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer';
// Or if you can not use ES6 imports
/**
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
*/
const { app } = require('electron');
app.whenReady().then(() => {
installExtension(REDUX_DEVTOOLS)
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log('An error occurred: ', err));
});
If you see a blank component when launching react-devtools, it's probably because you've installed the package globally as it is recommended in the react-native docs, in the debugging section. What's happening is it doesn't get connected to your app, because it's not your app-specific.
You need to install it locally.
npm install --save-dev react-devtools
or
yarn add -D react-devtools

Resources