ΠΠΏΠΈΡΠΈΡΠ΅ ΠΎΡΠΈΠ±ΠΊΡ
ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ ΠΊΠ½ΠΈΠ³Π° ΡΠ°ΡΡΠΊΠ°Π·ΠΎΠ² Ρ @storybook/source-loader
Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΡΡΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ΅, ΠΈ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ, Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ° Β«ΠΡΡΠΎΡΠΈΡΒ» Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
ΠΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ
ΠΠ΅ΠΌΠΎ-ΡΠ΅ΠΏΠΎ : https://github.com/petermikitsh/sb-source-error (ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΏΡΡΡΠΈΡΠ΅ yarn start-storybook
)
Π¨Π°Π³ΠΈ ΠΏΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ:
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)
ΠΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΡΠΈΠ±ΠΎΠΊ Π½Π΅Ρ, ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΈΡΡΠΎΡΠΈΠΈ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ.
Π‘ΠΊΡΠΈΠ½ΡΠΎΡΡ
ΠΡΠΈΠ½ΠΎΡΡ ΡΠ²ΠΎΠΈ ΠΈΠ·Π²ΠΈΠ½Π΅Π½ΠΈΡ - Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°Π» Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ. Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΠΌΠΎΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ, ΡΠΊΠ°Π·Π°Π½Π½Π°Ρ Π²ΡΡΠ΅, Π½Π΅Π²Π΅ΡΠ½Π°. Π‘ ΡΠ΅Ρ ΠΏΠΎΡ Ρ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» ΡΠ²ΠΎΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΌΠΎΠΈΡ ΠΈΡΡΠΎΡΠΈΠΉ ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°ΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
ΠΠ΄Π΄ΠΎΠ½Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΈΠΌΠΈ:
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/addon-storysource",
],
@storybook/addon-storysource
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ @storybook/source-loader
ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ. ΠΡΠ»ΠΈ Π²Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π²Π΅Π±-ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠ°ΡΡΠΈΠ² config.module.rules
, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ @storybook/source-loader
.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠΈΠ½ΠΎΡΡ ΡΠ²ΠΎΠΈ ΠΈΠ·Π²ΠΈΠ½Π΅Π½ΠΈΡ - Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°Π» Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ. Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΠΌΠΎΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ, ΡΠΊΠ°Π·Π°Π½Π½Π°Ρ Π²ΡΡΠ΅, Π½Π΅Π²Π΅ΡΠ½Π°. Π‘ ΡΠ΅Ρ ΠΏΠΎΡ Ρ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» ΡΠ²ΠΎΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΌΠΎΠΈΡ ΠΈΡΡΠΎΡΠΈΠΉ ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°ΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
ΠΠ΄Π΄ΠΎΠ½Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΈΠΌΠΈ:
@storybook/addon-storysource
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ@storybook/source-loader
ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ. ΠΡΠ»ΠΈ Π²Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π²Π΅Π±-ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠ°ΡΡΠΈΠ²config.module.rules
, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ@storybook/source-loader
.