Issue with MFE in tutor dev

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

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

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.

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?

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.

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?