psycheangel / deprecated-with-module-resolver Goto Github PK
View Code? Open in Web Editor NEWtesting module resolver usage with deprecated function
testing module resolver usage with deprecated function
iOS Bundling failed 5578ms
Unable to resolve module /Users/viswanath/projects/busloc/buslocmobileexpo46/buslocmobilenew/resolver/react-native from /Users/viswanath/projects/busloc/buslocmobileexpo46/buslocmobilenew/App.js:
None of these files exist:
1 | import React from 'react';
2 | import {Platform, StatusBar, Image, AppState, AsyncStorage,Linking,Modal,View,TouchableHighlight,StyleSheet,Dimensions,ActivityIndicator} from 'react-native';
3 |
4 | import AppLoading from 'expo-app-loading';
Iam getting this error when i followed the steps given by you, unable to resolve
In RN 0.71, hermes is the default, so this solution does not work.
Instead, solve it through the solution below.
In my case, it was solved immediately.
I spent two days tracking this down! Thank you for the fix!
(had to leave this to encourage you ;-)
Thanks for this great solution..
I've set up this solution and with the 'testing' log output I can see that the resolver is being called correctly. The problem I'm having is that import * as StandardModule from 'react-native';
results in StandardModule being set to {"default": {}}
. My project is setup for typescript so the import is actually pointing at @types/react-native
which is correctly installed. Below is the error I get. I guess I expect that StandardModule would show content on console log(?)
What should I be looking at to solve this?
TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[5], "/Users/.../resolvers/react-native").StyleSheet.create')
babel.config.js
// eslint-disable-next-line @typescript-eslint/no-var-requires
var path = require('path');
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
components: './components/',
lib: './lib/',
state: './state/',
styles: './styles/',
},
// See https://github.com/psycheangel/deprecated-with-module-resolver
resolvePath(sourcePath, currentFile, _opts) {
if (
sourcePath === 'react-native' &&
currentFile.includes('node_modules\\react-native\\') === false &&
currentFile.includes('resolvers\\react-native\\') === false
) {
console.log('testing', sourcePath, currentFile);
return path.resolve(__dirname, 'resolvers/react-native');
}
// macos/linux paths
// if(sourcePath === 'react-native' && currentFile.includes("node_modules/react-native/") === false && currentFile.includes('resolver/react-native/') === false){
// console.log('testing',sourcePath, currentFile)
// return path.resolve(__dirname, 'resolver/react-native');
// }
/**
* The `opts` argument is the options object that is passed through the Babel config.
* opts = {
* extensions: [".js"],
* resolvePath: ...,
* }
*/
return undefined;
},
},
],
[
'babel-plugin-inline-import',
{
extensions: ['.svg'],
},
],
'react-native-reanimated/plugin',
'module:react-native-dotenv',
],
};
tsconfig.json
// prettier-ignore
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"alwaysStrict": true,
"baseUrl": ".",
"paths": {
"components": ["./components/*", "./components/"],
"lib": ["./lib/*", "./lib"],
"state": ["./state/*", "./state"],
"types": ["./styles/*", "./styles/"],
},
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "preserve",
"lib": [
"es2017"
],
"module": "commonjs",
"moduleResolution": "node",
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
//"target": "esnext"
},
"exclude": [
"node_modules",
"e2e"
],
"include": [
"**/*.ts",
"**/*.tsx",
"**/*.js",
"**/*.jsx",
"**/*.svg",
"**/*.png"
]
}
I have alias, add your code, alias not working
alias: {
'@app/': './app/',
'@app/icons': './app/assets/icons',
'@app/images': './app/assets/images',
'@app/theme': './app/theme',
'@app/components': './app/components',
'@app/components/': './app/components/',
'@app/models': './app/models',
'@app/navigation': './app/navigation',
'@app/config': './app/config',
'@app/context': './app/context',
'@app/graphql': './app/graphql',
'@app/constants': './app/constants',
'@app/layout': './app/layout',
'@app/screens': './app/screens',
'@app/services': './app/services',
'@app/types': './app/types',
'@app/utils': './app/utils',
'@app/use-hooks': './app/use-hooks',
'@app/use-hooks/': './app/use-hooks/',
'@app/assets': './app/assets',
"test": "./test",
"underscore": "lodash",
'@app/lib': './app/lib',
'@app/lib/': './app/lib/',
}
I believe is similar to this: facebook/react-native#34688 (comment).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.