Issue with MFE in tutor dev

Development
1

Hi all

I am following these instructions to work on MFE in tutor dev environment, but got these errors.

All problems seem to be related to graphic files.

Any idea why can it be?

Failed to compile.

Error: /openedx/app/node_modules/gifsicle/vendor/gifsicle --no-warnings --no-app-extensions
src/courseware/course/celebration/assets/claps_280x201.gif
/openedx/app/node_modules/gifsicle/vendor/gifsicle: 1: Syntax error: "(" unexpected

Compiled with problems:X

ERROR in ./src/courseware/course/celebration/assets/claps_280x201.gif

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: Command failed: /openedx/app/node_modules/gifsicle/vendor/gifsicle --no-warnings --no-app-extensions
/openedx/app/node_modules/gifsicle/vendor/gifsicle: 1: Syntax error: "(" unexpected


    at makeError (/openedx/app/node_modules/execa/index.js:174:9)
    at /openedx/app/node_modules/execa/index.js:278:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/imagemin-gifsicle/index.js:29:19
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/courseware/course/celebration/assets/claps_456x328.gif

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: Command failed: /openedx/app/node_modules/gifsicle/vendor/gifsicle --no-warnings --no-app-extensions
/openedx/app/node_modules/gifsicle/vendor/gifsicle: 1: Syntax error: "(" unexpected


    at makeError (/openedx/app/node_modules/execa/index.js:174:9)
    at /openedx/app/node_modules/execa/index.js:278:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/imagemin-gifsicle/index.js:29:19
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/courseware/course/course-exit/assets/celebration_456x328.gif

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: write EPIPE
    at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16)


ERROR in ./src/courseware/course/course-exit/assets/celebration_750x540.gif

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: write EPIPE
    at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16)


ERROR in ./src/generic/assets/edX_certificate.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/generic/assets/edX_locked_certificate.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/product-tours/newUserCourseHomeTour/course_home_tour_modal_hero.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/shared/streak-celebration/assets/Streak_desktop.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/shared/streak-celebration/assets/Streak_mobile.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/courseware/course/celebration/assets/claps_280x201.gif

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: Command failed: /openedx/app/node_modules/gifsicle/vendor/gifsicle --no-warnings --no-app-extensions
/openedx/app/node_modules/gifsicle/vendor/gifsicle: 1: Syntax error: "(" unexpected


    at makeError (/openedx/app/node_modules/execa/index.js:174:9)
    at /openedx/app/node_modules/execa/index.js:278:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/imagemin-gifsicle/index.js:29:19
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/courseware/course/celebration/assets/claps_456x328.gif

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: Command failed: /openedx/app/node_modules/gifsicle/vendor/gifsicle --no-warnings --no-app-extensions
/openedx/app/node_modules/gifsicle/vendor/gifsicle: 1: Syntax error: "(" unexpected


    at makeError (/openedx/app/node_modules/execa/index.js:174:9)
    at /openedx/app/node_modules/execa/index.js:278:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/imagemin-gifsicle/index.js:29:19
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/courseware/course/course-exit/assets/celebration_456x328.gif

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: write EPIPE
    at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16)


ERROR in ./src/courseware/course/course-exit/assets/celebration_750x540.gif

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: Command failed: /openedx/app/node_modules/gifsicle/vendor/gifsicle --no-warnings --no-app-extensions
/openedx/app/node_modules/gifsicle/vendor/gifsicle: 1: Syntax error: "(" unexpected


    at makeError (/openedx/app/node_modules/execa/index.js:174:9)
    at /openedx/app/node_modules/execa/index.js:278:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/imagemin-gifsicle/index.js:29:19
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/generic/assets/edX_certificate.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/generic/assets/edX_locked_certificate.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/product-tours/newUserCourseHomeTour/course_home_tour_modal_hero.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/shared/streak-celebration/assets/Streak_desktop.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19


ERROR in ./src/shared/streak-celebration/assets/Streak_mobile.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: /openedx/app/node_modules/pngquant-bin/vendor/pngquant: 1: Syntax error: word unexpected (expecting ")")
    at makeError (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/openedx/app/node_modules/imagemin-pngquant/node_modules/execa/index.js:114:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /openedx/app/node_modules/p-pipe/index.js:12:19
2

Which MFE are you having trouble with? I’d like to see if I can reproduce the issue.

3

Hi Brian!

I’m trying with the Learning mfe. Didn’t try with another.

I’m using a Mac Intel. The problem comes when I try to mount the local clone of the mfe with tutor dev start -d —mount=<path/to/mfe>. Regular tutor dev using the mfe docker image works fine.

4

So I just tried to reproduce this locally and didn’t encounter any issues when running the latest code on the master branch of https://github.com/openedx/frontend-app-learning.

I’m trying to think through anything that may be different in our dev enviornments (other than macOS vs Linux)

What version of node did you use locally when you ran npm install?

5

Hi Brian,

These are my versions:
% tutor --version
tutor, version 14.0.5
% node --version
v14.20.1
% npm --version
8.19.2

I remember some issue with gifsicle and M1 macs running tutor. But mine is an Intel one. Don’t know if it might be related.

6

ah, i was using node 16

$ node --version
v16.17.0
$ npm --version
8.15.0

do you use nvm? could you see if the problem persists on node 16?

7

@Andres.Aulasneo did you end up finding a fix for this / remember what it was?

I’m running into the same issues right now with:

Tutor==14.2.4
tutor-mfe==14.0.2
Node v16.20.2
npm v8.19.4

and trying to install frontend-app-learning open-release/nutmeg.master with a local mount

Getting the exact same stack trace you were getting on container startup

8

Hi Andrew,

I don’t remember exactly what fixed the problem. Normally we have to run npm install and then npm run build in the mfe before mounting. Let me know if it helps.

9

In the local directory before spinning up the container, yeah?

Gave that a second shot and made sure to delete my node_modules and package lock files and still didn’t help unfortunately, getting the same stack trace errors.