Javascript 盖茨比/React项目不会识别ssr脚本标记cloudinary变量，也尝试使用头盔

Gatsby/React项目不会识别ssr脚本标记cloudinary变量，但是如果我打开inspect工具并键入cloudinary并点击enter，则整个函数都在那里。即使我将cloudinary控制台日志放在click事件中，它仍然返回未定义的，与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
    />,
  ])
}

---

您有多种方法可以在

中添加

，setHeadComponents和都是完全有效的，此外，如果您检查（如您所说）输出代码，它应该会出现。所以我觉得那部分很完美

在您的情况下，

cloudinary

未定义，因为它属于

窗口

全局对象。像这样的方法应该会奏效：

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>
  )
}

import React，{useffect，useState}来自“React”
从“./组件/布局”导入布局
从“./组件/页脚”导入页脚
从“反应头盔”导入{Helmet}
常量概念=（{data，location}）=>{
常量clickMe=（）=>{
如果（窗口类型！==“未定义”）{
console.log（window.cloudinary）//
让widget=window.cloudinary.createUploadWidget（{
cloudName:`your cloudName`，
uploadPreset:`your upload preset`}，
（错误、结果）=>{
如果（！error&&result&&result.event==“success”）{
log（result.info.url）；
}});
widget.open（）//
} 
}
返回(
测试
)
}

其他资源：

---

您能稍微说明一下您想要实现的目标吗？添加cloudinary脚本有什么意义？（我想是为了添加upload images脚本，但我不想基于假设来回答问题）我添加了不起作用的代码，这导致我用onClick处理程序测试它。谢谢。谢谢。我会试试这个，然后再报告。我知道盖茨比在构建时对窗口对象有问题，但我将首先进行测试。因此，仅作为盖茨比构建的参考，我需要在窗口

const isBrowser=typeof window！==“未定义”如果（！isBrowser）{return}

Yes很好，我忘了添加它

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); 
    }
  }
)

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>
  )
}