Knobs panel is not displayed with addons.ts

[Nachasic]

With @storybook/react (v3.4.10) + typescript 2.9 knobs addon panel is not displayed.

I am using custom webpack configuration in full-control mode, webpack.config.js:

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: 'awesome-typescript-loader',
    options: {
      configFileName: 'tsconfig.storybook.json'
    }
  });

  config.module.rules.push({
    test: /\.less$/,
    loader: 'less-loader'
  });
  
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

tsconfig.storybook.json

{
    "compilerOptions": {
      "outDir": "build/lib",
      "module": "commonjs",
      "target": "es5",
      "lib": ["es5", "es6", "es7", "es2017", "dom"],
      "sourceMap": true,
      "allowJs": false,
      "jsx": "react",
      "moduleResolution": "node",
      "rootDirs": ["components"],
      "baseUrl": "src",
      "forceConsistentCasingInFileNames": true,
      "noImplicitReturns": true,
      "noImplicitThis": true,
      "noImplicitAny": true,
      "strictNullChecks": true,
      "suppressImplicitAnyIndexErrors": true,
      "noUnusedLocals": true,
      "declaration": true,
      "allowSyntheticDefaultImports": true,
      "experimentalDecorators": true
    },
    "include": ["components/**/*"],
    "exclude": ["node_modules", "build", "scripts"]
  }

config.js

import { configure } from '@storybook/react';

function loadStories () {
    require('../components/_stories_/mycomponent.stories.tsx');
};
configure(loadStories, module);

addons.ts

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';

mycomponent.stories.ts

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text } from '@storybook/addon-knobs/react';
import { action } from '@storybook/addon-actions';

const stories = storiesOf('Input element', module);

stories.addDecorator(withKnobs)

stories
    .add(
        'Inline input',
        () => <input
                type="text"
                value={text('value', 'test')} 
                onChange={action('change')}/>
        )

From package.json

"devDependencies": {
    "@storybook/addon-actions": "^3.4.10",
    "@storybook/addon-info": "^3.4.10",
    "@storybook/addon-knobs": "^3.4.10",
    "@storybook/addons": "^3.4.10",
    "@storybook/react": "^3.4.10",
}

Expected result

Both actions and knobs panels are accessible and functional.

Actual result

Only actions panel is accessible and functional, no build or runtime errors.

Workaround

Rename addons.ts to addons.js, then it's fine.

[igor-dv]

.ts support for addons file is released only with the alpha version.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!