I am experimenting Monorepo using yarn workspaces method containing a sample react-native project which is configured and it works fine in debug build. When I created a release build and run the app, it crashes as soon as it opens. I have provided the log and the code below.
Android Studio Logcat:
2022-05-16 23:18:08.466 6620-6644/? E/AndroidRuntime: FATAL EXCEPTION: create_react_context
Process: com.sample.mobile, PID: 6620
java.lang.RuntimeException: Unable to load script. Make sure you're either running Metro (run 'npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.
at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:248)
at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:29)
at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:277)
at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1422)
at com.facebook.react.ReactInstanceManager.access$1200(ReactInstanceManager.java:138)
at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:1111)
at java.lang.Thread.run(Thread.java:923)
Monorepo structure:
monorepo
|
|___Common
|
|___Mobile
Monorepo's root package.json:
{
"name": "monorepo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "UNLICENSED",
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": [
"**/react-native",
"**/react-native/**"
]
},
"references": [
{
"path": "packages/Common"
},
{
"path": "packages/Mobile"
}
],
"private": true
}
Common's root package.json
{
"name": "common",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "UNLICENSED",
"devDependencies": {
"#types/react": "^18.0.9",
"#types/react-native": "^0.67.7"
}
}
React Native's package.json:
...
"peerDependencies": {
"common": "0.0.1"
},
...
React Native's metro.config.js
const path = require('path');
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'mjs'],
extraNodeModules: new Proxy(
{},
{
get: (target, name) => {
return path.join(__dirname, `node_modules/${name}`);
},
},
),
},
watchFolders: [
path.resolve(__dirname),
path.resolve(__dirname.replace('Mobile', 'Common'))
],
};
Any Suggestions?
I figured out that the issue was not on the monorepo setup but React Native itself. I am using the latest version of React Native (0.68.2) which was causing this issue. I verified this my creating a simple fresh React Native Project in which this same issue occurs. There are also issues open in the React Native repo itself.
Related
I am working on a website using Preact, and I am trying to proxy requests made in the browser to the development server I'm using as the back end.
When I try to run the front end application with yarn client, it errors out and informs me it cannot find the http2-Proxy module despite my installing it.
My directory structure is as follows:
Website_Root:
| package.json
|
+---dummy-api
|
+---frontend
| package.json
| README.md
| snowpack.config.mjs
|
+---public
|
+---src
| index.jsx
|
+---assets
|
+---components
|
+---routes
I'm attempting to use the Yarn Workspaces feature; as such my package.json at the root level is as follows:
{
"name": "Website",
"packageManager": "yarn#3.1.1",
"scripts": {
"client": "yarn workspace frontend dev",
"mockapi": "yarn workspace dummy-api dev",
"dev": "yarn concurrently --kill-others-on-fail \"yarn client\" \"yarn mockapi\""
},
"workspaces": [
"frontend",
"dummy-api"
],
"devDependencies": {
"concurrently": "^6.4.0"
},
"dependencies": {
"preact": "^10.6.4"
}
}
The package.json inside of the frontend workspace is as follows:
{
"name": "frontend",
"private": true,
"proxy": "http://localhost:9000/api",
"scripts": {
"dev": "snowpack dev",
"build": "snowpack build",
},
"dependencies": {
"axios": "^0.24.0",
"http2-proxy": "^5.0.53",
"preact": "^10.6.4",
"preact-router": "^3.2.1",
"react-table": "^7.7.0"
},
"devDependencies": {
"#prefresh/snowpack": "^3.0.0",
"#snowpack/plugin-dotenv": "^2.1.0",
"#snowpack/web-test-runner-plugin": "^0.2.2",
"snowpack": "^3.8.8"
}
}
And, finally, my snowpack.config.js is as follows:
import proxy from "http2-proxy";
/** #type {import("snowpack").SnowpackUserConfig } */
export default {
alias: {
react: "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat",
"react/jsx-runtime": "preact/jsx-runtime",
},
mount: {
public: { url: "/", static: true },
src: { url: "/dist" },
},
plugins: ["#snowpack/plugin-dotenv", "#prefresh/snowpack"],
routes: [
{
match: "all",
src: "/api/.*",
dest: (req, res) =>
proxy.web(req, res, { hostname: "localhost", port: "9000" }),
},
],
devOptions: {
open: "none",
},
};
I can't help but think I've set something up incorrectly; snowpack should be able to find http2-proxy since I've installed it, but I genuinely don't understand what the holdup is.
I've also tried installing http2-proxy at the root level to no avail.
I believe I discovered the problem.
I did not initialize the yarn workspaces correctly.
I tried out a minimum working example of preact with snowpack, and found that creating a parent yarn directory, creating the child directories, registering them in the parent package.json and then inside each child subdirectory running yarn init -y instead of yarn init -2 produced the necessary results.
I want to know more about monorepo projects. I have a repository named dnd which is using Yarn workspaces with Lerna. The repository contains two main directories.
packages/core
packages/app
The core directory contains utility methods and the app directory is using create-react-app boilerplate. Now here is the thing I want to use my utility methods in the main app components something like this.
import { concat } from '#dnd/core';
Currently, I am importing something like this
import { concat } from '../../../core/lib/utils';
I have to traverse the relative path with this ugly syntax. Now the path is correct but create-react-app throwing an error.
Module not found: You attempted to import ../../../core/lib/utils which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Is there a way we can simply import our core directory methods inside our app components with something like this.
import { concat } from '#dnd/core';
Repositry: Link
dnd/package.json:
{
"name": "root",
"private": true,
"scripts": {
"bootstrap": "lerna bootstrap --use-workspaces"
},
"devDependencies": {
"lerna": "^3.21.0"
},
"workspaces": [
"packages/*"
]
}
dnd/lerna.json:
{
"useWorkspaces": true,
"packages": [
"packages/*"
],
"version": "0.0.0"
}
dnd/packages/core/package.json:
{
"name": "#dnd/core",
"version": "0.0.0",
"description": "> TODO: description",
"homepage": "",
"license": "ISC",
"main": "lib/core.js",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib"
],
"scripts": {
"test": "echo \"Error: run tests from root\" && exit 1"
}
}
dnd/packages/core/lib/utils.js:
export const concat = (...args) => {
return ''.concat(...args);
};
dnd/packages/app/package.json:
{
"name": "#dnd/rain",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
dnd/packages/app/src/components/App.js:
import React from 'react';
import { concat } from '../../../core/lib/utils';
const App = () => {
return (
<div className="App">
{ concat('Hello', 'World', 'Culture') }
</div>
);
};
export default App;
Yes you can.
Disclaimer: I am typing this on the fly (without testing) based on my limited experience on my own monorepo project.
It should give you a great starting point nontheless.
Idea
You would need to compile packages/core using microbundle or rollup into a bundle.
Then you want to include that bundled packages/core as a dependency in packages/app
Setup
packages/core/package.json
microbundle is a devDependency as we only require it during development.
{
"name": "#dnd/core",
"scripts": {
"dev": "microbundle watch lib/*.js --target node"
},
"source": "lib/index.js", // entry point into #dnd/core
"main": "dist/index.js", // the compiled file/bundle that #dnd/app will reference
"devDependencies": [
"microbundle": "^0.13.0"
]
}
packages/app/package.json
We add our compiled core package into package/app
{
"name": "#dnd/app"
"dependencies": [
"#dnd/core": 0.0.0
]
packages/core/lib/index.js
Create an index.js file that will be an export of all your lib functions
This will be your entry point for #dnd/core
export * from './utils.js'
export * from './other-utils.js'
Before Development
Before we start development, we will need to "install" the new depedencies.
lerna bootstrap
Then run the npm dev script
# this will run the npm dev script only for packages/core
cd packages/core
npm run dev
or
# from the root of your project (inside /dnd folder)
# this will do a `npm run dev` equivalent inside all your packages
lerna run dev
This will tell microbundle to watch for changes inside packages/core/lib/index.js
Whenever you change code inside packages/core/lib/utils.js, it will recompile the code into packages/core/dist/index.js
Usages of #dnd/core inside #dnd/app
Now we can import our functions from core in our app source code.
import React from 'react';
import { concat } from '#dnd/core';
const App = () => {
return (
<div className="App">
{ concat('Hello', 'World', 'Culture') }
</div>
);
};
export default App;
When I used ng serve in my Angular project (in to correct place) its show this error in cmd.
The serve command requires to be run in an Angular project, but a project definition could not be found.
I try this also
Angular Cli Error: The serve command requires to be run in an Angular project, but a project definition could not be found
but this also not work for me.
I tried also to delete node-module and reinstall, but not work. When I used npm start it work.
Why? What is the problem?
My angular-cli.json code here
"project": {
"version": "1.0.0-beta.28.3",
"name": "angular-src"
},
"apps": [
{
"root": "src",
"outDir": "../public",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
ng update #angular/cli --migrate-only --from=<WhateverVersionYouAreCurrentlyOn>
e.g.
ng update #angular/cli --migrate-only --from=1.7.3
getting ref from here https://github.com/angular/angular-cli/issues/12215#issuecomment-433593036
Make sure that you are in the project directory in the terminal before
running "ng serve".
Let's say your folder structure is as follows:
|-Documents
|---my_projects
|-----angular_project
Make sure that your terminal is in "angular_project" for example. i.e
username#PC_NAME:~/Documents/my_projects/angular_project$ ng serve
When I push my Next project to GitHub, I get the following error :
You defined 1 build that did not match any source files (please ensure they are NOT defined in .nowignore)
and this how my now.json looks like:
`
{
"version": 2,
"builds": [
{
"src": "packages/web-app/package.json",
"use": "#now/next"
}
],
"build": {
"env": {
"SECRET": "dev-key",
"ANOTHER_SECRET": "another-dev-key"
}
}
}
`
and Package.json file which located on the root folder contains the following :
`
{
"name": "biletiniz",
"private": true,
"workspaces": [
"packages/*"
],
"scripts": {
"bootstrap": "lerna bootstrap",
"dev": "lerna bootstrap && lerna run dev",
"build": "lerna bootstrap && lerna run build",
"start": "lerna bootstrap && lerna run start"
},
"dependencies": {
"lerna": "^3.16.4"
},
"version": "1.0.0",
"author": "LamaDabbeet",
"license": "MIT"
}
`
And this the project tree:
try this in Now.js V2:
{
"version": 2,
"name": "awesome-app",
"builds": [
{
"src": "packages/next-app/package.json",
"use": "#now/next"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/packages/next-app/$1",
"headers": {
"x-request-path": "$1"
}
}
],
"env": {
"SECRET": "dev-key",
"ANOTHER_SECRET": "another-dev-key"
}
}
Where next-app is your next.js app package
I am trying to debug a React Typescript application in VS Code and I can't figure out how to configure the launch.json to get TSX debugging to work.
I am using webpack to bundle everything into one js file
This is my package.json
{
"name": "reactts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"magic": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"#types/react": "^16.7.20",
"#types/react-dom": "^16.0.11",
"axios": "^0.18.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4"
}
}
and this is my tsconfig.json file
{
"compilerOptions": {
"target": "es6",
"jsx": "react",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
And this is my webpack.config.js file
var path = require("path");
var config = {
entry: ["./src/app.tsx"],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}
]
}
};
module.exports = config;
I use npm run magic to compile the tsx code into the bundled js file
I'm not using webpack but only the script provided by react create-app (npm start = react-scripts start), and then I launch Chrome Debugger using VS Code debug configuration:
Pointing directly to the source /src of the app where app.tsx and index.ts are located.
React -v 16.8.6
Node -v 10.16.0
{
"type": "chrome",
"request": "launch",
"name": "Debug React Run",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
If ill find a solution for webpack I'll update.
in the launch.json file inside the .vscode put the following
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
Run npm start in VSC terminal, the Brower should load, back in VSC just press F5 and you should be attached and able to debug
see Ref!
I hope this helps