After updating expo it no longer supports building apk files using expo build:android -t apk and instead advices to using eas builds using the command eas build -p android --profile preview but it ended up building an aab instead of the apk. I took a look at the newly added eas.json file which contained:
{
"cli": {
"version": ">= 0.52.0"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {}
},
"submit": {
"production": {}
}
}
I read the eas docs and it adviced on changing my eas.json to:
{
"cli": {
"version": ">= 0.52.0"
},
"build": {
"preview": {
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
}
}
The after running the build command:eas build -p android --profile preview
It build the app correctly as an apk file and installs on android just fine, but on opening it closes itself instantly. After trying to reopen it again closes and now alerts the app crashed.
Is there an error in my eas.json file or am I miss something?
Change production key in eas.json
to this
"production": {
"android": {
"buildType": "apk"
}
}
So now your eas.json
like this
{
"cli": {
"version": ">= 0.52.0"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {
"android": {
"buildType": "apk"
}
}
},
"submit": {
"production": {}
}
}
To build into .apk file, you can build using production profile. The command like this
eas build --profile production --platform android
Here is the detailed instruction:
https://docs.expo.dev/build/eas-json/
You need to create eas.json in the project directory as:
{
"build": {
"preview": {
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
},
"cli": {
"version": ">= 0.52.0"
}
}
Then use the following command:
eas build -p android --profile preview
Regards,
Shameel
I also encounter some problem when upgrading my app to EAS build, the reason is because i m using a value from expo-constant and it return a null, so it crashes my app. The new SDK moved the value that i need to expo-device. My sentry also cause a problem, it will cause instant crash when the app opened. Try removing it temporarily and see if your app will open
The solutions offered in the comments work. My error was brought about by the new SDK version that only supports #react-navigation/native if you have react-native-screens and react-native-safe-area-context installed.
For anyone who finds themselves here use:
npm install #react-navigation/native
expo install react-native-screens react-native-safe-area-context
And then edit eas.json as the other answers recommend. I hope it works for you
Related
I'm trying to use Synpress, but I fail to understand how to solve
TypeError: cy.acceptMetamaskAccess is not a function
Let me share the relevant code* (I mostly followed this tutorial https://medium.com/andamp/how-to-setup-synpress-for-wen3-dapp-frontend-test-automation-with-metamask-73396896684a)
*if something is missing, please let me know
package.json:
{
"devDependencies": {
"#testing-library/cypress": "^8.0.2",
"cypress": "^9.7.0"
},
"scripts": {
"cypress:open": "cypress open",
"test": "env-cmd -f .env npx synpress run -cf synpress.json --config supportFile='tests/support/index.js'",
"test:watch": "env-cmd -f .env npx synpress open -cf synpress.json"
},
"dependencies": {
"#synthetixio/synpress": "^1.2.0",
"env-cmd": "^10.1.0"
}
}
How I configured my synpress.json
{
"baseUrl": "https://dappify.com/",
"userAgent": "synpress",
"retries": { "runMode": 0, "openMode": 0 },
"integrationFolder": "tests/integration",
"screenshotsFolder": "screenshots",
"videosFolder": "videos",
"video": true,
"chromeWebSecurity": true,
"viewportWidth": 1366,
"viewportHeight": 850,
"component": {
"componentFolder": ".",
"testFiles": "**/*spec.{js,jsx,ts,tsx}"
},
"env": {
"coverage": false
},
"defaultCommandTimeout": 30000,
"pageLoadTimeout": 30000,
"requestTimeout": 30000,
"supportFile": "tests/support/index.js"
}
Simple test
describe('Test User Login', () => {
it('Connects with Metamask', () => {
cy.visit('https://dappify.com')
cy.contains('Sign').click();
cy.contains('Confirm').click();
cy.contains('Connect Wallet').click();
cy.contains('Metamask').click();
cy.switchToMetamaskWindow();
cy.acceptMetamaskAccess().should("be.true");
})
})
I don't understand why cy.acceptMetamaskAccess() is not a function, I can find it here: https://github.com/synthetixio/synpress/blob/master/support/index.d.ts
How can I use the functions listed in this index.d.ts file?
** Solution **
Answer by Fody was helpful! Let me summarise the steps needed:
inside support folder you need an index.js
inside index.js
import './commands'
import "#synthetixio/synpress/support";
If you want to add custom functions add this file to support too
inside commands.js:
import "#testing-library/cypress/add-commands";
// here go(es) your custom function(s)
It's a bit hard to untangle the Synpress structure. Usually with a plugin library you import a support component and that adds the library's custom commands to your test.
The article says
Run your tests with env-cmd -f .env npx synpress run -cf synpress.json --config supportFile='support/index.js'
which makes me think the last parameter is bringing in the custom commands.
If you already tried that, the following is the command definition, you can try adding it at the top of your spec.
Cypress.Commands.add('acceptMetamaskAccess', allAccounts => {
return cy.task('acceptMetamaskAccess', allAccounts);
})
I'm migrating a mono-repo app from react-scripts v4 to react-scripts v5. The app uses npm workspaces and has a structure as below
AppName
|_ julia_project_files
|_node_modules (one)
|_ react_app
|_node_modules (two)
|_src
|_package.json(two)
|_ config_overides.js
|_package.json (one)
The app leverages multiple node.js libraries which break with webpack 5 (no inbuilt node.js polyfill support) and I had errors similar to this. I leveraged this solution to fix all errors except one
Module not found: Error: You attempted to import /Computer/AppName/node_modules/path-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
I don't see where I'm going wrong?
files
config-overrides.js
const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
crypto: require.resolve('crypto-browserify'),
path: require.resolve("path-browserify"),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);
return config;
}
package.json (one)
{
...some stuff,
"private": true,
"version": "1.0.0",
"main": "index.js",
"workspaces": [
"react-app",
"packages/*"
],
"scripts": {
"start-server": "julia --threads=auto --project=../julia-api -e",
"start-client": "cd react-app && npm run start-web",
"lint-fix-client": "cd react-app && npm run lint-fix",
"prepare": "husky install"
},
"devDependencies": {
"#types/jest": "^26.0.21",
"husky": "^7.0.4"
},
"dependencies": {
"path-browserify": "^1.0.1"
}
}
package.json (two)
{
"dependencies": {
... alot of non-related dependencies
"https-browserify": "^1.0.0",
// "path-browserify": "^1.0.1", I've tried installing it here too
"react": "^17.0.2",
"react-app-rewired": "^2.2.1",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.2",
"react-json-tree": "^0.15.0",
"react-scripts": "5.0.0",
"stream-browserify": "^3.0.0",
},
"scripts": {
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 build",
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 start",
"lint": "eslint src",
"lint-fix": "prettier --write './src/**/*.{js,jsx,css,json}' --config ./.prettierrc && eslint --fix src"
},
"eslintConfig": {
"extends": "react-app",
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
"last 1 chrome version"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://127.0.0.1:8080",
"devDependencies": {
... many dev dependencies
}
}
I've played around with where I install path-browserify be it package.json(one) or (two) and the error persists.
I found this post to be really helpful: https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error.
I need polyfills for my project, so I tested solutions one and three and both worked. I wasn't able to get the fallback solution to work that I had seen in other posts, but finally found this.
We had two other packages that caused this error (besides path-browserify), and I was able to employ the same steps from solution three in the post above to get them working as well.
I am trying to load the Css, Images and fonts using the webpack. Here is my webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: "main.js",
path: path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
};
This is my package.json
{
"name": "restaurant-page",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.2.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {}
}
This is my index.js. When I uncomment the ./styles.css import I get the
main.js:290 Uncaught Error: Automatic publicPath is not supported in this browser in chrome console and my js imports doesn't work but it dosen't throw me error while building project when I run npm run build commmand in terminal. I tried using css import in each js module-- in home.js etc--file but that also doesn't work.
// import './style.css';
import { homeContent, removeIntroContent } from './Modules/home.js';
import { aboutContent, removeAboutContent } from './Modules/about.js';
import { reviewsContent, removeReviewContent } from './Modules/reviews.js';
const home = document.getElementById("home-btn");
const review = document.getElementById("review-btn");
const about = document.getElementById("about-btn");
homeContent();
home.addEventListener("click",()=>{
removeReviewContent();
removeAboutContent();
const id = document.getElementById("intro-content");
if(id != null) return;
homeContent();
});
review.addEventListener("click",()=>{
removeAboutContent();
removeIntroContent();
const id = document.getElementById("reviews");
if(id != null) return;
reviewsContent();
});
about.addEventListener("click",()=>{
removeReviewContent();
removeIntroContent();
const id = document.getElementById("about");
if(id != null) return;
aboutContent()
});
I have pushed the code to github if anyone want to look at file structure
Here is the link
ps: If I use the link tag to add css to html it works exactly as I want it to but that defeats the purpose of using webpack
I am having trouble with Webpack as well and I came across your question. I don't have a sure solution to your problem, but I hope to steer you in the right direction.
At first glance, I am wondering if editing your package.json file to use your webpack-config when you run 'npm run build' instead of the default webpack config. This could help activate the loaders you are trying to use, or atleast populate error messages that would allow you to investigate further. Editing your package.json would look like:
"scripts": {
"test": "echo \\\"Error: no test specified\\\" && exit 1",
"watch": "webpack --watch",
"build": "webpack --config ./webpack-config.js"
}
Your dependencies make sense and your file path for style.css seems correct, so I am wondering if Webpack does not know how to load your styles, fonts, images without your config file.
Can read more about Webpack configuration here.
https://webpack.js.org/configuration/
Hope I was able to help, good luck! If you have any further questions I'd be happy to help, as I'm learning Webpack too.
So i have this very simple electron.js test-project which works fine with npm start:
const { app, nativeImage } = require('electron');
const electron = require('electron');
const path = require('path');
const Tray = electron.Tray
const iconpath = path.join(__dirname, './logo_transparent_white_512x512.png')
app.on('ready', function(){
icon = nativeImage.createFromPath(iconpath);
icon = icon.resize({ width: 16, height: 16})
new Tray(icon);
console.log('ready');
})
The package.json looks like this:
{
"name": "electronbuilder",
"version": "1.0.2",
"description": "dadlu",
"main": "main.js",
"homepage": "www.test.com",
"dependencies": {
"path": "^0.12.7"
},
"devDependencies": {
"electron": "^11.1.1",
"electron-builder": "^22.9.1"
},
"scripts": {
"start": "electron .",
"dist": "electron-builder"
},
"author": "test-author",
"license": "ISC",
"build": {
"appId": "com.elecctron.builder",
"productName": "testBuild",
"linux": {
"target": [
"deb"
],
"maintainer": "test-maintainer",
},
"deb": {
"depends": [
"libappindicator1",
"libnotify4"
]
},
"extraFiles": [
"./logo_transparent_white_512x512.png"
]
}
}
After running:
yarn dist
and waiting a minute, I can install the package. But running it doesn't do anything.
when enabling the console ('add to desktop', 'open with Text Editor', 'Terminal=true') I can observe, that the app started successfully:
console.log('ready') got executed
I tried all sorts of ways to get the tray icon to work, stubbing across the weirdest things. F.e. when building the Icon like this:
tray = new Tray(./logo_transparent_white_512x512.png);
it does work with npm start, but after yarn dist, nothing happends. Though, going into the applications folder and running
$ ./{name}
it starts up fine, including the tray icon. (./logo_transparent_white_512x512.png isn't 512x512, i already resized it to 256x256)
its cant be an lib problem either, because this project can be build fine on my system.
I hope someone can help me, ive got my first real project ready, but can only start it with npm start. Any attempts to build it fail, meaning the tray icon doesn't show up.
If some information is missing, feel free to ask.
I want to create 2 seperate packages - the first should only have package-2 as a dependency and package-2 can have anything required for that package.
My problem is that one of the dependencies in package-2 (let's call it package-3) has a bin script. I'd like to expose that for package-1 to use but it's not work.
When running npm run start in package 1 I get the following error:
./bin/sh package-3 is not a command
{
"name": "package-1",
"scripts": {
"start": "package-2 start",
},
"dependencies": {
"package-2": "1.0.0",
}
}
{
"name": "package-2",
"scripts": {
"start": "package-3 start",
},
"dependencies": {
"package-3": "1.0.0",
}
}
{
"name": "package-3",
"bin" : {
"package-3": "cli-with-start-command",
},
}