educative.io

Educative

Error: cannot find module 'images/successkid.jpg'

Need help :smiley: β€œDeploy the web service” step fails (see console output below). A bit of time on the inter-tubes didn’t reveal anything useful. I have no experience with Sapper or Svelte or Rollup. So, I’m stuck here. I have a workaround, which is to comment out the use of the image, but I’d like to understand the real fix.

I’m on MacOS Monterey; and i’m following the course locally and not using the built in terminals available in the web pages. I don’t believe this to be an issue though. Everything builds without error locally and deploying it to firebase hosting works: I can see the full website.

Thanks,

Building…

[20]( … 5:20)
[21]( … 5:21)β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
[22]( … 5:22)β”‚ built client with 1 warning β”‚
[23]( … 5:23)β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
[24]( … 5:24)> β€˜images/successkid.jpg’ is imported by src/routes/index.svelte, but could not be resolved – treating it as an external dependency
[25]( … 5:25)
[26]( … 5:26) 21.7 kB client.51d25d1a.js
[27]( … 5:27) β”‚ node_modules/svelte/internal/index.mjs (34.4%)
[28]( … 5:28) β”‚ src/node_modules/@sapper/app.mjs (30.0%)
[29]( … 5:29) β”‚ src/node_modules/@sapper/internal/App.svelte (12.6%)
[30]( … 5:30) β”‚ src/components/Nav.svelte (6.9%)
[31]( … 5:31) β”‚ src/routes/_error.svelte (6.2%)
[32]( … 5:32) β”‚ src/routes/_layout.svelte (4.2%)
[33]( … 5:33) β”‚ src/node_modules/@sapper/internal/manifest-client.mjs (3.1%)
[34]( … 5:34) β”‚ node_modules/svelte/store/index.mjs (2.5%)
[35]( … 5:35) β”‚ src/client.js (0.1%)
[36]( … 5:36) β”” src/node_modules/@sapper/internal/shared.mjs (0.0%)
[37]( … 5:37) 563 B inject_styles.5607aec6.js
[38]( … 5:38) β”” inject_styles.js
[39]( … 5:39) 1.48 kB index.102fbf96.js
[40]( … 5:40) β”” src/routes/index.svelte
[41]( … 5:41) 773 B about.eabb94bb.js
[42]( … 5:42) β”” src/routes/about.svelte
[43]( … 5:43) 1.7 kB index.bac5b1d4.js
[44]( … 5:44) β”” src/routes/blog/index.svelte
[45]( … 5:45) 1.11 kB [slug].ebf81a41.js
[46]( … 5:46) β”” src/routes/blog/[slug].svelte
[47]( … 5:47)
[48]( … 5:48)β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
[49]( … 5:49)β”‚ built client (legacy) with 1 warning β”‚
[50]( … 5:50)β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
[51]( … 5:51)> β€˜images/successkid.jpg’ is imported by src/routes/index.svelte, but could not be resolved – treating it as an external dependency
[52]( … 5:52)
[53]( … 5:53) 37.5 kB client.a47f9329.js
[54]( … 5:54) β”‚ node_modules/regenerator-runtime/runtime.js (24.3%)
[55]( … 5:55) β”‚ src/node_modules/@sapper/app.mjs (22.6%)
[56]( … 5:56) β”‚ node_modules/svelte/internal/index.mjs (18.6%)
[57]( … 5:57) β”‚ src/node_modules/@sapper/internal/App.svelte (9.3%)
[58]( … 5:58) β”‚ src/components/Nav.svelte (5.5%)
[59]( … 5:59) β”‚ src/routes/_error.svelte (5.1%)
[60]( … 5:60) β”‚ src/routes/_layout.svelte (3.8%)
[61]( … 5:61) β”‚ node_modules/svelte/store/index.mjs (3.2%)
[62]( … 5:62) β”‚ src/node_modules/@sapper/internal/manifest-client.mjs (1.9%)
[63]( … 5:63) β”‚ node_modules/@babel/runtime/helpers/typeof.js (0.7%)
[64]( … 5:64) β”‚ node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js (0.6%)
[65]( … 5:65) β”‚ node_modules/@babel/runtime/helpers/esm/createClass.js (0.5%)
[66]( … 5:66) β”‚ node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js (0.4%)
[67]( … 5:67) β”‚ node_modules/@babel/runtime/helpers/esm/inherits.js (0.4%)
[68]( … 5:68) β”‚ commonjsHelpers.js (0.4%)
[69]( … 5:69) β”‚ node_modules/@babel/runtime/helpers/esm/typeof.js (0.4%)
[70]( … 5:70) β”‚ node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js (0.3%)
[71]( … 5:71) β”‚ node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js (0.2%)
[72]( … 5:72) β”‚ node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js (0.2%)
[73]( … 5:73) β”‚ node_modules/@babel/runtime/helpers/esm/nonIterableRest.js (0.2%)
[74]( … 5:74) β”‚ node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js (0.2%)
[75]( … 5:75) β”‚ node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js (0.2%)
[76]( … 5:76) β”‚ node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js (0.2%)
[77]( … 5:77) β”‚ node_modules/@babel/runtime/helpers/esm/slicedToArray.js (0.2%)
[78]( … 5:78) β”‚ node_modules/@babel/runtime/helpers/esm/classCallCheck.js (0.2%)
[79]( … 5:79) β”‚ node_modules/@babel/runtime/helpers/esm/iterableToArray.js (0.2%)
[80]( … 5:80) β”‚ node_modules/@babel/runtime/helpers/esm/toConsumableArray.js (0.1%)
[81]( … 5:81) β”‚ node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js (0.1%)
[82]( … 5:82) β”‚ node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js (0.1%)
[83]( … 5:83) β”‚ src/client.js (0.1%)
[84]( … 5:84) β”‚ node_modules/@babel/runtime/regenerator/index.js (0.0%)
[85]( … 5:85) β”” src/node_modules/@sapper/internal/shared.mjs (0.0%)
[86]( … 5:86) 563 B inject_styles.fe622066.js
[87]( … 5:87) β”” inject_styles.js
[88]( … 5:88) 2.04 kB index.83c0432e.js
[89]( … 5:89) β”” src/routes/index.svelte
[90]( … 5:90) 1.34 kB about.f5cdcf19.js
[91]( … 5:91) β”” src/routes/about.svelte
[92]( … 5:92) 2.37 kB index.57e38d8e.js
[93]( … 5:93) β”” src/routes/blog/index.svelte
[94]( … 5:94) 2.34 kB [slug].a4c3e6ac.js
[95]( … 5:95) β”‚ src/routes/blog/[slug].svelte (85.6%)
[96]( … 5:96) β”” node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js (14.4%)
[97]( … 5:97)
[98]( … 5:98)β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
[99]( … 5:99)β”‚ built server with 1 warning β”‚
[100]( … 5:100)β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
[101]( … 5:101)> β€˜images/successkid.jpg’ is imported by src/routes/index.svelte, but could not be resolved – treating it as an external dependency
[102]( … 5:102)
[104]( … 5:104)
[105]( … 5:105)
[106]( … 5:106)
[107]( … 5:107)β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
[108]( … 5:108)β”‚ built serviceworker β”‚
[109]( … 5:109)β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
[110]( … 5:110)
[111]( … 5:111)> Built in 5.9s
[112]( … 5:112)internal/modules/cjs/loader.js:905
[113]( … 5:113) throw err;
[114]( … 5:114) ^
[115]( … 5:115)
[116]( … 5:116)Error: Cannot find module β€˜images/successkid.jpg’
[117]( … 5:117)Require stack:
[118]( … 5:118)- /home/runner/work/my_cloud_native_3/my_cloud_native_3/services/web/sapper/build/server/server.js
[119]( … 5:119) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
[120]( … 5:120) at Function.Module._load (internal/modules/cjs/loader.js:746:27)
[121]( … 5:121) at Module.require (internal/modules/cjs/loader.js:974:19)
[122]( … 5:122) at require (internal/modules/cjs/helpers.js:93:18)
[123]( … 5:123) at Object. (/home/runner/work/my_cloud_native_3/my_cloud_native_3/services/web/sapper/build/server/server.js:8:18)
[124]( … 5:124) at Module._compile (internal/modules/cjs/loader.js:1085:14)
[125]( … 5:125) at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)
[126]( … 5:126) at Module.load (internal/modules/cjs/loader.js:950:32)
[127]( … 5:127) at Function.Module._load (internal/modules/cjs/loader.js:790:12)
[128]( … 5:128) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
[129]( … 5:129) code: β€˜MODULE_NOT_FOUND’,
[130]( … 5:130) requireStack: [
[131]( … 5:131) β€˜/home/runner/work/my_cloud_native_3/my_cloud_native_3/services/web/sapper/build/server/server.js’
[132]( … 5:132) ]
[131]( … 5:131)}


Type your question above this line.

Course: https://www.educative.io/collection/10370001/5873351151583232
Lesson: https://www.educative.io/collection/page/10370001/5873351151583232/4860941104054272

The root cause was a missing successkid.jpg in github. So the fix was to add services/web/src/node_modules/images/successkid.jpg to the repository. Reflecting on this, I’m not sure how it managed not to be in the added files initially ?? I’ll also add that in my brain node_modules is a directory that is always not checked into git; this might be partly why I couldn’t see something pretty obvious at the end of the day. In any case, I’m glad it was something this simple.

I have the same issue.

I have the same issue. Is the only fix supposed to be to include node_modules in the git repository? I’m sure there’s a better solution. It would be great if the author could have a look at this :slight_smile:

I changed my .gitignore file to look like this:

/node_modules/
!services/web/src/node_modules/images/*
1 Like