While running yarn ios, build is getting created but after the app gets launched below error I'm getting
Error: Unable to resolve module ./index from /ProjectFolder/.:
None of these files exist:
index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
index/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (/ProjectFolder/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:137:15)
at DependencyGraph.resolveDependency (/ProjectFolder/node_modules/metro/src/node-haste/DependencyGraph.js:260:43)
at /ProjectFolder/node_modules/metro/src/lib/transformHelpers.js:177:21
at Server._resolveRelativePath (/ProjectFolder/node_modules/metro/src/Server.js:1161:12)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Server.requestProcessor [as _processBundleRequest] (/ProjectFolder/node_modules/metro/src/Server.js:468:37)
at async Server._processRequest (/ProjectFolder/node_modules/metro/src/Server.js:390:9)
Our Project structure:
Refer the image
I have modified the project structure recently, do I need to make changes in metro.config.js
Contents of config file:
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig();
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
babelTransformerPath: require.resolve("./customTransformer.js"),
},
reporter: require("#dynatrace/react-native-plugin/lib/dynatrace-reporter"),
watchFolders: [
...monorepoMetroTools.watchFolders,
...[path.resolve(__dirname, "./node_modules")],
],
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "svg"],
blockList: exclusionList(monorepoMetroTools.blockList),
extraNodeModules: {
...monorepoMetroTools.extraNodeModules,
},
},
};
})();
Related
I have integrated react-native-fbads in my React Native application. Now when i run the application, it runs and then shows this following error:
Error: While trying to resolve module `react-native-fbads` from file `/Users/tanmoysarker/musiczi-mobile/app/Ads/Fb Ads/BannerAds/index.js`, the package `/Users/tanmoysarker/musiczi-mobile/node_modules/react-native-fbads/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/tanmoysarker/musiczi-mobile/node_modules/react-native-fbads/dist/lib/index.js`. Indeed, none of these files exist:
I have no idea why this is happening. Here's my metro.config file :
const { getDefaultConfig } = require('metro-config')
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig()
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
}),
babelTransformerPath: require.resolve('react-native-svg-transformer')
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts,'jsx','js', 'ts', 'tsx', 'svg' ]
}
}
})()
How can I configure the metro.config.js of a monorepo containing multiple apps (in <root>/apps/) and packages (in <root>/packages/) to work for all apps in the monorepo? Each app has its own yarn workspace defined in the root package.json.
My current metro.config.js is:
const path = require("path");
const {getDefaultConfig} = require("metro-config");
module.exports = (async () => {
const {
resolver: {sourceExts, assetExts},
} = await getDefaultConfig(__dirname);
return {
projectRoot: path.resolve(__dirname),
watchFolders: [path.resolve(__dirname)],
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
babelTransformerPath: require.resolve("react-native-svg-transformer"),
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
},
};
})();
However, this setup seems to not load the node_modules packages of the apps (<root>/apps/<app-name>/node_modules), giving me an seemingly unrelated error (but after I move the config to the app folder, the app runs - but does not work, because it uses react-native-svg-transformer, which forces me to have metro.config.js in the monorepo root, otherwise it does not work).
I am building a react-native app with expo, I am using the modules of react-native-svg-transformer and also amplify (where I have created functions). The problem is that the functions in the amplify directory have package.json files and do not work. This is why I'm trying to put the amplify directory in the blocList of the metro configuration, but I keep getting the error:
Failed to construct transformer: TypeError: Transformer is not a constructor
This is my metro config:
const { getDefaultConfig } = require("expo/metro-config")
// extra config is needed to enable `react-native-svg-transformer`
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig(__dirname)
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer"),
assetPlugins: ["expo-asset/tools/hashAssetFiles"],
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "svg"],
blockList: [/amplify.*/]
},
}
})()
I also tried this but it didn't work either:
const { getDefaultConfig } = require("expo/metro-config")
// extra config is needed to enable `react-native-svg-transformer`
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig(__dirname)
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer"),
experimentalImportSupport: false,
inlineRequires: true,
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "svg"],
blockList: [/amplify.*/]
},
}
})()
It was that some packages used metro-config#0.59 and I npm-installed metro-config#0.61 so they were incompatible.
I use custom fonts in my React Native App, and it goes perfect. But i need to add SVG files in it, so i added metro.config.js file with following code. After that i have an error: Unrecognized font family 'NunitoSemiBold' Does anybody know how that file metro.config.js can conflict with custom fonts?
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
assetExts: assetExts.filter(ext => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
},
};
})();
I had the exact same issue and I found a fix. My guess is that there is an issue when merging (probably not merging in that case) the metro-config written from react-native-svg-transformer and the default one from expo.
Anyway, after reading the expo doc page regarding customizing the metro config, I just changed the metro config package default config
yarn add -D #expo/metro-config
then I update the metro.config.js:
const { getDefaultConfig } = require('#expo/metro-config');
const {
resolver: { sourceExts, assetExts },
} = getDefaultConfig(__dirname);
module.exports = {
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
},
};
Enjoy!
Try changing the source file for getDefaultConfig from metro-config to #expo/metro-config. Works well for me.
Ref: Expo doc
I am trying to test my serverMiddleware in nuxt which has API routes
It has a single route /api/v1/test which returns a json true
My api/index.js file
import express from 'express'
const app = express()
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.get('/test', (req, res) => res.json(true))
export default {
path: '/api/v1',
handler: app,
}
Here is my api.spec.js file which contains the test returning 404
If I test my route / it returns a 200
My test/backend/api.spec.js file
import { resolve } from 'path'
import { Nuxt, Builder } from 'nuxt'
import supertest from 'supertest'
// We keep the nuxt and server instance
// So we can close them at the end of the test
let nuxt = null
// Init Nuxt.js and create a server listening on localhost:4000
beforeAll(async () => {
const config = {
dev: process.env.NODE_ENV !== 'production',
rootDir: resolve(__dirname, '../', '../'),
mode: 'universal',
}
nuxt = new Nuxt(config)
await new Builder(nuxt).build()
await nuxt.server.listen(3000, 'localhost')
}, 30000)
// Close server and ask nuxt to stop listening to file changes
afterAll(() => {
nuxt.close()
})
describe('GET /api/v1/test', () => {
test('returns status code 200', (done) => {
supertest(nuxt.server.app).get('/api/v1/test').expect(200, done)
})
})
My jest.config.js file
module.exports = {
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js',
},
moduleFileExtensions: ['js', 'vue', 'json'],
transform: {
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue',
],
}
Can someone kindly suggest why the test is failing
In my case, it was because of the jest configuration.
my jest.config.js
testEnvironment: 'jsdom'
api.test(spec).file requires node environment.
I didn't modify it. Instead, I modified the api.test.js file.
I just added the comment code below at the head of the file.
solved) my api.test.js
/**
* #jest-environment node
*/
link : https://jestjs.io/docs/configuration#testenvironment-string