Error: Unable to locate module during module creation

I encountered an error while trying to import a module in my test application.

../fetchModule/index.js Module not found: Can't resolve './Myfetch' in '/Users/******/nodework/fetchModule'

Here is the folder structure:

And here is the package.json file:

package.json

{
  "name": "fetchmodule",
  "version": "1.0.0",
  "description": "a fetch module for our project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/babel src --out-file index.js"
  },
  "peerDependencies": {
    "react": "^16.6.6",
    "react-dom": "^16.6.3",
    "axios": "^0.19.0"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "axios": "^0.19.0"
  }
}

index.js

import React, {Component} from 'react';
import Myfetch from  './Myfetch';

export default class Fetch extends Component {
 .......

}

MyFetch

import React, {Component} from 'react';
import axios from 'axios';

export default class MyFetch extends Component {
  .....
}

Answer №1

The folder structure indicates the correct path for importing in index.js:

import MyFetch from './src/Myfetch'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jquery code failing to trigger any response

Recently, I quickly created a jQuery script to dynamically populate a paragraph element in order to easily switch between player and server interaction options. However, I am currently facing an issue where my script does not populate as expected. I have a ...

How can I pass a DOM element as a prop in Vue 3?

As someone who is brand new to Vue, I'm exploring the possibilities. Although it's not something I typically do, I believe achieving a similar outcome in React + JSX (untested) could look like this: render() { const el = <p>Blah <a hre ...

Removing leading zero from ng-change value in controller

One example of my input field is shown below: <input id="0900" type="radio" ng-model="formData.appointment_hour" ng-change="change(0900)" name="appointment" value="0900" class="ng-valid ng-dirty"> After inspecting the function in my controller, I n ...

Error: Failed to locate package "package-name" in the "npm" registry during yarn installation

While working on a large project with numerous sub-projects, I attempted to install two new packages. However, YARN was unable to locate the packages despite the .npmrc being present in the main directory. ...

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...

I'm curious about why I'm receiving the error "Unable to bind to 'ngFor' since it is not recognized as a property of 'li'. Can someone please explain why this is happening?

The issue is related to the *ngFor directive for nonvegfoodlist app.component.ts import { Component } from '@angular/core'; export class Menu { id : number; name :string; } const veg : Menu[] = [ { id:1 , name:'Rice'}, { id: ...

Eliminate the navigation bar option from a website template

Is there a way to permanently eliminate the menu button in this theme? Any guidance would be appreciated. Here's the link to the theme: https://github.com/vvalchev/creative-theme-jekyll-new ...

Is there a way to pass npm parameters to dotnet publish?

So here's the situation: I'm working with a private npm registry on a corporate network, and unfortunately I can't download from github. In order to make things work, I need to include --no-optional when running npm install which is ca ...

How can we ensure that the previous selection is cleared in jQgrid only if the checkbox is not clicked

I've set up a grid with the option for multiselect: true so that I can delete multiple rows at once. When the onSelectRow event is triggered, data related to the ID is loaded and shown to the user. Everything seems to be working fine in this example ...

Angular 2 - Karma is having trouble locating the external template or style file

The file structure for this project (taken from the Angular 2 official site) is as follows: https://i.stack.imgur.com/A6u58.png Upon starting Karma, I encountered errors indicating that two files were not found under /@angular/... To resolve this issue, ...

What is the best way to retrieve the initial element from a map containing certain data?

I am attempting to retrieve the first image path directory from an API that contains an Image so I can assign the value to the Image source and display the initial image. However, when using fl[0], all values are returned. Below is the code snippet: {useL ...

Purge session files that have expired in the session-file store

I have implemented session-file-store to manage sessions in my Node-Express application. With session-file-store, a new file is created for each session, leading to an accumulation of files on the server over time. Is there a method or configuration opti ...

Struggling with textpath SVG elements in jQuery

Currently, I am implementing SVG in my project and aiming to apply the toggleClass function using jQuery on the textpath elements upon clicking. My initial plan was: $("text#names > textpath").click(function() { $(this).toggleClass("newClass"); }) ...

Implementing a line break within a JavaScript function specifically designed for formatting images

As I am not a javascript developer, the code I have been given for debugging is somewhat challenging. The issue at hand involves an iOS module where a .js CSS file has been set up and images are loading improperly, resulting in the need for horizontal scro ...

Verify MongoDB connection with Locomotivejs before executing any tasks

Before making any queries to MongoDB within a LocomotiveJS server, I need to ensure the connection is in a "connected" state and reconnect if not. One approach could be to include this check in the before filters. Is there a way to define a global before ...

Minimizing Jitter in HTML5 and JavaScript Applications

I am currently working on developing a metronome as a hobby using JavaScript/HTML5 with the intention of turning it into a FirefoxOS app. One issue I've encountered is Jitter, which is unacceptable for Metronomes. As JavaScript is single-threaded and ...

Exploring the process of setting up Jasmine tests for both services and controllers in Angular.js

I have been facing challenges in creating accurate tests for my Angular services and controllers, even though they are functioning correctly. I have searched extensively for a solution to this problem. Below is an example of my controller: angular.module ...

What could be the reason why my useRouter function isn't working as expected?

I'm currently working on developing an App using nextjs 13 and the new App router feature (https://nextjs.org/blog/next-13-4) : I've encountered a navigation issue despite following the documentation diligently. To illustrate, here's a bas ...

What is the reason for the server.close callback never being triggered?

I have a scenario where I need to gracefully close a net.Server instance (created with app.listen()) in case an unhandled error is thrown. The server creation process is located in my bin/www script, while all error handling and routing middleware configur ...

Use an array to store nested JSON fields

I'm currently seeking to enhance my proficiency in utilizing JavasScript, React, and Material-UI. I am faced with the challenge of sorting my table using a nested JSON structure and I am encountering difficulties with assigning the JSON fields to my a ...