Cannot find module '!ify-loader!linebreak'

[juliandierker]

Expected Behavior

Hey guys I would love to test your render package in my application but I'm struggling a little bit getting the depencies together.

Actual Behavior

I wrote a compontent using your package like in the coding-example just translated to es6:
import { canvas as renderer } from "scratch-render"; ....

Steps to Reproduce

When i try to reach the site where i use the scratch-render i get:
Uncaught Error: Cannot find module '!ify-loader!linebreak'

System Details

What i did so far is to install dependencies you are using like:

"hull.js": "^0.2.10", "ify-loader": "^1.1.0", and all the others

[juliandierker]

to be more concrete about the unresolved modules: I get:

Unable to resolve some modules: "raw-loader!./shaders/sprite.vert" in /home/juliandierker/projects/PearUp/node_modules/scratch-render/src/ShaderManager.js (web.browser.legacy) "raw-loader!./shaders/sprite.frag" in /home/juliandierker/projects/PearUp/node_modules/scratch-render/src/ShaderManager.js (web.browser.legacy) "base64-loader!./NotoSans-Medium.ttf" in /home/juliandierker/projects/PearUp/node_modules/scratch-render-fonts/src/index.js (web.browser.legacy) "base64-loader!./SourceSerifPro-Regular.otf" in /home/juliandierker/projects/PearUp/node_modules/scratch-render-fonts/src/index.js (web.browser.legacy) "base64-loader!./handlee-regular.ttf" in /home/juliandierker/projects/PearUp/node_modules/scratch-render-fonts/src/index.js (web.browser.legacy) "base64-loader!./Knewave.ttf" in /home/juliandierker/projects/PearUp/node_modules/scratch-render-fonts/src/index.js (web.browser.legacy) "base64-loader!./Griffy-Regular.ttf" in /home/juliandierker/projects/PearUp/node_modules/scratch-render-fonts/src/index.js (web.browser.legacy) "base64-loader!./Grand9K-Pixel.ttf" in /home/juliandierker/projects/PearUp/node_modules/scratch-render-fonts/src/index.js (web.browser.legacy) "base64-loader!./Scratch.ttf" in /home/juliandierker/projects/PearUp/node_modules/scratch-render-fonts/src/index.js (web.browser.legacy) "!ify-loader!linebreak" in /home/juliandierker/projects/PearUp/node_modules/scratch-render/src/util/text-wrapper.js (web.browser.legacy) "!ify-loader!grapheme-breaker" in /home/juliandierker/projects/PearUp/node_modules/scratch-render/src/util/text-wrapper.js (web.browser.legacy)

[apple502j]

Which Webpack version are you using?

[juliandierker]

Thx for the feedback: I'm trying to use your package in a meteor.js application - meteor has it's own buildsystem and is currently running in version 2.1.1

the buildsystem is described here https://guide.meteor.com/build-tool.html

[apple502j]

This should build fine using npm with webpack - the !ify-loader! syntax is Webpack-specific. I am unsure if it's possible to mix them, but I've heard some tried.

[juliandierker]

this helps a lot. we will now be able to figure this out i hope :D

[juliandierker]

I'm currently making babysteps to get your package running in meteor envoirement and finally I'm trying to display your render example from https://github.com/LLK/scratch-render#readme

there a new Error appears: Uncaught TypeError: renderer.connectWorker is not a function at eval...

[juliandierker]

my react-code is:

import React, { useEffect } from "react";
import ScratchRender from "scratch-render";

export default function Scratch() {
  useEffect(() => {
    const canvas = document.getElementById("myStage");
    const debug = document.getElementById("myDebug");
    const renderer = new ScratchRender(canvas);
    console.log(ScratchRender);
    console.log(renderer);
    renderer.setDebugCanvas(debug);
    // Start drawing
    function drawStep() {
      renderer.draw();
      requestAnimationFrame(drawStep);
    }
    drawStep();
    // Connect to worker (see "playground" example)
    const worker = new Worker("worker.js");
    renderer.connectWorker(worker);
  }, []);

  return (
    <div>
      We are testing Scratch
      <canvas id="myStage"></canvas>
      <canvas id="myDebug"></canvas>
    </div>
  );
}

[apple502j]

@juliandierker That part of README is wrong. Renderer does not support workers.

[juliandierker]

thx for the feedback - is there any other working example for a client side rendering?

[juliandierker]

commenting out the "worker part" is not throwing any exceptions anymore and i see the white canvas now but no playground

[juliandierker]

If there is no other working example I would maybe consider to embed scratch over LTI-Interface in my learning-envoirment? Do you know if there are working examples where scratch is used in a propper learning envoirment?

Thx for the support.

[apple502j]

@juliandierker Renderer does not function on its own. You need to attach something that instructs a renderer, like a Scratch virtual machine. Scratch GUI is a react component and can be used in React programs. Scratch itself can be used in a proper learning environment - just not the one teachers usually want, i.e. telling a student to create the same script as a teacher and scoring based on the accuracy.

[thebongy]

Hi! Just wanted to leave an extra comment and thoughts on the original error in the title of this thread:

Cannot find module '!ify-loader!linebreak'

Although its correct that bundling your source application using webpack does resolve this issue with the correct webpack configuration (As ify-loader is a webpack specific plugin), this is not a valid solution for projects using other bundlers, such as esbuild/rollup/vite, etc. The reason other bundlers doen't work is that although the scratch-renderer package does include a pre-bundled build in ./dist/web , the browser entry in package.json points to src/index.js, which forces bundlers to look at the wrong place. This can be resolved simply by changing the browser entry in package.json to:

"browser": "./dist/web/scratch-render.js",

The invalid browser entry seems to be a recurring issue on all scratch repos; I believe its a misconfiguration which was intended to make webpack bundling at the source scratch project work correctly, although I think this should be possible to do this by setting the main entry to the one in src instead, and keeping browser as the pre-bundled source.

A similar fix has also been made on scratch-storage (scratchfoundation/scratch-storage#421)