Webpack with typescript exports.functionname doesn't work.

[NathanaelA]

Environment

• CLI: 6.1.2

• Cross-platform modules: 6.1.2

• Android Runtime: 6.12

• iOS Runtime: 6.1.1

• Plugin(s):

• Node.js: 10.15.3

  • Webpack: latest -Typescript 3.5.3

• [ ] Please, attach your package.json and webpack.config.js as these configurations are usually critical for investigating issues with webpack

Package.json doesn't matter. Stock webpack config.

Describe the bug Under NS 5.x Legacy (No webpack) the application builds and runs 100% properly. However moving it to NS 6 and the forced webpack the application breaks without any errors. No errors are thrown. Just all the events seem to be eaten...

I have spent days trying to figure out why this occurs; and finally had the break today while comparing screens that worked vs screens that didn't. Some of these screens used to be JS, but renamed them to be TS; because the JS version wasn't working...

XML

<Page
        navigatedTo="navigatedTo" navigatingTo="navigatingTo" loaded="pageLoaded" unloaded="pageUnloaded">

// Works:
export function pageLoaded() {
   console.log("Page Loaded");
}

// Fails/never called:
exports.pageLoaded = function() {
  console.log("I'm never called");
}

Can you tell me why the exports.functionName is now no longer working in NativeScript 6.x because of webpack in a TS application.

[NathanaelA]

@DimitarTachev - It appears that in the rewritten Bundle.js -- has some interesting changes -- I'm not as familiar with webpack and its settings; so this is basically what I believe the issue is, based on some tests.

It rewrites the prolog to each of the files to: /***/ (function(module, __webpack_exports__, __webpack_require__) {

So I tried changing this in the TS source code from: exports.blah = testText; to __webpack_exports__.blah = testText;

And it worked. I'm not sure why exports.blah doesn't get rewritten by webpack to __webpack_exports__ --- I would think that would happen automatically.

So basically because exports isn't rewritten to __webpack_exports__ that is the root of the issue..

[DimitarTachev]

Hi @NathanaelA,

Sorry for the late response.

We are passing a different tsconfig to the Webpack ts-loader compared to the tsconfig used in the legacy workflow and the main difference is the module property.

You could edit your tsconfig.tns.json and change the module property to commonjs in order to get your commonjs exports syntax working with Webpack. Take a look at this issue comment for more details: https://github.com/NativeScript/nativescript-dev-webpack/issues/820#issuecomment-466746579