We Keep Coding

Can't import module using package.json "exports" in React

I am trying to import a (typescript) package into a (typescript) React project. This modules uses the exports property in the package.json file to control what can be imported from it. But, in my React project, I can not get the paths exported in exports to work. Instead, I can import anything from the module. So for example, I export a path ./certificate using exports in package.json. But instead of importing like:
import {test} from "certificationtypes/certificate"
I need to import like:
import {test} from "certificationtypes/src/certificate"
(It also exposes all other files not exported using the exports directive).
This is the package.json of the module:
{
"name": "inputsvalidator",
"version": "1.0.0",
"description": "",
"main": "./build/src/index.js",
"exports": {
"./certificate": "./build/src/certificate.js"
},
"scripts": {
"build": "tsc",
"prepare": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"devDependencies": {
"typescript": "^4.9.4"
},
"dependencies": {
"#types/validator": "^13.7.10",
"certificationtypes": "file:../certificationTypes",
"countries": "file:../../../../../lib/shared/countries",
"types": "file:../../../../../lib/shared/types",
"validator": "^13.7.0"
}
}
The strange thing is that this does work in Node.js projects! So is there something extra I should do to also make this work in my React project? I did read that this should be supported using webpack.
My package.json for my React project:
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.18.11",
"#types/react": "^18.0.26",
"#types/react-dom": "^18.0.10",
"certificationtypes": "file:../../lib/shared/certificationTypes",
"countries": "file:../../../../lib/shared/countries",
"inputsvalidator": "file:../../lib/shared/inputsValidator",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-spinners": "^0.13.7",
"styled-components": "^5.3.6",
"typescript": "^4.9.4",
"validator": "^13.7.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/styled-components": "^5.1.26"
},
"proxy": "http://localhost:3003"
}

By default, TypeScript does not regard "exports" fields in package.json files when importing packages.
In TypeScript 4.7 or later, this feature can be enabled explicitly in the compiler options by setting moduleResolution to "node16" or "nodeNext" in the current project (there is nothing the imported package can do to enforce this setting), e.g.
// tsconfig.json
{
...
"compilerOptions": {
...
"moduleResolution": "node16",
...
},
...
}
Just be careful that doing so may unexpectedly break other parts of your applications, because then other settings in package.json start to play a role as well.

cannot find module '#babel/preset-env' NPM

Hello I am trying to do some coding and it seems something offed my package.json so bad even on a vscode restart it still won't find the preset-env its looking for.
here's what I've tried.
npm uninstall #babel/core #babel/preset-env #babel/preset-react
npm install #babel/core #babel/preset-env #babel/preset-react
blowing away the entire project and starting fresh and to no avail none of it has worked.
looking at my package.json
{
"name": "peek-me",
"private": true,
"version": "1.0.0",
"description": "",
"main": "package.json",
"license": "UNLICENSED",
"scripts": {
"start": "sanity start",
"build": "sanity build"
},
"keywords": [
"sanity"
],
"dependencies": {
"#babel/preset-react": "^7.18.6",
"#sanity/base": "^2.35.0",
"#sanity/core": "^2.35.0",
"#sanity/default-layout": "^2.35.0",
"#sanity/default-login": "^2.35.0",
"#sanity/desk-tool": "^2.35.1",
"#sanity/eslint-config-studio": "^2.0.0",
"#sanity/vision": "^2.35.0",
"eslint": "^8.6.0",
"prop-types": "^15.7",
"react": "^17.0",
"react-dom": "^17.0",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"webpack-cli": "4.10.0"
}
}
I'm really stumped as to why this is all of a sudden an issue

VSCode: No auto-suggestion while importing modules in node express app

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.

How to make rollup.js build a react library on installing (yarn add ssh://git#my-repo-url)

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:

How to upgrade to React Native 0.57.0 version?

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