问题标签 [codesandbox]

所以我们正在开发一个使用 React 和 Webpack 的站点生成器。该工具带有一个设计器，可让您添加第三方 npm 插件并在 React 代码片段中使用它们。

最终用户可以对各种站点模板进行更改，然后该工具使用 webpack 在我们的服务器上编译站点包，并将它们部署在用户选择的云主机上。用户还可以在部署之前在我们的服务器上预览站点更改。

到目前为止，我们的策略是为每个站点生成一个 package.json 和 webpack.config 文件，然后运行 ​​webpack。这有效，但速度很慢。现在我们的计划是使用DllPlugin并DllReferencePlugin为我们添加到站点模板代码的基线 package.json 的那些包预先创建 dll 脚本。根据我们的实验，这应该会大大缩短网站构建时间。

但是，在另一种情况下该策略会失败……最终用户可以将她选择的 npm 包添加到她的站点并在站点的代码中引用它们。我们目前必须对用户包执行两个步骤 -

1. 我们需要yarn install包裹（当然！）。
2. 我们需要将它们全部捆绑到一个 dll 中，以便后续构建速度更快。

我们注意到大部分时间都花在 #1 上，有时在 yarn 安装包时需要几分钟。然后需要更多时间来完成#2。我们一直在尝试通过使用我们自己的webpack-dll服务实例将 dll 生成卸载到它并将清单下载到站点的 webpack 设置来减少 #2。这还具有为新请求重用缓存结果的好处。

所以理论上，我们不需要安装用户包，因为它们已经预先捆绑在dll中，从而为我们在捆绑阶段节省了大量时间。然而，通过对 DllPlugin 和 DllReferencePlugin 工作方式的一些实验，很明显即使我们有包的清单和 dll 文件，除非安装它们，否则 webpack 不会捆绑它们。

我的猜测是，由于 dll 包不存储捆绑包的入口点信息，webpack 必须解析已安装包的package.json文件，查找main（或其他入口点），然后检查它们是否在 dll 清单中. 从本质上讲，这意味着还必须先安装预先捆绑的软件包。

所以我邀请 webpack 大师提供一些指导。我们还研究了其他方法，例如非常聪明的代码盒的客户端捆绑，但不适合我们基于服务器的构建过程。

谢谢！

这是错误消息：

我尝试了两个建议：更新并重新安装。似乎都没有帮助。

这是我设置工作演示的代码框的链接。我从代码沙箱下载了示例作为一个包（请参阅第一个链接上的下载按钮），然后在npm install本地运行（Mac OS X Sierra）。

密码沙盒： https ://codesandbox.io/s/1rxq4j1on3

演示： https ://1rxq4j1on3.codesandbox.io/Sort

我正在尝试在CodeSandbox上测试 Material-UI 组件。并不断收到错误：

TypeError undefined 不是对象（评估 '_context$muiTheme.borderRadius'）

我究竟做错了什么？

我正在使用 Google 的 node.js 客户端库，在我的 React 组件中可以在这里找到 - https://github.com/googlemaps/google-maps-services-js 。我正在尝试在此函数中使用 Google 距离矩阵：

that.state.deliverycoords是动态的。当我运行这个函数时，它发出请求，浏览器控制台返回：

无法加载https://maps.googleapis.com/maps/api/distancematrix/json?destinations=-94.12788%2C45.547585&origins=1002%20Deming%20Way%2C%20Madison%2C%20WI%2053717&units=imperial&key=AIzaSyCe43xuJivO4RphF2cmLx0WdkblWdP请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ https://1zjr04npqj.codesandbox.io ”。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我在代码沙箱中运行此代码。问题：我该如何解决这个问题，我可以参考一些示例代码吗？. 谢谢

当我在最新版本的 IE 中尝试 Codesandbox 时，它一直显示“捆绑依赖项”。我无法让大多数 Codesandbox 演示在 IE 中工作，它们都有相同的问题。

例如： https ://codesandbox.io/s/mZRjw05yp https://voz37vlg5.codesandbox.io/

这是一个已知问题吗？谷歌搜索后我找不到任何关于它的信息。它适用于 IE 中的其他任何人吗？

提前致谢。

在 FIREFOX：当我执行我的代码时，我应该得到的典型错误是：“TypeError：无法读取未定义的属性 'setState'”，相反，我收到了一个非常奇怪的跨域错误。

这是错误的屏幕截图：http: //prntscr.com/iwipnb

错误 引发了跨域错误。React 无法访问开发中的实际错误对象。有关更多信息，请参阅https://reactjs.org/docs/cross-origin-errors.html。

这是我的代码：https ://codesandbox.io/s/4885l37xrw

如何避免FIREFOX 中 Codesandbox 中的跨域错误？

EDIT1：我知道什么是代码错误（bind（this））。我正在寻找跨域错误firefox问题。谢谢

我正在尝试在代码和框中运行这个 React Context 示例，但收到此错误：

我将 React 设置为 16.3，并且代码本身是直接从这个 Wes Bos 示例中提取的。我已经查看了几次代码，但没有发现任何问题。这可能是我不理解的带有代码框的上下文设置吗？

这是我的沙盒 反应示例

我想在 js fiddle 中实现同样的东西。我已经尝试过 jsfiddle 外部资源来导入依赖项。但它不起作用。我需要处理代码沙箱链接的 package.json 中提到的依赖项。如果可以，是否可以在 jsfiddle 中实现相同的沙箱，请指导我。谢谢

我正在尝试让一个定制的内置 Web 组件在codeandbox.io 中工作。这是代码：

我得到的错误：

在 Chrome 67、Arch Linux 中测试。这是链接：https ://codesandbox.io/s/yqln560jzj

它确实在一个片段中工作，它也适用于 codepen：https ://codepen.io/connexo/pen/ZjEbqo

我在这里想念什么？

如果你看看这个小小的 CodeSandbox 项目：https ://codesandbox.io/s/0oj4z7ko00

请注意 index.html 中的以下两个片段：

和

这个容器是 React 渲染应用程序其余部分（有效）的地方，但它的背景不是黄色的！为什么不？

此外，如果您查看 components/Presentational.js，您会发现以下代码段：

在 index.html 中，这些类名的一些样式：

请注意，类名已根据data道具的值正确分配给元素，但样式未生效，文本仍为黑色。

在这两种情况下，在检查器中都找不到样式，所以我真的不认为它们被覆盖了。但到底发生了什么？为什么我的样式在 CodeSandbox 中没有生效？