import from Webpack is null, but from Typescript is correct

Question

I am attempting to publish a private package @mygame/task.common so a second package @mygame/task.task1 can import and use it.

@mygame/task.common is made with Typescript, currently containing nothing else than a index.ts file with a sayHello() function. A Webpack config takes care of bundling it into my dist folder with a d.ts file which @mygame/task.task1 will import and use it.

But after importing my task.common in my task.task1 package, a console log of the content of task.common returns nothing else than an empty object {}. However, if I skip the Webpack process and compile with Typescript, the import works fine and the console log returns the content of my package. So I have all the reasons to believe the import failure is due to the way Webpack encapsulated the js code in its various closures, probably due to a wrong configuration.

Would you be able to tell me which step I am doing wrong in bundling my code with Webpack? I'm joining below the code for: webpack.config.js, tsconfig.json, (task/task1) Main.ts index.js (webpack version) and index.js (ts version). If I should provide anything else please let me know.

[EDIT] I have managed to replicate the issue in a clean repository. Link project1 (npm link) to project2 (npm link @mygame/project1) then build project1 if necessary (npm run build), then build project2 and serve it (npm run serve). You should get this from the console:

Object(...) is not a function

Big thank you to anyone reading and helping me.

webpack.config.js

const path = require('path');
const distPath = path.resolve(__dirname, 'dist');

module.exports = {
    entry: "./src/index.ts",
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: { test: /[\/]node_modules[\/]/, name: "vendor", chunks: "all" }
            }
        }
    },
    mode: 'development',
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                include: [path.resolve(__dirname, 'src')],
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
        filename: '[name].js',
        path: distPath
    },
    devServer: {
        contentBase: 'dist'
    }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src"
  ]
}

main.ts (in @mygame/task.task1)

import * as taskcommon from "@mygame/task.common";

console.log(taskcommon); // empty object with Webpack, full object with TS

index.js (webpack)

/******/ (() => { // webpackBootstrap
/******/    "use strict";
/******/    var __webpack_modules__ = ({

/***/ "./src/index.ts":
/*!**********************!*\
  !*** ./src/index.ts ***!
  \**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "sayHello": () => /* binding */ sayHello
/* harmony export */ });
function sayHello() {
    console.log("Hello from common");
}


/***/ })

/******/    });
/************************************************************************/
/******/    // The module cache
/******/    var __webpack_module_cache__ = {};
/******/    
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/        // Check if module is in cache
/******/        if(__webpack_module_cache__[moduleId]) {
/******/            return __webpack_module_cache__[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = __webpack_module_cache__[moduleId] = {
/******/            // no module.id needed
/******/            // no module.loaded needed
/******/            exports: {}
/******/        };
/******/    
/******/        // Execute the module function
/******/        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/    
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/    
/************************************************************************/
/******/    /* webpack/runtime/define property getters */
/******/    (() => {
/******/        // define getter functions for harmony exports
/******/        __webpack_require__.d = (exports, definition) => {
/******/            for(var key in definition) {
/******/                if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/                    Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/                }
/******/            }
/******/        };
/******/    })();
/******/    
/******/    /* webpack/runtime/hasOwnProperty shorthand */
/******/    (() => {
/******/        __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
/******/    })();
/******/    
/******/    /* webpack/runtime/make namespace object */
/******/    (() => {
/******/        // define __esModule on exports
/******/        __webpack_require__.r = (exports) => {
/******/            if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/                Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/            }
/******/            Object.defineProperty(exports, '__esModule', { value: true });
/******/        };
/******/    })();
/******/    
/************************************************************************/
/******/    // startup
/******/    // Load entry module
/******/    __webpack_require__("./src/index.ts");
/******/    // This entry module used 'exports' so it can't be inlined
/******/ })()
;
//# sourceMappingURL=main.js.map

index.js (TS)

export function sayHello() {
    console.log("Hello from common");
}
//# sourceMappingURL=index.js.map

import from Webpack is null, but from Typescript is correct

0 Answers