I create a project by CRNA and change to be a pure RN project.
When i type comman react-native-git-upgrade and run the project shows the error:
error: bundling failed: Error: ENOENT: no such file or directory, open '/Users/motogod19/MyWork/test_upgrade/node_modules/react-native/node_modules/create-react-class/index.js'
Before upgrade enviroment:
package.json:
{
"name": "test_upgrade",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^23.6.0",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"react": "16.3.1",
"react-native": "~0.55.2"
}
}
.babelrc:
{
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
After upgrade:
package.json:
{
"name": "test_upgrade",
"version": "0.1.0",
"private": true,
"devDependencies": {
"metro-react-native-babel-preset": "0.45.2",
"jest": "^23.6.0",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"react": "16.5.0",
"react-native": "~0.57.0"
}
}
.babelrc:
{
"presets": [
"module:metro-react-native-babel-preset"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
I have no idea how to fix it. Any help would be appreciated, thanks in advance.
Step 1: If type npm install create-react-class and run it shows error:
error: bundling failed: Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/Users/motogod19/MyWork/test_up"
at /Users/motogod19/MyWork/test_up/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
The option-manager.js line 293 is:
if (typeof val === "string") {
presetLoc = (0, _resolvePreset2.default)(val, dirname);
if (!presetLoc) {
throw new Error("Couldn't find preset " + (0, _stringify2.default)(val) + " relative to directory " + (0, _stringify2.default)(dirname));
}
val = require(presetLoc);
}
Still can't figure it out, thanks in advance.
Run react-native upgrade and run the project.
If it's not working , install that module manually.
npm install create-react-class
Then somewhere in your code, add:
require('create-react-class');
Let me know if you have any issues.
{
"presets": ["module:metro-react-native-babel-preset"],
}
after you install module:metro-react-native-babel-preset, you need to put that in your .babelrc file instead of "react-native", they changed this, and are a lot of changes with babel 7, i just made the update, and on emulator it works, but when i install apk on the phone, it crashes immediatly, from what im reading its something with babel helpers... i try to figure out this.. no luck until now.. but for your question, that is the answer
https://github.com/facebook/react-native/issues/20150#issue-340235017
Related
I am using babel, eslint, and prettier for Node Rest API. To use absolute path I am using a package called babel-plugin-module-resolver but when I do use ES6 imports, I noticed that there is no auto suggestions. However, when I use relative path, everything seems to work perfectly fine.
Relative Path (Desired behavior with ES6 import and Absolute path)
Absoulte Path (No suggestions)
Here are my configuration files
1. package.json
{
"name": "prod-js-starter",
"version": "1.0.0",
"description": "Production level starter for node.js based express RESTFull APIs",
"main": "src/server.js",
"keywords": [],
"author": "",
"license": "ISC",
"scripts": {
"build": "npm run clean && babel ./src --out-dir build --copy-files",
"start": "NODE_ENV=production node build/server.js",
"dev": "nodemon --exec babel-node src/server.js",
"clean": "rm -rf build"
},
"dependencies": {
"dotenv": "^16.0.0",
"express": "^4.17.3",
"module-alias": "^2.2.2"
},
"devDependencies": {
"#babel/cli": "^7.17.6",
"#babel/core": "^7.17.9",
"#babel/node": "^7.16.8",
"#babel/preset-env": "^7.16.11",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^8.13.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-babel-module": "^5.3.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.0.0",
"nodemon": "^2.0.15",
"prettier": "^2.6.2"
}
}
2. eslint.json
{
"env": {
"es2021": true
},
"extends": ["airbnb-base", "prettier"],
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
// "func-names": "off",
"prettier/prettier": "error",
"no-unused-vars": "warn",
"no-console": "warn"
},
"plugins": ["prettier"],
"settings": {
"import/resolver": {
"babel-module": {}
}
}
}
3. .babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
[
"module-resolver",
{
"root": ["."],
"alias": {
"#src": "./src"
}
}
]
]
}
Please help me to get those suggestions working like before. Its a simple feature but quite efficient.
I've created a private react library (git repo) with rollup.js, and it's installing correctly with the command yarn add ssh://git#my-repo-url but it's not building (creating build/dist in node_modules/library-folder) on installing. How can I fix it? What's the 'magic' behind the alternative create-react-library. Is npm behind this?
Here is my rollup.con.js:
import commonjs from "#rollup/plugin-commonjs";
import resolve from "#rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "#rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import packageJson from "./package.json";
export default {
input: "./src/components/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript(),
postcss()
]
};
and my package.json:
{
"name": "my-ui-lib",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"main": "./build/index.js",
"module": "./build/index.es.js",
"scripts": {
"test": "react-scripts test",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public",
"build": "rollup -c",
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#rollup/plugin-commonjs": "^19.0.0",
"#rollup/plugin-node-resolve": "^13.0.0",
"#rollup/plugin-typescript": "^8.2.1",
"#storybook/addon-actions": "^6.2.9",
"#storybook/addon-essentials": "^6.2.9",
"#storybook/addon-links": "^6.2.9",
"#storybook/node-logger": "^6.2.9",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.2.9",
"postcss": "^8.3.2",
"rollup": "^2.51.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
You don't need any specialty packages/boilerplate code to install from a local/private github repo. Just follow these simple steps:
1.) Make sure you're using the correct github repo:
git+ssh://git#github.com/<github_username>/<github_repo>
<github_username> should be your github username
<github_repo> should be the name of your github repository
2.) Prep your package.json with the necessary fields, but most importantly add a prepare or prepublish script to your scripts in your package.json:
{
"name": "#example/my-package",
"version": "0.1.0",
"description": "My package description.",
// 'main' and 'module' are useful for bundlers (like webpack) to know which version to default import
"main": "index.js",
"module": "esm/index.mjs",
// 'sideEffects' is optional, let's bundlers (like webpack) know that it's tree-shakeable
"sideEffects": false,
"homepage": "https://github.com/<github_username>/<github_repo>#readme",
// 'files' is required to let your package manager know what should be installed in node_modules
"files": [
"index.js",
"index.d.ts",
"decrypt/index.js",
"decrypt/index.d.ts",
"encrypt/index.js",
"encrypt/index.d.ts",
"esm"
],
// 'types' is optional, but useful for typescript typings
"types": "./index.d.ts",
// 'exports' is optional, but useful for submodule imports
"exports": {
".": "./index.js",
"./decrypt": "./decrypt/index.js",
"./encrypt": "./encrypt/index.js",
"./esm": "./esm/index.mjs",
"./esm/decrypt": "./esm/decrypt/index.mjs",
"./esm/encrypt": "./esm/encrypt/index.mjs"
},
// 'scripts' will be leveraged by adding a 'prepare' or `prepublish` script to let the package manager know what to run during dependency installation
"scripts": {
"build": tsc --p ./ts/tsconfig.cjs.json && ts-node ./utils/compress.ts",
"build:esm": "rollup -c",
"lint": "eslint ./ --ext .ts,.js && tsd",
"prepare": "npm run build && npm run build:esm",
"test": "jest --config ./jest.json --coverage",
},
// 'repository' is optional, but useful to tell developers/remote websites (like npmjs) where your code resides
"repository": {
"type": "git",
"url": "git#github.<github_username>/<github_repo>.git"
},
"author": "Firstname Lastname",
"license": "MIT",
"bugs": {
"url": "https://github.com/<github_username>/<github_repo>/issues"
},
// 'engines' is highly recommended as it lets the package manager know which versions of node will be able to run the package without issues
"engines": {
"node": ">=12"
},
"devDependencies": { ... },
}
3.) Install the package using npm or yarn:
# with npm
npm install git+ssh://git#github.com/<github_username>/<github_repo>
# or with yarn
yarn add git+ssh://git#github.com/<github_username>/<github_repo>
4.) Import the package by the name specified in the package.json:
const example = require("#example/my-package");
// import example from "#example/my-package";
...etc
Example package repo:
https://github.com/mattcarlotta/example-env
Example using package repo:
https://github.com/mattcarlotta/example-using-repo
Result:
I have 2 typescript / node projects, both using the same version of node. However when I use import * as Crypto from 'crypto'; in each project, they point to two different versions of the crypto module:
I'm quite new to node and javascript / typescript and struggling to trying to understand why, hoping someone can enlighten me. My question is: why does import * as Crypto from 'crypto'; resolve to two different versions of crypto even though the projects are setup to use the same versions (I think!)? What determines which version of a built-in module is used? And how can I resolve this so both use the same?
Here's my setup:
===Project 1===
node -v
v14.15.2
npm -v
6.14.9
package.json
{
"name": "functions",
"scripts": {
"lint": "eslint \"src/**/*\"",
"build": "tsc",
"serve": "npm run build && firebase emulators:start --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "12"
},
"main": "lib/index.js",
"dependencies": {
"#google-cloud/firestore": "^4.8.0",
"#sentry/node": "^5.29.2",
"#sentry/tracing": "^5.29.2",
"axios": "^0.21.1",
"bad-words": "^3.0.4",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.8.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "^2.22.0",
"firebase-functions-test": "^0.2.0",
"typescript": "^3.8.0"
},
"private": true
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"target": "es2017"
},
"compileOnSave": true,
"include": [
"src"
]
}
===Project 2===
node -v
v14.15.2
npm -v
6.14.9
package.json
{
"name": "user-approval",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"lint": "eslint \"src/**/*\"",
"build": "tsc",
"start": "node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"engines": {
"node": "12"
},
"license": "ISC",
"dependencies": {
"#sentry/node": "^5.29.2",
"#sentry/tracing": "^5.29.2",
"#slack/bolt": "^2.5.0",
"#slack/web-api": "^5.14.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.8.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "^2.22.0",
"typescript": "^3.8.0"
},
"private": true
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"sourceMap": true,
"strict": true,
"target": "es2017"
},
"compileOnSave": true,
}
I suspect the projects have different versions of the #types/node package installed. If you run
npm update #types/node
in each project, it should update each of them to the latest.
I was confused at first because #types/node didn't appear in your package.json files, but it doesn't even if you install it unless you add --save-dev. Even though npm install defaults to --save normally, apparently not for #types packages — which makes sense, they're just a dev dependency, not a runtime dependency.
I'd probably add them as a dev dependency by doing:
npm install #types/node --save-dev
I have used react-monaco-editor in my current project, but facing issues getting it running.
I have followed the docs and made the respective changes in my files.
Here is my package.json file
{
"name": "chatbot_compiler",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-monaco-editor": "^0.34.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",
"lint:fix": "eslint src/**/*.js --fix"
},
"eslintConfig": {
"extends": "react-app",
"rules": {
"indent": [
"error",
2
]
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"monaco-editor-webpack-plugin": "^1.9.0",
"prettier": "^1.19.1",
"react-app-rewired": "^2.1.5"
}
}
and here is my config-overrides.js file
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
module.exports = function override(config, env) {
config.resolve = {
alias: {
"monaco-editor": "monaco-editor/esm/vs/editor/editor.api.js"
}
};
config.plugins.push(
new MonacoWebpackPlugin({
languages: ["json"]
})
);
return config;
};
I am getting this error when running npm start
Cannot find module 'monaco-editor/esm/vs/editor/editor.worker'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chatbot_compiler#0.1.0 start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chatbot_compiler#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Any help would be highly appreciated. Thanks in advance :)
It's version issue, I use "react-monaco-editor": "^0.43.0" with "monaco-editor-webpack-plugin": "^4.0.0",, the issue is gone.
Can you try to install monaco-editor too, as it uses it under the hood. It's only a peer dependency so won't install with this package.
In case you using https://github.com/suren-atoyan/monaco-react, then below config will help. Solved this issue by adding moduleNameMapper to the jest config. I have my jest config added to my package.json.
Ref,
"jest": {
"moduleNameMapper": {
"monaco-editor": "<rootDir>/node_modules/#monaco-editor/react"
}
}
Ref - https://github.com/suren-atoyan/monaco-react/issues/383#issuecomment-1304557569
Error Message
Unknown plugin \"require-all\" specified in "\project\directory\path\.babelrc.env.development"
My files
.babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source", "require-all"]
}
}
}
package.json
{
"name": "text-adventure-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-plugin-require-all": "0.0.1",
"jest-expo": "~27.0.0",
"react-native-scripts": "1.14.0",
"react-test-renderer": "16.3.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"clear": "^0.1.0",
"create-react-class": "^15.6.3",
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-typewriter": "^0.5.3"
}
}
babel-plugin-require-all
installed via npm as described here:
https://github.com/dushaobindoudou/babel-plugin-require-all
What I've tried
Changing "require-all" to "babel-plugin-require-all"
Deleting and re-installing my node_modules
Clearing npm cache
Scoured the internet for advice on including babel plugins
There is a problem in the package.json for that plugin - there is an extra (space) in the main property which means babel can't resolve it. I verified this by removing the space from the end of the line, and it successfully compiles.
My advice in this case would be to use a different package (maybe something like https://github.com/vihanb/babel-plugin-wildcard could help) or submit a pull request to the babel-plugin-require-all package to remove the extra space.