Struggling to get the Vue.js + TypeScript + RequireJS stack functioning properly post Vue.js 2.5 upgrade

Question

Struggling to get the Vue.js + TypeScript + RequireJS stack functioning properly post Vue.js 2.5 upgrade

I am currently working on a project that uses the Vue.js 2.4 + TypeScript + RequireJS stack and I need to upgrade it to the latest version of Vue.js. However, after making the necessary changes according to the documentation, the upgrade breaks the project and I have been unable to resolve the issue.

Here is the code snippet from index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Vue.js Scratchpad</title>
  <link rel="icon" type="image/png" href="favicon.png">
  <meta charset="UTF-8">

  <script src="node_modules/requirejs/require.js"></script>
</head>
<body>

// More code here...

app-pure-vue.ts:

// TypeScript code for app here...

messageComponent-pure-vue.ts:

// TypeScript code for message component here...

In order to upgrade to Vue.js 2.5.0 and the latest vue-router, certain documented changes are required as follows:

package.json: Update to "vue": "~2.5.0" + "vue-router": "~3.1.5"
*.ts: Change import * as Vue from "vue"; to import Vue from "vue";

app-pure-vue.ts: Change

import * as VueRouter from "vue-router";

to import VueRouter from "vue-router";

Despite these changes, when upgrading to Vue.js 2.5.0, an error occurs at Vue.extend() in messageComponent-pure-vue.ts:

Uncaught TypeError: Cannot read property 'extend' of undefined
    at Object.<anonymous> (messageComponent-pure-vue.ts:5)

If you can offer assistance in resolving this issue, please take a look at the minimal reproducible example provided here: https://github.com/DKroot/Scratchpad/tree/master/Client_Side/Vue.js-2.5. The original working 2.4 code can also be found at https://github.com/DKroot/Scratchpad/tree/master/Client_Side/Vue.js-2.4.

Steps taken so far to address the issue:

Confirmed that the problem arises specifically with the 2.5.0 upgrade
Carefully reviewed release notes for version 2.5.0 (https://github.com/vuejs/vue/releases/tag/v2.5.0) and related blog posts (https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08)
Explored changes in TypeScript declarations for 2.5.0, but struggled to pinpoint the root cause due to complex exports

typescript vue.js requirejs vue-router

Answer 1

Answer №1

TL;DR:

If you encounter a module written like this:

import Vue from "vue";
import VueRouter from "vue-router";

Explanation:

In cases where a module is structured as follows:

// module.ts
export function x() { ... }
export function y() { ... }

You can import it using:

import * as Module from "./module";

However, if the module is structured differently like below:

// module-with-default.ts
export default class Module {
  public static function x() { ... }
  public static function y() { ... }
}

You would need to import it in the following way:

import Module from "./module-with-default";

In both scenarios, you will be able to utilize it as shown here:

Module.x();
Module.y();

Changes in Vue.js:

The export mechanism in v2.5.0 looks like this:

export default Vue

while in v2.4.0, it appears like so:

export = Vue;

Answer 2

TL;DR:

If you encounter a module written like this:

import Vue from "vue";
import VueRouter from "vue-router";

Explanation:

In cases where a module is structured as follows:

// module.ts
export function x() { ... }
export function y() { ... }

You can import it using:

import * as Module from "./module";

However, if the module is structured differently like below:

// module-with-default.ts
export default class Module {
  public static function x() { ... }
  public static function y() { ... }
}

You would need to import it in the following way:

import Module from "./module-with-default";

In both scenarios, you will be able to utilize it as shown here:

Module.x();
Module.y();

Changes in Vue.js:

The export mechanism in v2.5.0 looks like this:

export default Vue

while in v2.4.0, it appears like so:

export = Vue;

Answer 3

Answer №2

Summary

Here are the necessary additions for your project:

// vue-loader.ts
import * as AllVue from "Vue";
import Defaults from "Vue";

export const Vue = AllVue as unknown as Defaults;
export default Vue;

// vue-router-loader.ts
import * as AllVueRouter from "Vue-router";
import Defaults from "Vue-router";

export const Vue = AllVueRouter as unknown as Defaults;
export default Vue;

configure RequireJS like this:

paths: {
  Vue: "node_modules/vue/dist/vue.min",
  vue: "vue-loader",
  "Vue-router": "node_modules/vue-router/dist/vue-router.min",
  "vue-router": "vue-router-loader"
}

Explanation

The issue arises from how TypeScript compiles JavaScript for an amd module with default exports, and how RequireJS handles loading those default exports.

When you write:

import Vue from "vue";

Vue.extend(...);

TypeScript converts it to:

define(["require", "exports", "vue"], function (require, exports, vue_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    vue_1.default.extend(..);
});

This causes an issue because RequireJS sets vue_1 as the actual default, leading to vue_1.default being undefined (resulting in the error).

By using the provided loaders, both the non-default export and the default export (denoted by *) are re-exported, resolving the problem:

define(["require", "exports", "Vue"], function (require, exports, AllVue) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.Vue = AllVue; // <--- this solves the issue
    exports.default = exports.Vue;
});

