无法在子路径上托管 Storybook

Posted 2023-02-19

【中文标题】无法在子路径上托管 Storybook

【英文标题】：Unable to host Storybook on subpath

【发布时间】：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 问题。为什么？因为它在主路径上工作，只对子路径失败。其次，正则表达式可能会错误地尝试使用斜杠/反匹配来查找（假设配置文件中的相关文件）。

【参考方案1】：

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

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