Encountering path import errors when developing a sample webpack site within a TypeScript library

Question

Encountering path import errors when developing a sample webpack site within a TypeScript library

Struggling to integrate my custom library with TypeScript and Webpack. Import errors are causing headaches, despite smooth sailing in CLion.

Running tsc within the project directory is error-free, unlike when running npm run dev in the examples/webpack directory with webpack scripts.

Webpack output includes import errors for various typescript files without extensions and missing 'fs' module from zlib-asm's Module.js in node_modules.

Project structure includes example/webpack/ with index.tsx, h.ts, package.json, and tsconfig.json along side src/index.ts and corresponding config files.

The webpack.config.js file sets up TypeScript loading rules and outputs script.js while tsconfig.json specifies compiler options including jsxFactory as 'h'.

The issue arises from importing code in example/webpack/index.tsx using "../../".

In package.json, the main file is set to be src/index.ts.

javascript typescript npm webpack module

Answer 1

Answer №1

Great news! I successfully resolved the issue at hand. Here is a detailed breakdown of the steps I took to fix it:

To eliminate all Module not found errors, I followed these steps:

Added the "../.." paths in examples/webpack/tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
        "jsx": "react",
        "jsxFactory": "h",
        "allowJs":  true,
        "baseUrl": ".",
        "lib": [
            "es2017",
            "dom",
            "dom.iterable"
        ]
    },
    "include": ["../.."]
}

Inserted the "../../src" paths in
```
examples/webpack/webpack.config.js
```
:

resolve.modules = [
    path.join(__dirname, '../../src'), // resolves local src dependencies
    path.join(__dirname, '../../node_modules') // resolves node_modules imports 
]

Despite attending to the above modifications, I encountered some package errors. Particularly, there was an unexpected error when running tsc that involved 'fs', which seemed related to webpack:

ERROR in <PROJECT-PATH>/node_modules/zlib-asm/lib/Module.js
Module not found: Error: Can't resolve 'fs' in '<PROJECT-PATH-WINDOWS-SLASHES>\node_modules\zlib-asm\lib'

To tackle this, I made a slight adjustment in the webpack.config.js:

module.exports.node = 
    {
        fs: "empty"
    };

Answer 2

Great news! I successfully resolved the issue at hand. Here is a detailed breakdown of the steps I took to fix it:

To eliminate all Module not found errors, I followed these steps:

Added the "../.." paths in examples/webpack/tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
        "jsx": "react",
        "jsxFactory": "h",
        "allowJs":  true,
        "baseUrl": ".",
        "lib": [
            "es2017",
            "dom",
            "dom.iterable"
        ]
    },
    "include": ["../.."]
}

Inserted the "../../src" paths in
```
examples/webpack/webpack.config.js
```
:

resolve.modules = [
    path.join(__dirname, '../../src'), // resolves local src dependencies
    path.join(__dirname, '../../node_modules') // resolves node_modules imports 
]

Despite attending to the above modifications, I encountered some package errors. Particularly, there was an unexpected error when running tsc that involved 'fs', which seemed related to webpack:

ERROR in <PROJECT-PATH>/node_modules/zlib-asm/lib/Module.js
Module not found: Error: Can't resolve 'fs' in '<PROJECT-PATH-WINDOWS-SLASHES>\node_modules\zlib-asm\lib'

To tackle this, I made a slight adjustment in the webpack.config.js:

module.exports.node = 
    {
        fs: "empty"
    };

Encountering path import errors when developing a sample webpack site within a TypeScript library

Answer №1

Similar questions

What is the best way to run a JavaScript function once another function has finished executing?

Is Socket.io exclusive to browsers?

Utilizing Typescript for Efficient Autocomplete in React with Google's API

There was a problem with Type TS2507: The Type 'typeof Tapable' cannot be used as a constructor function type

Where should Babel and Webpack be placed in your package.json file - under devDependencies or Dependencies?

Using select tags in conjunction with JavaScript can add dynamic functionality to your website

How can I update the chartjs instance?

Attempting to create an auto-suggestion tool that can process and accept multiple input values, filtering out only those that begin with a designated character

Sending a string data from client to a MongoDB database using Express.js and Node.js with the help of Sails framework

What is causing my ReactJS web application to not recognize the cookies being sent by the backend server?

Encountering a Node Js post handling error with the message "Cannot GET /url

AngularJS parent selector nearest to the element

How can I trigger my function in jQuery after inputting into the jQuery text field?

Unable to insert an array within a function

JavaScript Email Verification

Transforming JSON dates to Javascript dates using AngularJS and ASP.NET

Can you specify a data type for ngFor in Angular?

When using ngStyle to bind a variable, the binding variable will be null

Unable to add a string to a http get request in Angular

Learn how to display separate paragraphs upon clicking a specific item