Storybook: Typescript error: TypeError: Cannot read property 'afterCompile' of undefined

Created on 7 Jun 2018  ·  5Comments  ·  Source: storybookjs/storybook

Bug summary

I am trying to run Storybook 3.4.6 with Typescript. Currently I am trying to make it work using ts-loader. Whenever I try running yarn storybook, i get the error:

Module build failed: TypeError: Cannot read property 'afterCompile' 
of undefined at successfulTypeScriptInstance

Steps to reproduce

.storybook/config.js

...
function loadStories() {
    const req = require.context('../src', true, /^.*\.stories\.tsx$/)
    req.keys().forEach(filename => req(filename))
}
...

.storybook/webpack.config.js

const path = require("path");
const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin");
module.exports = (baseConfig, env, config) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve("ts-loader")
    });
    config.plugins.push(new TSDocgenPlugin()); // optional
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
};

Folder structure

├── .storybook
└── src
    └── components
        └── Button
            ├── Button.tsx
            └── Button.stories.tsx

Run yarn storybook

Storybook version and affected addons

"@storybook/addon-actions": "^3.4.6",
"@storybook/addon-info": "^3.4.6",
"@storybook/addon-links": "^3.4.6",
"@storybook/react": "^3.4.6",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"ts-loader": "^4.0.0",
"tslint": "^5.9.1",
"typescript": "^2.9.1",
"webpack": "^4.11.1",       
"webpack-cli": "^2.1.3"

Screenshot:
screen shot 2018-06-07 at 09 22 03

babel / webpack question / support typescript

Most helpful comment

ts-loader v4 is using webpack v4, but storybook v3.4.x is yet dependant on webpack 3. you should probably use v4 of the storybook as well (which is alpha).

All 5 comments

ts-loader v4 is using webpack v4, but storybook v3.4.x is yet dependant on webpack 3. you should probably use v4 of the storybook as well (which is alpha).

Thank @igor-dv, i'll try setting it up with v4 instead.

Upgrading to Storybook v4 fixed my error. Now i just need to make react-docgen-typescript-loader work in v4...

Do you happen to know how to solve this issue in v4 @igor-dv?

Module build failed: TypeError: Cannot read property 'escapedText' of undefined

Didn't use it. But looks they have a readme

Thanks for your reply. Yeah, i've read their readme, it didn't work for me unfortunately. But I made an issue on their repo :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

arunoda picture arunoda  ·  3Comments

tlrobinson picture tlrobinson  ·  3Comments

ZigGreen picture ZigGreen  ·  3Comments

wahengchang picture wahengchang  ·  3Comments

shilman picture shilman  ·  3Comments