无法在子路径上托管 Storybook答案

【问题标题】：Unable to host Storybook on subpath无法在子路径上托管 Storybook
【发布时间】：2021-02-17 16:07:23
【问题描述】：

我的 react 组件有一本故事书，当尝试在根路径（即：https://some-domain.com/）托管故事书的静态构建时，故事书可以正常工作。但是，当尝试在 https://some-domain.com/subpath 等子路径上托管时，我从控制台收到以下错误。

Uncaught SyntaxError: Invalid regular expression: /[ÂªÂµÂºÃ€-°-Í´Í¶Í·Íº-
Í½Í¿Î†Îˆ-ÎŠÎŒÎŽ-Î¡Î£-ÏµÏ·-ÒÒŠ-Ô¯Ô±-Õ–Õ™Õ -Öˆ×-×ª×¯-×²Ø -ÙŠÙ®Ù¯Ù±-Û“Û•Û¥Û¦Û®Û¯Ûº-Û¼Û¿ÜÜ’-Ü¯Ý-Þ¥Þ±ßŠ-ßªß
´-à¦€à¦…-à¦Œà¦à¦à¦“-à¦¨à¦ª-à¦°à¦²à¦¶-à¦¹à¦½à§Žà§œà§à§Ÿ-à¨à¨à¨“-à¨¨à¨ª-à¨°à¨²à¨³à¨µà¨¶à¨¸à¨¹à©™-
à©œà©žà©²-à©´àª…-àªàª-àª‘àª²à¬³à¬µ-à¬¹à¬½àœààŸ-à¡à±à®ƒà®…-à®Šà®Ž-à®à®’-à®•à®™à®šà®œà®žà®Ÿà®£à®¤à®¨-
à®ªà®®-à®¹à¯à°…-à°Œà°Ž-à°à°’-à°¨à°ª-à°¹à°½à±˜-à±šà± à±¡à²€à²…¸²à¸³à¹€-à¹†àºàº‚àº„àº†-àºŠàºŒ-àº£àº¥àº§-
àïïƒï„ï†-ï®±ï¯“-ï´½ïµ-ï¶ï¶’-ï·‡ï·°-ï·»ï¹°-ï¹´ï¹¶-ï»¼ï¼¡-ï¼ºï½-ï½šï½¦-ï¾¾ï¿‚-ï¿‡ï¿Š-ï¿ï¿’-ï¿—ï
¿š-ï¿œ]/: Range out of order in character class
    at new RegExp (<anonymous>)
    at Module.<anonymous> (vendors~main.ba0ee86f12448108b672.bundle.js:1)
    at Module.ia (ruxitagentjs_ICA2SVfgjqru_10201200909073022.js:308)
    at __webpack_require__ (runtime~main.ba0ee86f12448108b672.bundle.js:1)
    at Object.<anonymous> (vendors~main.ba0ee86f12448108b672.bundle.js:1)
    at Object.ia (ruxitagentjs_ICA2SVfgjqru_10201200909073022.js:308)
    at __webpack_require__ (runtime~main.ba0ee86f12448108b672.bundle.js:1)
    at Object.<anonymous> (vendors~main.ba0ee86f12448108b672.bundle.js:1)
    at Object.ia (ruxitagentjs_ICA2SVfgjqru_10201200909073022.js:308)
    at __webpack_require__ (runtime~main.ba0ee86f12448108b672.bundle.js:1)

根据我的理解，SB 似乎试图在根路径而不是子路径中找到一些脚本，并且由于静态文件夹在子路径下提供，因此它将无法找到它正在寻找的内容在根浴。如果我错了，请纠正我。经过一番谷歌搜索后，我尝试修改 iframe.html 文件中的标签以使 src 指向子路径，但这似乎也无济于事。有人可以帮我解决这个问题吗？

【问题讨论】：

你好@Nathan，你能提供你的SB配置/Webpack配置吗？
这可能是故事书中的一个错误。我建议你打开一个 github 问题。为什么？因为它在主路径上工作，只对子路径失败。其次，正则表达式可能会错误地尝试使用斜杠/反匹配来查找（假设配置文件中的相关文件）。

标签： javascript node.js reactjs storybook

【解决方案1】：

您可以在iframe-webpack-config.js 中设置publicPath，这应该可以解决您的问题。

我找到了解决方案here。您可以查看该胎面以获取更多信息。

【讨论】：