Error: The property 'createComponentInstance' of 'vue.ssrUtils' cannot be destructured because it is null

Recently, I made the switch from Vue 2 to Vue 3 using vue-next and encountered an error related to @vue/server-renderer.

TypeError: Cannot destructure property 'createComponentInstance' of 'vue.ssrUtils' as it is null.
  at Object../node_modules/@vue/server-renderer/dist/server-renderer.cjs.js (/path-to-project/dist/js/webpack:/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:125:1)

Upon inspecting 

node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:125:1

var vue = require('vue');
// some code here ...
const { createComponentInstance, /* other extracted vars*/ } = vue.ssrUtils; // line 125

It appears that vue.ssrUtils is showing as being null!

package.json

{
  "dependencies": {
    ...
    "@vue/server-renderer": "^3.0.0",
    "vue": "^3.0.0",
  }
}
javascriptvue.js

Answer №1

The issue arises due to the fact that vue@next offers an esm version that removes ssr apis. When you examine the package.json of vue@next, you will come across these lines:

{
    // ...
    "main": "index.js",
    "module": "dist/vue.runtime.esm-bundler.js",
    // ...
}

This is also true for @vue/runtime-dom and @vue/runtime-core.

ssrUtils can be found in @vue/runtime-core's "main" file, while "module" exposes "null".

If your project is using pure nodejs, the "module" option will not be utilized because node.js does not recognize it. Therefore, this issue only occurs when building your project with other tools.

If you are utilizing webpack, altering the priority of main/module/browser options can resolve the issue:

{
    // ...
    "resolve": {
        "mainFields": ["main", "module"]
    }
    // ...
}

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

Having a problem editing text fields while implementing state-based validation in ReactJS

I'm currently working on developing a React Form for submitting simple data to a post web service. I've set up the form, but I'm encountering issues when trying to edit the textfields. The problem lies in me updating the state variables as t ...

javascriptreactjsformsvalidationreact-bootstrap

Using the Fetch API to set variables in Vue 2: Asynchronous Task

As someone who is new to working with async tasks, I'm having trouble understanding why my fetch API call isn't updating my Vue variable even though the data appears correctly in the console log. I've tried using Async/Await without success. ...

vue.jsvuejs2async-awaitfetch-api

Accessing querySelector for elements with numerical values in their name

Here is a URL snippet that I need to work with: <h1 id="header_2" title="mytitle" data-id="header_title" class="sampleclass " xpath="1">mytitle<span aria-label="sometest" class="sa ...

javascriptjqueryangularqueryselector

Add the data fetched from MongoDB to an array within the Vue script called "array."

Through the REST API, I executed a query and received data from MongoDB. Now, I am looking to insert this retrieved data into an array in a .vue file. While I am able to print the MongoDB data in the 'async created()' method on the console, I a ...

node.jsmongodbvue.jsvuetify.js

What is the best way to trigger a JavaScript function in an iframe from a child window within the main window?

In my main file, index.php, there is an iframe named main: <iframe src="main.php" id="main_frame" name="main_frame"> </iframe> The main.php file contains two iframes: middle_frame and top_frame. <iframe src="middle.php" id="middle_frame" ...

javascriptjqueryajaxiframe

PHP code isn't properly redirecting to AJAX calls

I have the following JavaScript code that validates a form by calling a PHP script on the backend: $(function() { // Setting up form validation for the #register-form element $("#register_form").validate({ // Specifying the validation ru ...

javascriptphpjqueryajax

How seamless is the integration of React with existing HTML and CSS files?

I'm collaborating with a team of developers on a website project, and I'm curious to know if React can be added after hiring someone to develop the html and css templates. Would it be possible for one person to create the design elements while an ...

javascripthtmlcssreactjs

Using jQuery to toggle CSS properties

I'm having trouble switching between a CSS column layout and a normal layout for a div element with the ID 'article'. The jQuery script I wrote doesn't seem to work properly, as the entire thing disappears. Can anyone advise me on how t ...

javascriptjquerycss

Understanding how to retrieve the tokenId from Stripe's createToken method and effectively utilize it in a separate function within the Vuex store

When I call the Stripe.card.createToken function in my api.js file, I am trying to retrieve the generated token in order to utilize it within my Vuex. How can I achieve this? // api.js export const getStripeToken = async ({ cardInfo }) => { const { d ...

javascriptvue.jsasync-awaitstripe-paymentsvuex

Is there a way to efficiently include numerous jQuery scripts in a batch process, each with a slight variation, using a loop?

Currently, I have a script that calculates the blur effect for multiple images based on the mouse position and scroll position. However, I am looking for a more efficient way to apply this to around 100 images without duplicating the script each time. var ...

javascriptjqueryloops

Is there a way to make all Bootstrap column heights equal using only jQuery?

I am currently working on matching the heights of two columns without using an existing library like match-height.js. In this specific case, I have a row with 2 columns where the first column contains a centered black square and the second column contains ...

javascriptjqueryhtmlcsstwitter-bootstrap

Rails 4 - Functional JS errors are absent yet JavaScript functionality is not operational

Currently, I am delving into the world of Ruby on Rails and making an effort to grasp the concept of the asset pipeline. As a means to learn more effectively, I decided to construct my website using Rails and learn along the way. However, after integrating ...

javascriptjqueryruby-on-railsrubyheroku

Using jQuery to locate and substitute specific text

Here's a snippet of HTML code I'm working with for posts that have a sneak peek followed by a "Read more" button to reveal additional content. The issue arises when trying to dynamically remove the "[...]" from only the post where the button is c ...

javascriptjqueryreplace

Tips for creating a clickable li element that can toggle a checkmark

My goal is to create a list with names on the left and checkmarks on the right, where users can toggle the checkbox by clicking on the entire element without using jQuery. <div class="list-checkbox list-group list-button mx-auto mt-2"> <button ...

javascriptjquerybootstrap-4

Encountering NaN in the DOM while attempting to interpolate values from an array using ngFor

I am working with Angular 2 and TypeScript, but I am encountering NaN in the option tag. In my app.component.ts file: export class AppComponent { rooms = { type: [ 'Study room', 'Hall', 'Sports hall', ...

javascriptangulartypescriptvisual-studio-codenan

Error in Jquery click function not being triggered

I'm in the process of developing an eCommerce platform where users can choose options and have their shopping carts automatically updated using jQuery. Users will be presented with a few radio buttons to select from, and as they make their choice, th ...

javascriptjqueryhtml

Pressing a key once causing two actions when managing content in a separate window

Issue: I am facing a problem where I receive double keypresses from one key event when the event updates content in two separate windows. (Please keep in mind that I am not an expert in this field and appreciate your understanding.) I am attempting to use ...

javascriptjqueryhtml

What is causing the error message "Uncaught TypeError: Cannot read properties of null (reading 'push')" to be displayed when running this code?

I encountered an issue while trying to run this code which resulted in an Uncaught TypeError: Cannot read properties of null (reading 'push') console.log("HI"); let addbtn = document.getElementById("addbtn"); addbtn.addEventLi ...

javascript

Is there a way to present a standard image in a circular format?

My goal is to transform a regular rectangle image into a rounded image. Can anyone provide guidance on how to achieve this transformation? (Credit for the image) ...

javascripthtml

Exploring the possibilities of reading and writing data in localStorage?

Just starting out with Phonegap, jQuery Mobile, and HTML5 - so please bear with me as I navigate through this learning process! I'm having an issue and could use some help. When trying to use a variable from localStorage, the screen remains blank whe ...

javascriptandroidhtmlcordova