Unable to locate module: Error: Unable to resolve './types/string' in

I have created a reproduction repository at this link: https://github.com/mspoulsen/zod-error. You can find all my settings there.

When I try to compile the project using npx webpack, I encounter errors.

The desired outcome is to compile without any errors.

Current behavior:

ERROR in ./node_modules/zod/lib/src/index.js 7:15-40
Module not found: Error: Can't resolve './types/string' in '/home/morten/code/mspoulsen/zod-error/node_modules/zod/lib/src'
 @ ./src/index.ts 22:21-35

ERROR in ./node_modules/zod/lib/src/index.js 9:15-40
Module not found: Error: Can't resolve './types/number' in '/home/morten/code/mspoulsen/zod-error/node_modules/zod/lib/src'
 @ ./src/index.ts 22:21-35

ERROR in ./node_modules/zod/lib/src/index.js 11:15-40
Module not found: Error: Can't resolve './types/bigint' in '/home/morten/code/mspoulsen/zod-error/node_modules/zod/lib/src'
 @ ./src/index.ts 22:21-35

I am unsure if this error lies in the zod library or if it's due to something missing in my webpack or typescript configuration.

Here is an overview of my tsconfig:

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // Configuration options omitted for brevity 

    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    // More options are available, but not included for simplicity
    
    /* Module Resolution Options */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    // More resolution options exist but excluded here for clarity

    /* Advanced Options */
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

I would greatly appreciate any assistance with this issue :)

Answer №1

Hooray! I finally found the solution. It turned out to be related to my webpack setup.

Here's the part of the configuration that was causing the issue:

resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    extensions: [".ts"],
  },

All I needed to do was change the extensions array to include both .ts and .js, and voila - problem solved!

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

Guidelines for crafting an intricate selector by utilizing mergeStyleSets and referencing a specific class

I'm currently in the process of developing a web application using ReactJS. In my project, I have the following code: const MyComponent = (props: { array: Array<Data> }) => { const styles = mergeStyleSets({ container: { ...

The type 'MockStoreEnhanced<unknown, {}>' is not compatible with the type 'IntrinsicAttributes & Pick[...]

I'm currently working on creating a unit test for a container in TypeScript. From what I've gathered from various responses, it's recommended to use a mock store and pass it to the container using the store attribute. This method seems to o ...

Guide for configuring a server to exclusively render Vue components

I have been utilizing the vue-no-ssr library (available at https://github.com/egoist/vue-no-ssr), but it only renders components on the client side. I require my component to render on the server side. Is there a method to create a vue component that exclu ...

Issue with Nuxt: Property accessed during rendering without being defined on the instance

As I attempt to create cards for my blog posts, I encountered an issue with a Post component in my code. The cards are displaying like shown in the picture, but without any text. How do I insert text into these cards? Currently, all the text is within attr ...

Tips for effectively typing a collection of React wrappers in TypeScript

I encountered a situation in my team's application where we need the ability to dynamically compose component wrappers (HOCs) without prior knowledge of all the wrapper interfaces. This is mostly needed for swapping out context providers when renderin ...

Learn the art of generating multiple dynamic functions with return values and executing them concurrently

I am currently working on a project where I need to dynamically create multiple functions and run them in parallel. My starting point is an array that contains several strings, each of which will be used as input for the functions. The number of functions ...

Automated FTP file uploading implemented through Webpack plugin

Currently in the process of developing a custom Wordpress theme, I made the decision to transition from utilizing Prepros to manually handling SASS and JavaScript compiling through Webpack/Babel/PostCSS. This allows me to incorporate more personalized func ...

The bidirectional bindings within the component are malfunctioning

I just started learning Angular and I'm currently working on a small project. After following tutorials on two-way bindings, I attempted to implement it in my project. However, when I try to set values in the HTML for my component, it doesn't see ...

The Redux Store seems to be holding onto the initial state and not updating, even though the actions are functioning correctly

Upon successful authentication, the actions and reducer are updating correctly, but the mapstatetoprops function is not reflecting the changes in the new reducer state. Despite updates, the Store continues to log the initial state with each update. impor ...

How can I incorporate dynamic fields into a Typescript type/interface?

In my Typescript interface, I have a predefined set of fields like this: export interface Data { date_created: string; stamp: string; } let myData: Data; But now I need to incorporate "dynamic" fields that can be determined only at runtime. This me ...

Clicking the button fails to trigger the modal popup

Upon clicking a button, I am attempting to open a modal popup but encountering an error: The button click works, however, the popup does not appear after the event. test.only('Create Template', async({ page })=>{ await page.goto('h ...

Incorporate animated SVG directly into Vue templates without using any additional enclosures

I need to incorporate dynamic SVG code into my <template> without using v-html or any wrapper around it. The desired end result should look like the following, but template does not support v-html to achieve this. If there is a way to accomplish thi ...

Create an array variable for services in Angular

My goal is to define this user as an array. users = new BehaviorSubject<any>([]); In my component, I am attempting to add the userID to the array. this.Service.users.push(userID); To subscribe to it, I use the following code: this.Service.users.su ...

Input a new function

Trying to properly type this incoming function prop in a React Hook Component. Currently, I have just used any which is not ideal as I am still learning TypeScript: const FeaturedCompanies = (findFeaturedCompanies: any) => { ... } This is the plain fun ...

Tips for transforming an Observable stream into an Observable Array

My goal is to fetch a list of dogs from a database and return it as an Observable<Dog[]>. However, whenever I attempt to convert the incoming stream to an array by using toArray() or any other method, no data is returned when calling the retrieveDo ...

Problems during the installation of Webpack

Encountering Error Setting up Webpack and Babel with NPM npm ERR! Unexpected end of JSON input while parsing near '...pdragon":"^0.7.0","to' npm ERR! A complete log of this run can be found in: npm ERR! A complete log of this run can be found ...

The error message "Property 'list' is not found on type 'void' React - Material UI" indicates that the 'list' property is not recognized

Currently, I am facing an issue while working with Material UI and React Typescript. The error message I receive is "Property 'list' does not exist on type 'void'" when attempting to use makeStyles and createStyles to remove padding. It ...

Implementing the Infinite Scroll feature with 'react-infinite-scroll-component' on local JSON data: A step-by-step guide

Currently experimenting with frontEnd development, I have incorporated the 'react-infinite-scroll-component' as a dependency. My goal is to apply this effect to my local Json data without relying on any API calls at this stage. I'm encounter ...

Need help with creating a unit test for the Material UI slider component? An error message saying "Error: Cannot read property 'addEventListener' of null" is displayed when trying to render the component

Encountered a problem while testing the Material-UI Slider with React-Test-Renderer: Uncaught [TypeError: Cannot read property 'addEventListener' of null] Codesandbox Link import React from "react"; import { Slider } from "@materi ...

Using vuex-class to interact with Vuex in non-Vue components

Is it possible to access Vuex outside of a Vue component using vuex-class? In a typical scenario, the process is quite straightforward: // some JS file import store from './../store'; // path to Vuex store store.commit('ux/mutationName&ap ...