We're essentially redirecting the resolution with our loaders, ensuring that requiring vue will load the proper Vue code.

Recommendation

To avoid this problem, consider not using RequireJS - if IE support is unnecessary, native module loading or Webpack could be viable alternatives.

Another potential solution

Check out this resource: Missing default export when using SystemJS or RequireJS makes Vue unusable with TypeScript

Answer 4

Summary

Here are the necessary additions for your project:

// vue-loader.ts
import * as AllVue from "Vue";
import Defaults from "Vue";

export const Vue = AllVue as unknown as Defaults;
export default Vue;

// vue-router-loader.ts
import * as AllVueRouter from "Vue-router";
import Defaults from "Vue-router";

export const Vue = AllVueRouter as unknown as Defaults;
export default Vue;

configure RequireJS like this:

paths: {
  Vue: "node_modules/vue/dist/vue.min",
  vue: "vue-loader",
  "Vue-router": "node_modules/vue-router/dist/vue-router.min",
  "vue-router": "vue-router-loader"
}

Explanation

The issue arises from how TypeScript compiles JavaScript for an amd module with default exports, and how RequireJS handles loading those default exports.

When you write:

import Vue from "vue";

Vue.extend(...);

TypeScript converts it to:

define(["require", "exports", "vue"], function (require, exports, vue_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    vue_1.default.extend(..);
});

This causes an issue because RequireJS sets vue_1 as the actual default, leading to vue_1.default being undefined (resulting in the error).

By using the provided loaders, both the non-default export and the default export (denoted by *) are re-exported, resolving the problem:

define(["require", "exports", "Vue"], function (require, exports, AllVue) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.Vue = AllVue; // <--- this solves the issue
    exports.default = exports.Vue;
});

We're essentially redirecting the resolution with our loaders, ensuring that requiring vue will load the proper Vue code.

Recommendation

To avoid this problem, consider not using RequireJS - if IE support is unnecessary, native module loading or Webpack could be viable alternatives.

Another potential solution

Check out this resource: Missing default export when using SystemJS or RequireJS makes Vue unusable with TypeScript

Struggling to get the Vue.js + TypeScript + RequireJS stack functioning properly post Vue.js 2.5 upgrade

Answer №1

TL;DR:

Explanation:

Changes in Vue.js:

Answer №2

Summary

Explanation

Recommendation

Another potential solution

Similar questions

Elements are automatically removed from default.vue once they have been compiled in Nuxt

Issue encountered while executing the Docker run command: EEXIST - The file already exists as a symbolic link from '/app/node_modules' to '/app/.build/node_modules'

Ensuring that the keys within an array in an object literal are limited to those present in the outer object

How to pass route parameters using v-link in Vue Router

Unable to locate module src/ in Node.js TypeScript

Develop a React component with TypeScript that defines specific props in its interface, allowing its parent component to provide those props

Get the JSON file from Firebase storage

Is there a way to prompt TypeScript to report an error when a mapped key is missing?

Understanding how Vue CLI v3 determines which JavaScript files should be separated into different chunks

Exploring the functionality of select box options in Vue

Oops! It seems like the module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' cannot be located. This may be due to a missing dependency

The correct way to integrate CSS-Modules into your Nuxt project

I keep receiving error code TS2339, stating that property 'total' is not recognized within type any[]

Trouble with Vue images not displaying

Getting into a slot within a nested component within the render function

Learn how to trigger an HTTP exception after a failed command in a saga with NestJS CQRS

Executing a function prior to signing up

Status:0 was received as the response from URL:null during the REST call made from my iOS Ionic application

The type 'ssr' is not found within the 'ResourcesConfig | LegacyConfig | AmplifyOutputs' interface. Error code: ts(2353)

Unable to install vue-property-decorator