gpbl/isomorphic500

Can't require images with webpack on the backend

opportunato opened this issue · 4 comments

opportunato commented

I've been using your template (which is great, btw) for my own project, and have run into some issues with the images. So, I am trying to include image from the meta, and I want it to be served by webpack. To make this happen, I am doing something like this in HtmlHeadStore:

  setInitialState() {
    this.title = this.formatMessage("meta.title");
    this.description = this.formatMessage("meta.description");
    this.images = [];

    this.images.push(`${BASE_URL}${require('../assets/images/fb.jpg')}`);
  }

Unfortunately, I am getting this error:

{ [SyntaxError: /Users/opportunato/projects/grabr-web-client/src/assets/images/fb.jpg: Unexpected character '�' (1:0)]
  pos: 0,
  loc: { line: 1, column: 0 },
  raisedAt: 0,
  _babel: true,
  codeFrame: '> 1 | ����\u001b[7m\u0000\u001b[27m\u001b[7m\u0018\u001b[27mExif\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27mII\u001b[1m*\u001b[22m\u001b[7m\u0000\u001b[27m\u001b[7m\b\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m��\u001b[7m\u0000\u001b[27m\u001b[7m\u0011\u001b[27mDucky\u001b[7m\u0000\u001b[27m\u001b[7m\u0001\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0004\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27mP\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m��\u001b[7m\u0003\u001b[27m\u001b[1m-\u001b[22mhttp\u001b[1m:\u001b[22m\u001b[90m//ns.adobe.com/xap/1.0/\u0000<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmp:CreatorTool="Adobe Photoshop CS6 (Macintosh)" xmpMM:InstanceID="xmp.iid:2EB4C76E07D811E588849AAD864FAADD" xmpMM:DocumentID="xmp.did:2EB4C76F07D811E588849AAD864FAADD"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:2EB4C76C07D811E588849AAD864FAADD" stRef:documentID="xmp.did:2EB4C76D07D811E588849AAD864FAADD"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>��\u0000&Adobe\u0000d�\u0000\u0000\u0000\u0001\u0003\u0000\u0015\u0004\u0003\u0006\u001b[39m\n    | ^\n  2 | \n  3 | \u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27mZe\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m��\u001b[7m\u0000\u001b[27m\u001b[7m\u0000\u001b[27m��\u001b[7m\u0000\u001b[27m\u001b[7m\u0001\u001b[27m�\u001b[1m/\u001b[22m��\u001b[7m\u0000\u001b[27m�\u001b[7m\u0000\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0003\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0003\u001b[27m\u001b[7m\u0004\u001b[27m\u001b[7m\u0003\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0002\u001b[27m\u001b[7m\u0003\u001b[27m\u001b[7m\u0004\u001b[27m\u001b[7m\u0005\u001b[27m\u001b[7m\u0004\u001b[27m\u001b[7m\u0004\u001b[27m\u001b[7m\u0004\u001b[27m\u001b[7m\u0004\u001b[27m\u001b[7m\u0004\u001b[27m\u001b[7m\u0005\u001b[27m\u001b[7m\u0006\u001b[27m\u001b[7m\u0005\u001b[27m\u001b[7m\u0005\u001b[27m\u001b[7m\u0005\u001b[27m\u001b[7m\u0005\u001b[27m\u001b[7m\u0005\u001b[27m\u001b[7m\u0005\u001b[27m\u001b[7m\u0006\u001b[27m\u001b[7m\u0006\u001b[27m\u001b[7m\u0007\u001b[27m\u001b[7m\u0007\u001b[27m\u001b[7m\b\u001b[27m\u001b[7m\u0007\u001b[27m\u001b[7m\u0007\u001b[27m\u001b[7m\u0006\u001b[27m\t\t\n  4 | ' }
SyntaxError: /Users/opportunato/projects/grabr-web-client/src/assets/images/fb.jpg: Unexpected character '�' (1:0)
> 1 | ����ExifII��DuckyP��-http://ns.adobe.com/xap/1.0/<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmp:CreatorTool="Adobe Photoshop CS6 (Macintosh)" xmpMM:InstanceID="xmp.iid:2EB4C76E07D811E588849AAD864FAADD" xmpMM:DocumentID="xmp.did:2EB4C76F07D811E588849AAD864FAADD"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:2EB4C76C07D811E588849AAD864FAADD" stRef:documentID="xmp.did:2EB4C76D07D811E588849AAD864FAADD"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>��&Adobed�
    | ^
  2 | 
  3 | Ze�����/���           
  4 | 
    at Parser.pp.raise (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/acorn/src/location.js:73:13)
    at Parser.pp.getTokenFromCode (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/acorn/src/tokenize.js:423:8)
    at Parser.pp.readToken (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/acorn/src/tokenize.js:106:15)
    at Parser.<anonymous> (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/node_modules/acorn-jsx/inject.js:650:22)
    at Parser.readToken (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/acorn/plugins/flow.js:694:22)
    at Parser.pp.nextToken (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/acorn/src/tokenize.js:98:71)
    at Object.parse (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/acorn/src/index.js:105:5)
    at exports.default (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/babel/helpers/parse.js:47:19)
    at File.parse (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/babel/transformation/file/index.js:533:46)
    at File.addCode (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/babel/transformation/file/index.js:615:24)

Here is my dev webpack loaders config:

module: {
    loaders: [
      { test: /\.(jpe?g|png|gif|svg)$/, loader: "file" },
      { test: /\.(woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.js$/, exclude: /node_modules/, loaders: ["react-hot", "babel?cacheDirectory"] },
      { test: /\.scss$/, loader: "style!css!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true" }
    ]
  },

I've found similar issue here, but I don't understand why babel could be the issue, since it should ignore files without .js extensions.

What could be my problem?

gpbl commented

@opportunato babel is not the problem here – you are trying to require an image directly from node, which doesn't work because you must require a js modules (indeed node is trying to read the JPG as javascript).

In this case, just use the relative url:

this.images.push('/assets/images/fb.jpg');

To make express to serve the content in assets, you need to configure it in server.js:

import path from "path"
// snip...
const assetsDir = path.resolve(__dirname, "assets");
server.use("/assets", express.static(assetsDir, { maxAge: 365 * 24 * 60 * 60 } ));

Note that i've set a max-age header, so browser will cache the image. If you need to skip the cache because you update the image, you could just do

this.images.push('/assets/images/fb.jpg?v=1.1');
  • 👍1
opportunato commented

After including this code in server.js, I've started getting this error:

/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/router/index.js:446
      throw new TypeError('Router.use() requires middleware function but got a
            ^
TypeError: Router.use() requires middleware function but got a Object
    at Function.<anonymous> (/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/router/index.js:446:13)
    at Array.forEach (native)
    at Function.use (/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/router/index.js:444:13)
    at EventEmitter.<anonymous> (/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/application.js:216:21)
    at Array.forEach (native)
    at EventEmitter.use (/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/application.js:213:7)
    at Object.<anonymous> (/Users/opportunato/projects/grabr-web-client/src/server.js:28:8)
    at Module._compile (module.js:460:26)
    at normalLoader (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/babel/api/register/node.js:150:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/babel/api/register/node.js:163:7)

Also, shouldn't every asset you require go through the webpack pipeline? Isn't it the main idea behind every build system?

gpbl commented

Yeah sorry there was a misplaced parenthesis in the middleware, I've updated my comment :) anyway check the express documentation for serving static files.

As for the build thing, there's no need to build the server-side code: webpack here is used only to build the files that run on the client. In your case, your require won't be parsed by webpack.

opportunato commented

Thank you very much, everything is clear now!