1

when I'm trying to reference an image in my react component in the render method as follows.

const leaderImgSrc = require('myimage.jpg');

and then in the TSX

<img src={leaderImgSrc} alt='an image' />

The following error message is returned in the browser

Error: Unable to load web part script resources due to: Error: Cannot find module "myimage.jpg". at https://localhost:4321/node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js:18185:32

I have included

require('set-webpack-public-path!');

in my component.

I've also tried adding the require statement directly into the src attribute, but that still has the same error.

I'm using Drop 5

2
  • why do you need require statement for image name ? when you use require("myimage.jpg") it will search for module with same name... I don't think you need require statement just added image name as if it is your local variable. Commented Nov 22, 2016 at 11:09
  • Because it's bundled and deployed to a dist directory. See example from spfx on github github.com/SharePoint/sp-dev-fx-webparts/blob/master/tutorials/…
    – statto
    Commented Nov 22, 2016 at 11:51

2 Answers 2

2

I managed to fix this. The PublicPathLoader module hadn't updated properly when I did a npm update. This is the webpack module that tells requirejs to return the image and the public path and not treat it as a normal module.

With reference to some of the answers / comments above.

'requirejs' can be used in TSX or TS files as detailed here https://www.typescriptlang.org/docs/handbook/modules.html

In this instance you need to use require, because if you used the TypeScript import statement it would try to pass it as a module. By using require it will bypass TypeScript compliation and then webpack can do it's stuff.

You do need to use 'require' on images otherwise you'll have to hard code the public path into your code.

0

OP refers to: https://github.com/SharePoint/sp-dev-fx-webparts/blob/master/tutorials/src/webparts/documentCardExample/components/DocumentCardExample.tsx

Those requires in the example are JSX requires, not TypeScript requires

So your:

const leaderImgSrc = require('myimage.jpg');

and then in the TSX

<img src={leaderImgSrc} alt='an image' />

.

needs to become something like this:

const leaderImgSrc = 'myimage.jpg';

and then in the TSX

<img src={require(leaderImgSrc)} alt='an image' />
3
  • Sorry I'm being thick. What does OP mean? The example referenced is a TSX file is using the require on a property of class. How is this different from assigning to a const variable? I thought webpack dealt with this using the PublicPathLoader
    – statto
    Commented Nov 22, 2016 at 17:30
  • OP is StackOverflow lingo for Original Poster. TypeScript is not {TSX} I don't know WepPack well enough to answer your question. My answer notes the (obvious) syntax difference between your code and the example code. Commented Nov 23, 2016 at 8:25
  • TSX is the TypeScript variant of JSX for reactjs, so I'd say it is TypeScript - typescriptlang.org/docs/handbook/jsx.html The main difference between mine and the example is the referenced example was assigning require to a property of a class and my example was assigning to a variable, but the outcome should be the same. Just to point out, the original error turned out not to be a problem with the code, but a problem with the implementation of webpack
    – statto
    Commented Nov 23, 2016 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.