Tale of Woe: Storybook Crumbles Post-TypeScript Update from v3 to v4

After updating TypeScript from version 3.9.6 to 4.4.4, our Storybook encountered multiple errors like the one shown below:

ERROR in ../pilot-mock-service/dist/mocks/image.js 3:7
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { generateRandomInteger, generateRandomString, removeNullValues } from './mock.utils';
| export class ImagePilotData {
>     alt;
|     caption;
|     credit;
 @ ../pilot-mock-service/dist/mocks/index.js 61:0-41 61:0-41
 @ ./stories/pages/qa/Post Page/postPagePrague.stories.tsx
 @ ./stories sync \.stories\.tsx$
 @ ./.storybook/preview.js
 @ multi ../node_modules/@storybook/core/dist/server/common/polyfills.js ../node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

Here are some key details about our project:

  • Utilizing:
    • yarn workspaces
    • Storybook 5.3.19 (@storybook/addon-info @storybook/addon-knobs @storybook/addon-links @storybook/addon-viewport @storybook/addons @storybook/react)
    • React 16.13
    • Webpack 4
    • Babel 7
    • eslint 6

The dependencies in the troubled yarn workspace include:

{
    "dependencies": {
        "@babel/polyfill": "^7.10.1",
        "aphrodite": "^2.2.3",
        "axios": "^0.19.0",
        "body-parser": "^1.18.3",
        "consent-string": "^1.4.1",
        "current-device": "^0.10.0",
        "iframe-resizer": "^4.3.2",
        "intersection-observer": "^0.7.0",
        "luxon": "^1.22.0",
        "mm-client-core": "1.0.0",
        "mm-theme-configuration": "1.0.0",
        "mm-ui-components": "1.0.0",
...

I've exhausted all possible solutions I could find without success. Any new suggestions would be highly valued.

javascripttypescriptwebpackstorybook

Answer №1

Upgrade to version 6.1 or higher of storybook.

Version 6.7 is the most recent, but versions 6.6 or 6.5 should also resolve the problem.

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

Cascade function with several parameters

I'm looking to utilize a cascade function with multiple parameters: // Cascade function (function ($) { $.fn.cascade = function (options) { var defaults = {}; var opts = $.extend(defaults, options); return this.each(functi ...

javascriptjqueryasp.net-mvc

concealing additional content within a DIV using ellipsis

Looking to conceal additional text within my DIV element with ellipsis (...) at the end Currently using: <div style="width:200px; height:2em; line-height:2em; overflow:hidden;" id="box"> this is text this is text this is text this is text </div ...

javascriptjqueryhtmlcssajax

Is it possible to alter the JSON file being loaded in AngularJS by passing a variable?

I am in need of loading the content from either food1.json or food2.json, and I am attempting to achieve this within the html template: <body ng-controller="MainCtrl" ng-init="init('food1')"> Subsequently, in the JavaScript code: $scop ...

javascriptjsonangularjs

Creating a self-chaining function in JavaScript: A guide

Currently, my goal is to create an Array.prototype function called union( array_to_union ), and then utilize it in the following manner: var a = [1,2,3]; a.union([2,3,4]).union([1,3,4]) ...... I am aiming for the outcome to be the union of these arrays. ...

javascript

Accessing a Kendo Grid instance within an Angular directive

Continuing from the previous question, which can be found here, I have an additional query that I felt warranted a separate post. The link provided above demonstrates how to obtain a grid instance in Angular, credit to Lars for that. Building upon the ex ...

javascriptangularjskendo-uikendo-grid

Jquery .load function leading to problems with button clicks

In an attempt to utilize the .load function to bring a separate .php file into my single page, I encountered a problem. After loading the page, I wanted to add a class (resulting in a change in background-color) to a button. When including the button code ...

javascriptphpjqueryhtmlcss

Is there an Angular Profile service offering getter and setter properties?

Can a singleton Angular service be created with getters and setters along with logic implementation? I was provided with the following code snippet and tasked with replicating it in an Angular service. Although it may seem straightforward, I'm finding ...

javascriptangularjs

Parsing JSON data repeatedly using JavaScript within an HTML environment

The following code I found on a popular web development website works perfectly: <!DOCTYPE html> <html> <body> <h1>Customers</h1> <div id="id01"></div> <script> var xmlhttp = new XMLHttpRequest(); var url ...

javascripthtmljson

Error: The function row.child.hasClass is not a recognized function

My challenge is creating row details for DataTables without using Ajax. I have implemented something like this: $(document).ready(function () { function format ( name, value ) { return '<div>Name: ' + name + '<br /> ...

javascriptjquerydatatable

Using FullCalendar within an Ionic3 framework powered by Angular 4

Is there a way to initialize fullCalendar in an event (such as a click) on Ionic 3, using Angular 4? This code works when the calendar options are set in a variable: calendarOptions: Object = { fixedWeekCount: true, editable: true }; However, ...

angulartypescriptionic2fullcalendar

What could be the reason for the absence of a setOwner method in the sequel object here?

Seeking guidance as a newcomer to sequelizer, I'm baffled by the error message indicating that setOwner is not recognized as a function. Despite my efforts to inspect the object it is called on and finding it resembles the large sequelize object, the ...

javascriptnode.jssequelize.js

Delay, Rebootable Delay Functions

I am currently developing a task management application using React. I am working on implementing a feature that will delay the deletion of a checked item by X seconds. If the item is unchecked within that time frame, it should not be removed. The issue I ...

javascriptreactjsjsx

Implementing async and await after making a fetch request

I am in the process of updating my code from using callbacks to utilize async and await. However, I am a bit confused on how to properly implement it within my current setup. The current setup involves: Clicking a button that triggers the clicker functi ...

javascriptajax

Whenever I attempt to install using npm, it consistently freezes at this particular step

While attempting to install babel and webpack using npm in the command line, I encountered a freezing issue at this exact step: C:\Users\\AppData\Roaming\npm-cache_locks\staging-d144261d8cd07e07.lock ...

node.jsnpmwebpackbabeljswebpack-dev-server

Can you showcase two distinct perspectives on a single page?

One of my components has nested ngFor directives looping through an array of users and their posts. I have a view link within this element, and when clicked, it should show detailed information about both the user and the post. However, the current setup i ...

angulartypescriptexpressroutes

Using ngFor directive to iterate through nested objects in Angular

Receiving data from the server: { "12312412": { "id": "12312412", "something": { "54332": { "id": "54332", "nextNode": { "65474&q ...

javascriptjsonangulartypescriptecmascript-6

What is the process of importing a JSON data file and utilizing it within a React component?

As a beginner in React, I am struggling with the concepts of importing, exporting, and rendering components. I have a fakeData.json file within the same src/components folder as the component I want to render. Let's take a look at the structure: < ...

javascriptjsonreactjs

What is the correct way to type this object conversion?

I'm trying to ensure type safety for a specific converting scenario. The goal is to map over the palette object and convert any entries to key-value pairs, similar to how tailwindcss handles color configurations. However, I am facing an issue where th ...

typescripttypestype-safety

Querying MongoDB to locate an element within an array is a common task

I need help with writing a mongoose query to select a specific object from the "cartItems" array in my mongodb database and update its "qty" and "price" fields. Here is the data: { _id: new ObjectId("634a67e2953469f7249c9a7f"), user: new ObjectId("634 ...

javascriptnode.jsmongodbexpressmongoose

`Is it common to use defined variables from `.env` files in Next.js applications?`

Next.js allows us to utilize environment variable files such as .env.development and .env.production for configuring the application. These files can be filled with necessary environment variables like: NEXT_PUBLIC_API_ENDPOINT="https://some.api.url/a ...

javascriptnext.jsenvironment-variables