Gatsby/React Project 无法识别 js 脚本标签 cloudinary 变量也尝试使用 Helmet答案

【问题标题】：Gatsby/React Project wont recongnize ssr script tag cloudinary variable also tried with HelmetGatsby/React Project 无法识别 js 脚本标签 cloudinary 变量也尝试使用 Helmet
【发布时间】：2021-06-14 03:56:35
【问题描述】：

Gatsby/React Project 不会重新识别 ssr 脚本标签 cloudinary 变量，但如果我打开检查工具并键入 cloudinary 并点击输入，整个函数就在那里。即使我将 cloudinary 控制台日志放在单击事件中，它仍然返回未定义，与 useEffect 相同。

关于我无法访问 cloudinary 的任何想法。

提前谢谢

这里是ssr

import React from "react"

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents([
    <script
      key="cloudinary"
      src="https://widget.cloudinary.com/v2.0/global/all.js"
      type="text/javascript"
      async
    />,
  ])
}

这是页面的入口代码，我只有在关闭ssr部分时才有头盔

import React, { useEffect, useState } from "react"

import Layout from "../components/layout"

import Footer from "../components/Footer"

import { Helmet } from "react-helmet"


const Concepts = ({ data, location }) => {
 


  const clickMe = () => {
    console.log(cloudinary) //returns undefined
  }


  return (
    <Layout location={location}>
      <Helmet>
        <script
          src="https://widget.cloudinary.com/v2.0/global/all.js"
          type="text/javascript"
        ></script>
      </Helmet>
  

      <button onClick={clickMe}>test</button>

      <Footer />
    </Layout>
  )
}

export default Concepts

cloudinary 的测试点是因为添加了按钮并且此脚本返回未定义。

var myWidget = cloudinary.createUploadWidget({
  cloudName: 'my_cloud_name', 
  uploadPreset: 'my_preset'}, (error, result) => { 
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ', result.info); 
    }
  }
)

【问题讨论】：

你能澄清一下你想要达到的目标吗？添加 cloudinary 脚本有什么意义？（我猜是为了添加上传图片脚本，但我不想根据假设来回答）
我添加了不起作用的代码，这导致我以使用 onClick 处理程序的方式对其进行测试。谢谢

标签： javascript reactjs gatsby cloudinary

【解决方案1】：

您有多种方法可以在<header> 中添加<script>，setHeadComponents 和Helmet> 都是完全有效的，此外，如果您检查（如您所说）输出代码，它应该会出现。所以这部分对我来说看起来很完美。

在您的情况下，cloudinary 未定义，因为属于 window 全局对象。像这样的东西应该可以工作：

import React, { useEffect, useState } from "react"
import Layout from "../components/layout"
import Footer from "../components/Footer"
import { Helmet } from "react-helmet"

const Concepts = ({ data, location }) => {
 
  const clickMe = () => {
    if(typeof window !== 'undefined'){
    console.log(window.cloudinary) //
    let widget = window.cloudinary.createUploadWidget({ 
       cloudName: `your cloudName`,
       uploadPreset: `your upload preset`}, 
    (error, result) => {
      if (!error && result && result.event === "success") { 
      console.log(result.info.url); 
    }});
    widget.open() //
   } 
 }


  return (
    <Layout location={location}>
      <Helmet>
        <script
          src="https://widget.cloudinary.com/v2.0/global/all.js"
          type="text/javascript"
        ></script>
      </Helmet>
      <button onClick={clickMe}>test</button>
      <Footer />
    </Layout>
  )
}

更多资源：

【讨论】：

哦，谢谢，我会试试这个并报告。我知道 Gatsby 在构建时对窗口对象有问题，但我会先测试一下。
所以仅供参考 gatsby 构建我需要在窗口之前执行此操作const isBrowser = typeof window !== "undefined" if (!isBrowser) { return }