Storybook 6: ERROR in No files matching '[path to project]/storybook-init-framework-entry.js' were found

Viewed 19

We're currently using TypeScript 4.4.4, Storybook 6 and webpack 4. I'm trying to upgrade to the latest TypeScript - 4.8.3. To achieve that, I had to also:

  • Upgrade @typescript-eslint/eslint-plugin and @typescript-eslint/parser from 4.33.0 to 5.37.0
  • Upgrade eslint from 6.7.2 to 8.23.1
  • Replace the deprecated eslint-loader (3.0.2) with eslint-webpack-plugin (2.7.0, because we're using webpack 4 as opposed to 5)

I'm getting the following error when running storybook:

ERROR in No files matching '[path to my project]/storybook-init-framework-entry.js' were found.

Any ideas would be greatly appreciated.

Dependencies in package.json

{
  "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",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0",
    "react-redux": "^7.1.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "traffic-source-analyzer": "1.0.0",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "@babel/preset-typescript": "^7.10.1",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-knobs": "^6.4.0",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/addon-viewport": "^6.5.10",
    "@storybook/addons": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@types/iframe-resizer": "^3.5.8",
    "@types/luxon": "^1.21.0",
    "@types/nock": "^11.1.0",
    "@types/react-redux": "^7.1.0",
    "@types/storybook__addon-info": "^5.2.4",
    "@typescript-eslint/eslint-plugin": "5.37.0",
    "@typescript-eslint/parser": "5.37.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "copy-webpack-plugin": "^5.0.5",
    "core-js": "^3.4.7",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "eslint": "^8.23.1",
    "eslint-config-mm": "git+https://github.com/FTBpro/eslint-config-mm.git#v3.1",
    "eslint-webpack-plugin": "^2.7.0",
    "jest": "^24.0.0",
    "jest-junit": "^10.0.0",
    "mm-pilot-mock": "1.0.0",
    "nock": "^11.7.0",
    "npm-run-all": "^4.1.3",
    "terser-webpack-plugin": "^2.2.1",
    "typescript": "4.8.3",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3",
    "webpack-node-externals": "^1.7.2"
  }
}

.storybook/webpack.config.js

const path = require("path");
// I added this as a part of the TypeScript upgrade attempt
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(js|ts|tsx)$/,
    exclude: /node_modules/,
    use: [{loader: require.resolve("babel-loader"), options: {
        presets: [['react-app', { flow: false, typescript: true }]],
      },}],
    include: [path.resolve(__dirname, "../performance"), path.resolve(__dirname, "../src"), path.resolve(__dirname, "../stories")],
  });
  config.resolve.extensions.push(".js", '.ts', ".tsx");
  // I added this as a part of the TypeScript upgrade attempt
  config.plugins.push(new ESLintPlugin());

  return config;
};

babel.config.js

module.exports = function (api) {
  api.cache(true);
  const presets = [
      ['@babel/preset-env',
        {
          modules: false,
          targets: {
            browsers: ['last 2 versions'],
          },
        },
      ],
      '@babel/preset-react',
    '@babel/preset-typescript',
  ];
  const env = {
    test: {
      presets: [
        ['@babel/preset-env'],
        '@babel/preset-react',
        '@babel/preset-typescript'],
    },
  };

  const plugins = [
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-proposal-json-strings',
    '@babel/plugin-proposal-optional-chaining',
  ];

  return {
    presets,
    env,
    plugins,
  };
};
0 Answers
Related