The specified path does not contain any of these files

Question

The specified path does not contain any of these files

Encountered an error while attempting to run a react native app on an android emulator:

None of these files exist:
  * src\components\spacer\spacer.component(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * src\components\spacer\spacer.component\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
   5 | import { SvgXml } from "react-native-svg";
   6 |
>  7 | import Spacer from "../../../components/spacer/spacer.component";
     |                     ^
   8 | import star from "../../../../assets/star";
   9 | import open from "../../../../assets/open";
  10 |
    at ModuleResolver.resolveDependency (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:152:15)
    ...
    ...

src/components/spacer/spacer.component.js:

import React from "react";
import styled from "styled-components/native";

const TopSmall = styled.View`
  margin-top: ${(props) => props.theme.space[1]};
`;

...
...

📜.eslintrc.js
📜.gitignore
📜App.js
📜app.json
📜babel.config.js
📜package-lock.json
📜package.json

Please provide assistance as I have been searching for a solution to this issue for nearly a week with no progress.

javascript react-native

Answer 1

Answer №1

One suggestion from the comments is to incorporate the babel-plugin-module-resolver in a project that has a deep file tree.

To achieve this, you can follow these steps outlined in the documentation:

npm install --save-dev babel-plugin-module-resolver

Add the plugin to your .babelrc file with custom root or alias configurations. Below is an example:

    {
      "plugins": [
        ["module-resolver", {
          "root": ["./src"],
          "alias": {
            "test": "./test",
            "underscore": "lodash"
          }
        }]
      ]
    }

In addition to the above method, you can specify the plugin in your .babelrc.js file with custom root or alias settings. Here's an example:

const plugins = [
  [
    require.resolve('babel-plugin-module-resolver'),
    {
      root: ["."],
      alias: {
        "src": "./src"
      }
    }
  ]
];

By implementing the above configurations, you will be able to simplify your import statements like this:

import star from "root/assets/star";

Eliminating the need for lengthy import paths such as:

import star from "../../../../assets/star";

Answer 2

One suggestion from the comments is to incorporate the babel-plugin-module-resolver in a project that has a deep file tree.

To achieve this, you can follow these steps outlined in the documentation:

npm install --save-dev babel-plugin-module-resolver

Add the plugin to your .babelrc file with custom root or alias configurations. Below is an example:

    {
      "plugins": [
        ["module-resolver", {
          "root": ["./src"],
          "alias": {
            "test": "./test",
            "underscore": "lodash"
          }
        }]
      ]
    }

In addition to the above method, you can specify the plugin in your .babelrc.js file with custom root or alias settings. Here's an example:

const plugins = [
  [
    require.resolve('babel-plugin-module-resolver'),
    {
      root: ["."],
      alias: {
        "src": "./src"
      }
    }
  ]
];

By implementing the above configurations, you will be able to simplify your import statements like this:

import star from "root/assets/star";

Eliminating the need for lengthy import paths such as:

import star from "../../../../assets/star";

The specified path does not contain any of these files

Answer №1

Similar questions

Ensuring Consistent Visual Harmony Across Linked Elements

Dart and external CSS and JS libraries and tools

ajax is now blocking the use of Window.location

Revolutionize iPad user experience with seamless HTML5 video integration

Angular-Loopback-SDK: The method prototype$updateAttributes is not functioning as expected

Choose a specific parameter from a line using the body parser in Node.js

Angular Material's md-checkbox is a required component

Javascript Error: Object Expected

Allowing the primary content to span the entire width of the mobile screen

How can you use JavaScript to retrieve the position of an element on a webpage?

Use the jQuery library to detect scrolling and toggle the CSS class between 'selected' and

What is the best way to customize the link style for individual data links within a Highcharts network graph?

"Data is not defined" error message is triggered when using jQuery DataTable Row Details

What is the process for incorporating custom controls into the Mantine Embla Carousel within a Next.js environment?

The $mdSticky feature in AngularJS Material seems to be malfunctioning

Update individual component based on selected value

Turn your Json-server into a live and functional URL

Node.js, sigma.js, and the typescript environment do not have a defined window

Looking to trigger the Enter key press with .sendKeys(Keys.ENTER); on something other than a text field

Issue: Module stream not found in the project directory of C:** ode_modulescipher-baseindex.js. Unable to resolve the module