"h is not defined", Preact + Webpack 5

[imgalli]

Describe the bug
When using latest prerelease Storybook + Webpack 5, I can get Storybook to compile and bring up the server but when the pages render the preview, all of them have "h is not defined".

The stories themselves have the import { h } from 'preact'; at the top (which shouldn't be needed). The stories themselves are understood but it's falling down with Preact specifically. Should note that webpack dev server works, Jest + Testing Library works and the app builds.

To Reproduce
Link to a reproduction repo that demonstrates the bug, plus instructions on how to trigger it.

System

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Binaries:
    Node: 14.15.2 - ~/.nvm/versions/node/v14.15.2/bin/node
    Yarn: 1.22.10 - ~/Sites/zzz/node_modules/.bin/yarn
    npm: 7.9.0 - ~/Sites/zzz/node_modules/.bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 72.0.2
    Safari: 14.0.2
  npmPackages:
    @storybook/addon-actions: ^6.3.0-alpha.17 => 6.3.0-alpha.17
    @storybook/addon-essentials: ^6.3.0-alpha.17 => 6.3.0-alpha.17
    @storybook/addon-knobs: ^6.3.0-alpha.17 => 6.3.0-alpha.17
    @storybook/addon-links: ^6.3.0-alpha.17 => 6.3.0-alpha.17
    @storybook/addon-storyshots: ^6.3.0-alpha.17 => 6.3.0-alpha.17
    @storybook/addon-storysource: ^6.3.0-alpha.17 => 6.3.0-alpha.17
    @storybook/addon-viewport: ^6.3.0-alpha.17 => 6.3.0-alpha.17
    @storybook/addons: ^6.3.0-alpha.17 => 6.3.0-alpha.17
    @storybook/builder-webpack5: ^6.3.0-alpha.17 => 6.3.0-alpha.17
    @storybook/preact: ^6.3.0-alpha.17 => 6.3.0-alpha.17

{
  "dependencies": {
    "@babel/core": "^7.13.16",
    "dotenv-webpack": "^7.0.2",
    "preact": "^10.5.13",
    "html-webpack-plugin": "^5.3.1",
    "typescript": "^4.2.4",
    "webpack": "^5.35.1",
},
  "resolutions": {
    "webpack": "^5.0.0",
    "css-loader": "^5.0.0",
    "dotenv-webpack": "^7.0.2",
    "html-webpack-plugin": "^5.0.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.0.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-virtual-modules": "^0.4.2"
  },
  }
}

main.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-knobs', '@storybook/addon-storysource'],
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config, { configType }) => {
    config.resolve.fallback = {
      http: false,
      path: require.resolve('path-browserify'),
      crypto: false, // require.resolve("crypto-browserify")
    };

    config.resolve.alias = {
      srcRootDir: path.resolve(__dirname, '../src/'),
    };

    return config;
  },
};

Any help with this would be greatly appreciated.

[KrofDrakula]

@imgalli I think this is the change that might be affecting you:

#13849

With that change, stories are expected to import h (and possibly Fragment) from preact when using JSX. You could override the configuration to use the automatic runtime instead:

• how to configure the Babel JSX plugin
• how to override the plugin configuration in Storybook

[KrofDrakula]

I've recently made a PR that gets rid of required imports for h and Fragment in Preact X by default in Storybook: #15564

You can try matching the configuration from the PR or try this again once this is merged into a release.

[yevgeni-accessibe]

try adding this babel configuration to .storybook/main.js
module.exports = {
stories: ["../src//*.stories.mdx", "../src//*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-scss",
],
framework: "@storybook/preact",
babel: async (options) => ({
...options,
presets: [["@babel/typescript", { jsxPragma: "h" }]],
}),
};

[valentinpalkovic]

Closing, since the issue should be resolved. @imgalli Let me know if you still have problems.