reactjs - heroku 不想玩我的 p5-react 应用程序

问题描述

我试图将 p5.js 与 react 一起使用，但我的问题是它可以在本地工作，但是当我推送到 heroku 时出现错误

未捕获的 TypeError：超级表达式必须为 null 或函数

这是草图的代码：

import React from "react";
import Sketch from "react-p5";
 
export default () => {
    let x = 0;
    let y = 0;
    let spacing = 10;
 
    const setup = (p5, canvasParentRef) => {
        // use parent to render the canvas in this ref
        // (without that p5 will render the canvas outside of your component)
        p5.createCanvas(500, 500).parent(canvasParentRef);
        p5.background(0);
        
    };
 
    const draw = (p5) => {
        // NOTE: Do not use setState in the draw function or in functions that are executed
        // in the draw function...
        // please use normal variables or class properties for these purposes
        p5.stroke(255);
        if (Math.random() < 0.5) { 
            p5.line(x, y, x + spacing, y + spacing);
        } else { 
            p5.line(x, y + spacing, x + spacing, y); 
        }

        x = x + spacing;
        if (x > p5.width) {
            x = 0;
            y = y + spacing;
        }
    };
 
    return <Sketch className="C64Sketch" setup={setup} draw={draw} />;
};

和组件：

import React, { Component } from 'react';

//import { appendScript, removeScript } from './ModScripts';

import Navbar from './Navbar';
import C64PRINT from './sketches/10PRINT';


class C64_10p extends Component {
    render() {
        return (
            <div className='c64 component_container'>
                <Navbar />

                <div className="my_spill c64">
                     this is the famous C64 one line program.  this vertion takes more then one line though.
                </div>

                <div className="10_print sketch_container">
                    <C64PRINT />
                    <a href='https://shawkai91.github.io/p5js-fafs/10PRINT/' target='_blank'>
                        here is a link to it because heroku was not liking how i was doing it
                    </a>
                    <div className="sketch_container-discription"></div>
                </div>
            </div>
        );
    }
}

export default C64_10p;

和一个链接（如果需要）：https ://shawkai-test-app.herokuapp.com/

标签： reactjsherokup5.js

reactjs - heroku 不想玩我的 p5-react 应用程序

问题描述

解决方案

推荐阅读