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:

https://i.sstatic.net/PXg2C.png

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

Having difficulty with removing outdated NPM packages that may not be in use anymore

I'm currently in the process of reviving an ASP.net project that uses React. While I successfully cleaned up the package.json, I've encountered some challenges with removing two packages that are not utilized in the project nor listed in the pack ...

Concealing Popover with internal click

I am currently implementing Vue-PopperJS in my project, following the setup provided on the linked page with a few modifications: <template> <Popper ref="popover" trigger="clickToToggle" :options="{ pla ...

Navigating to a different section of the page and having it scroll down to a specific div

Looking for a simple solution, I want to be able to navigate to a specific section on a new page with just one click. Typically, www.mydomain.com/page1/#section should do the trick, where #section is the ID of the section. However, my current menu setup ...

What is the method for including word boundaries in a regex constructor?

export enum TOKENS { CLASS = 1, METHOD, FUNCTION, CONSTRUCTOR, INT, BOOLEAN, CHAR, VOID, VAR, STATIC, FIELD, LET, DO, IF, ELSE, WHILE, RETURN, TRUE, FALSE, NULL, THIS } setTokenPatterns() { let tokenString: s ...

Is the Webpack vendors JS bundle in Vue CLI containing unlisted code that is not in the dependencies or package-lock.json file?

An information security auditing tool flagged an outdated library with known vulnerabilities in our webpack-bundled chunk-vendors.js file generated using Vue CLI: The library in question is YUI 2.9.0. It appears that this library is not fully included, a ...

The ui.bootstrap.carousel component seems to be missing from the display

My Carousel is not displaying for some unknown reason. I have customized the implementation based on my project requirements which differ slightly from the standard guidelines. Despite this, it should function correctly as detailed below. By clicking on m ...

The function is giving back an error as it is not returning the

During this late night coding session, I'm facing a challenge with passing a JSON error object into my code using the error function in two specific cases. The first instance is within the email and password check statement, while the second occurrenc ...

Is it recommended to incorporate router.isReady when making requests with react-query?

Struggling with incorporating react-query into my codebase, currently using getStaticProps. Experimenting with router.isReady from next/router to ensure the page waits for router.query value before passing it as props to the react hook. Take a look at my ...

Refreshing the interconnected dependencies of an NPM package

Within our organization, we face a challenge with multiple web applications relying on a complex chain of internally developed npm packages stored in JFrog Artifactory. Each package has its own dependencies, leading to a cumbersome process when fixing bugs ...

Tips for retrieving information from an API and displaying it in a table

I'm struggling to retrieve data (an array of objects) from an API using a Token and display them in a table using Material-UI. However, I keep encountering the following error: Uncaught (in promise) SyntaxError: Unexpected token 'A', "Access ...

What is the best way to display two columns in each row using Angular?

Can you please provide guidance on how to display two columns in each row using Angular? I am attempting to showcase only two columns per row, and if there are more than four items, I want to display them on an ion-slide. Further details will be provided. ...

Guide on importing images from directories in Vue

As I delve into learning vue.js, a particular issue has surfaced. I am in the process of creating an SFC and encountering difficulties with loading images from the 'src / assets / logo.png' folder. Below is the code snippet: <template> & ...

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

Greetings to the amazing community of Vue.js enthusiasts, I am a novice looking to develop a single-page web application using vue.js. This application will consist of a fixed header and dynamic body content that changes based on user interactions. Here&a ...

Get the outcome achieved while utilizing the oracledb npm module

Utilizing the oracledb npm package for connecting to the database in a node.js backend API, I am successfully retrieving results using console.log(result.rows). Here is the function code: getDbConnection: function(query) { var connectInfo = [EnvCon ...

Local Grunt cannot be located following installation

Whenever I try to execute grunt or grunt -v, an error pops up: grunt-cli: The grunt command line interface (v1.2.0) Fatal error: Unable to locate local grunt. If you're seeing this message, it means that grunt has not been installed locally within ...

One way to position a sidebar between two divs is to ensure it adjusts seamlessly to the size of the browser window when resized

In my layout, I have two grids: one for the header and one for the footer. In between these two grids, I am using a sidebar on the left side. Below is the JavaScript code I am using: function adjustSize() { var heights = window.innerHeight; docum ...

Converting coordinates of latitude and longitude into JSON format

I'm currently facing some challenges with organizing map waypoints, defined by latitude/longitude pairs, within a JSON array. This is the progress I've made so far. var llData = {}; var waypointData = {}; for (i = 0; i < routeArray.length; ...

[filepond] in order to enroll using the serverId value received from the server

Using 'filepond' within a Vue application is causing an issue. In the "process" function, the ID value obtained after transferring the file to the server (response.id) needs to be registered as 'serverId' of the file. Upon checking the ...

Can html-webpack-plugin be configured to create <style> elements from CSS files?

I am managing a static site with Vue and Webpack. In my project, I have a file named style.css containing global CSS rules which I import using import './styles.css' in my index.js file. Additionally, I have some .vue files that generate their o ...

A guide on implementing reverse routes using react-router

Is there a best practice for constructing URLs for links in my react-router based app? In the Zend Framework world of php, I would use a url helper that utilizes reverse routes. By providing the route name and parameters to a route configuration, it would ...