Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot find module '!ify-loader!linebreak' #959

Open
juliandierker opened this issue Jan 13, 2022 · 13 comments
Open

Cannot find module '!ify-loader!linebreak' #959

juliandierker opened this issue Jan 13, 2022 · 13 comments
Labels

Comments

@juliandierker
Copy link

juliandierker commented Jan 13, 2022

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
Copy link
Author

juliandierker commented Jan 13, 2022

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
Copy link

Which Webpack version are you using?

@juliandierker
Copy link
Author

juliandierker commented Jan 13, 2022

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
Copy link

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
Copy link
Author

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

@juliandierker
Copy link
Author

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
Copy link
Author

juliandierker commented Jan 20, 2022

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
Copy link

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

@juliandierker
Copy link
Author

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

@juliandierker
Copy link
Author

juliandierker commented Jan 20, 2022

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

@juliandierker
Copy link
Author

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
Copy link

@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
Copy link

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants