The vue-styleguidist fails to work due to the following error: The import attempt of 'h' from 'vue' (imported as 'Vue') was unsuccessful

Currently, I am attempting to execute the command vue-styleguidist server, however, an error is being thrown:

An attempt to import error: 'h' is not exported from 'vue' (imported as 'Vue').
 @ ./node_modules/vue-styleguidist/lib/client/rsg-components/Preview/PreviewAsync.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/Playground.js
 @ ./node_modules/vue-styleguidist/lib/client/rsg-components/PlaygroundAsync/PlaygroundAsync.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/index.js

Upon running the vue-styleguidist build command, the resulting file in the docs directory is incomplete, displaying only component props without methods.

The versions I am using are: Vue 2.0, webpack 4.44.1, and styleguidist 4.44.17

javascriptvue.jsvuejs2react-styleguidistvue-styleguidist

Answer №1

It's recommended to ensure that both react and react-dom are updated to version 17, adding them to peerDependencies if necessary.

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

Modify the contents of three div elements by incorporating JavaScript and ajax techniques

Currently working with rails 4 and JavaScript, I am faced with the following dilemma: I want to be able to alter the content of 3 specific divs on my page by clicking a single button. The values in these divs are being created by a Ruby function located in ...

javascriptjqueryruby-on-railsrubyajax

The canvas doesn't seem to be rotating even after executing the setTransform

Within my HTML5 canvas, I have been experimenting with drawing lines and rotating them around the center point. My goal is to reset the canvas's transformation each time I draw, followed by re-translating/rotating the canvas. However, I have encounter ...

javascriptcanvas

Retrieve JSON data from the text area

How to retrieve a JSON file from a textarea and identify the location of errors in the code causing issues with reading the JSON? $(document).ready(function(){ $('textarea').change(function(){ var fa=[ $('textarea').val() ]; ...

javascriptjqueryhtmljson

VS code shines a spotlight on Jasmine functions within Angular 6

Recently, I made the switch to Angular 6.0. However, in VS Code, all jasmine functions are being highlighted as unknown even though they work fine and the tests run successfully. How can I make intellisense recognize Jasmine? In previous versions, a worka ...

javascriptangulartypescriptvisual-studio-codejasmine

Replicate the functionality of a backend API using AngularJS

Currently, I am in the midst of creating a GUI for an application that is still undergoing API development. Although I have a vision of how it will look, it lacks functionality as of now. Hence, I need to replicate its behavior until the API is fully funct ...

javascriptangularjs

Tips on avoiding the conversion of the ✳ symbol into an emoji

My issue lies in my ✳ (Eight-Spoked Asterisk) symbol being converted to an emoji on iOS/android devices. Find more about the Eight-Spoked Asterisk Emoji here. Could someone guide me on how to prevent the normal symbol ✳ from being transformed into an ...

javascripttypescriptunicodeemojiconverters

Create a new Chart.js visualization using information retrieved from an external API

Seeking to initialize a Chart.js chart with an API, I've come across tutorials that update the data post page rendering. However, I wish to update the chart before the page renders, enabling me to view the initialized chart without any reload. <tem ...

javascriptvue.jschart.jsvue-componentvuejs3

What is the best way to restrict datalist options while preserving the "value" functionality?

After finding a creative solution by @Olli on Limit total entries displayed by datalist, I successfully managed to restrict the number of suggestions presented by a datalist. The issue arises from the fact that this solution only covers searching through ...

javascripthtmlhtml-datalist

Can a cancel button be added to a mobile keyboard for easier use?

Looking to streamline the mobile UI for my Vue-built SPA by removing unnecessary buttons. Encountering an issue with form submission on mobile keyboards triggering unwanted listeners. Is there a way to introduce a cancel button for forms on mobile? ...

formsvue.jsmobilesingle-page-application

Retrieve HTML content from Vuetify components without displaying it on the webpage

I have a project where I need to retrieve the HTML code from various Vuetify components. Instead of just as a HTML string, I actually need it as a DOM element that can be easily added to the body. This is necessary for me to be able to utilize these compon ...

javascripthtmlvue.jsdomvuetify.js

Adding new pages in express.js without increasing the complexity of the routes

I am currently developing a project using Express.js and have been enjoying the experience. While the site is running smoothly, I am now looking for a way to allow users to contribute by adding pages to the site through either a form with set fields or by ...

javascriptnode.jsexpresswebpug

Having trouble with jsPlumb accurately rendering lines

http://jsbin.com/ofapew/1/edit I am currently experimenting with jsPlumb to connect two points, specifically trying to link the green dots to the top of a black border box. One thing that is puzzling me is that even though the green dot end point appears ...

javascriptjqueryjsplumb

The DiscordBot is configured to send a personalized direct message to users who have chosen a specific role

Having trouble setting up my bot to send a DM to new members who choose the Advertising role, and I can't figure out why. I'm fairly new to this. const { Client, GatewayIntentBits } = require('discord.js'); const client = new Client({ ...

javascriptnode.jsdiscord.js

Is there a way to retrieve the client's IP address from the server side within a Next.js application?

How can I determine the user's time zone and location in order to generate a server-side page tailored to their specific location and time zone? I am struggling to retrieve the user's IP address from the request or the localhost IP address (127.0 ...

javascriptnode.jsreactjsexpressnext.js

Adjusting the input in a Textfield within React using Material UI

const [formData, setFormData] = useState({}); useEffect(() => { fetch("/formdata") .then((res) => res.json()) .then((data) => setFormData(data)); }, []); console.log("Form Data", formData); //Sorting by order let attr; ...

javascriptreactjsreact-hooksmaterial-ui

Continuous scrolling generates new pagination links as I continue to scroll

Thanks to the helpful comment from lharby on my previous post, I finally figured out how to implement Infinite Scrolling. Big thank you! The only issue now is that the script starts generating a new pagination link after scrolling past 15 posts (which i ...

javascriptinfinite-scrolltumblrtumblr-themestumblr-html

Navigating within an ng-if or ng-show in AngularJS

Currently, I am developing a web application using AngularJS and there are times when I need to verify if the element inside the ng-if or ng-show directive belongs to a specific list. The approach I am using right now is shown below: <div ng-if="object ...

javascriptangularjsangularjs-directive

How to use javascript/html to differentiate between male and female names?

I've developed a random name generator code that is powered by both CSS and JavaScript. Currently, the code allows me to input any name - regardless of gender - press the generate button, and receive a randomly generated first and last name. However, ...

javascripthtmlcss

Using Vue3 to set attributes on web components

I recently developed a self-contained web component using Vite and Vue3 to replace outdated jQuery libraries. When this component is rendered in HTML, it appears like this: <custom-datepicker id="deliveryTime"> #shadow-root <div> ...

javascriptvue.jsvuejs3web-component

The Issue of Vue Component Render Function Triggering an Infinite Update Loop

I'm running into a Vue warning that says: infinite update loop in component render function This warning is popping up while I'm writing a unit test. The code I'm working on involves using Vuetify's data table to display information ...

unit-testingvue.jswarningsvuetify.js