Storybook: source-loader: TypeError: Cannot read property 'query' of undefined
Describe the bug
An auto-generated storybook with @storybook/source-loader prints this error message and sources do not load, and no 'Story' tab appears.
To Reproduce
Demo Repo: https://github.com/petermikitsh/sb-source-error (just run yarn start-storybook)
Steps to reproduce the behavior:
npx init storybook # choose react
npm i @storybook/source-loader --dev
.storybook/main.js:
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/source-loader",
],
+ webpackFinal: async (config) => {
+ config.module.rules = [
+ ...config.module.rules,
+ {
+ test: /\.stories\.jsx?$/,
+ loaders: [
+ {
+ loader: require.resolve("@storybook/source-loader"),
+ options: { parser: "javascript" },
+ },
+ ],
+ enforce: "pre",
+ },
+ ];
+ return config;
+ },
};
info @storybook/react v6.0.5
info
info => Loading presets
WARN Failed to load preset: {"name":"@storybook/source-loader","type":"presets"} on level 1
ERR! TypeError: Cannot read property 'query' of undefined
ERR! at getOptions (/[REDACTED]/node_modules/loader-utils/lib/getOptions.js:6:31)
ERR! at readAsObject (/[REDACTED]/node_modules/@storybook/source-loader/dist/dependencies-lookup/readAsObject.js:25:45)
Expected behavior
No error, story source code loads.
Screenshots
petermikitsh
>All comments
My apologies-- I may have mis-read the documentation. I think my configuration listed above is incorrect. I've since updated my configuration. Most of my stories are now populating with source code.
Addons should be something like:
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/addon-storysource",
],
@storybook/addon-storysource uses @storybook/source-loader under the hood. If you're overriding webpack configs (e.g defining your own config.module.rules array, you'll need to setup @storybook/source-loader yourself.
petermikitsh
on 13 Aug 2020
Related issues
purplecones
·
3Comments
ZigGreen
·
3Comments
miljan-aleksic
·
3Comments
tomitrescak
·
3Comments
levithomason
·
3Comments
Most helpful comment
My apologies-- I may have mis-read the documentation. I think my configuration listed above is incorrect. I've since updated my configuration. Most of my stories are now populating with source code.
Addons should be something like:
@storybook/addon-storysourceuses@storybook/source-loaderunder the hood. If you're overriding webpack configs (e.g defining your ownconfig.module.rulesarray, you'll need to setup@storybook/source-loaderyourself.