Javascriptservices: NodeInvocationException: Prerendering failed because of error: Error: Cannot find module at webpackMissingModule

Created on 1 Sep 2017  路  7Comments  路  Source: aspnet/JavaScriptServices

i faced to this error, each refer or link i have this error spring up
i put some images in 'wwwroot/img' and i set address './img/12.jpg'

NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "./img/12.jpg" at webpackMissingModule (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:19005:87942) at Object.<anonymous> (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:19005:88046) at __webpack_require__ (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:20:30) at Object.<anonymous> (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:19057:22) at __webpack_require__ (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:20:30) at D:\projects\Core\Bwin\ClientApp\dist\main-server.js:10401:47 at Object.<anonymous> (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:10405:2) at __webpack_require__ (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:20:30) at Object.<anonymous> (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:16131:88) at __webpack_require__ (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:20:30) Current directory is: D:\projects\Core\Bwin Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+<InvokeExportAsync>d__7.MoveNext()

NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "./fonts/flexslider-icon.eot" at webpackMissingModule (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:19005:87942) at Object.<anonymous> (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:19005:88046) at __webpack_require__ (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:20:30) at Object.<anonymous> (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:19057:22) at __webpack_require__ (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:20:30) at D:\projects\Core\Bwin\ClientApp\dist\main-server.js:10401:47 at Object.<anonymous> (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:10405:2) at __webpack_require__ (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:20:30) at Object.<anonymous> (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:16131:88) at __webpack_require__ (D:\projects\Core\Bwin\ClientApp\dist\main-server.js:20:30) Current directory is: D:\projects\Core\Bwin

Most helpful comment

I think @mpalmer-sps is correct. Your image URLs are not correct. Unless they start with /, the html-loader will try to bundle them. So typically there are two ways to reference images:

  • With relative paths, e.g., src='./my-image.png', where the path is relative to the file that includes it. In this example, my-image.png should be in the same directory as the .html file, not in wwwroot or similar.
  • With absolute paths, e.g., src='/my-image.png'. In this case html-loader won't load or translate the markup, so at runtime the browser will end up trying to fetch the image file from the URL /my-image.png which means it should be placed in your wwwroot directory.

even vs 2017 helped me to set url

VS doesn't know about your Webpack config so don't rely on that.

All 7 comments

hello @yeganehaym ,
I think your pathing might be wrong. I also got that error at one point in time with the project I have started here: https://github.com/mpalmer-sps/PluralSightNg2Fundamentals
In my project where I use images (the events.service.ts file) I use the following for image paths that are placed in the wwwroot/images/events:
imageUrl: '/images/events/angularconnect-shield.png',

Try that in your path and it may work...

-- Martin

@yeganehaym If you have any repro steps I'd be happy to take a look. Otherwise hopefully @mpalmer-sps's suggestion might help!

i used my picture in html file not ts file
even vs 2017 helped me to set url
microsoft has a tutorial video to launch angular project and i compared to it and are the same
but im still stranded here

i transfered it from gitlab to github
https://github.com/yeganehaym/P2B

i added some css files too and they have this error too
i mean the picture and font are defined in css
if i put url in address bar and press enter, browser show me the picture

I think @mpalmer-sps is correct. Your image URLs are not correct. Unless they start with /, the html-loader will try to bundle them. So typically there are two ways to reference images:

  • With relative paths, e.g., src='./my-image.png', where the path is relative to the file that includes it. In this example, my-image.png should be in the same directory as the .html file, not in wwwroot or similar.
  • With absolute paths, e.g., src='/my-image.png'. In this case html-loader won't load or translate the markup, so at runtime the browser will end up trying to fetch the image file from the URL /my-image.png which means it should be placed in your wwwroot directory.

even vs 2017 helped me to set url

VS doesn't know about your Webpack config so don't rely on that.

yeah you'r right,
when i put images in same directory , they are working

@SteveSandersonMS your 2nd point also worked for me. just need to put / before the url. Thanks a lot!

Was this page helpful?
0 / 5 - 0 ratings