Ask Nodejs: ReactJS Server-Side Babel-Core PNG error

Monday 8 May 2017

ReactJS Server-Side Babel-Core PNG error

The situation:

I've built a web app with ReactJS full client-side. It is working great.

My desire:

Change my app to render from server-side.

The problem:

I'm facing problems to precompile with babel due some .png file.

package.json

{
  "name": "web.facundolarocca.com",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "nodemon": "^1.11.0",
    "react-scripts": "0.8.4"
  },
  "dependencies": {
    "body-parser": "^1.16.0",
    "config": "^1.24.0",
    "express": "^4.14.0",
    "no-if-validator": "^1.0.0-4",
    "nodemailer": "^2.7.0",
    "nodemailer-smtp-transport": "^2.7.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.4",
    "react-responsive": "^1.2.6",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-scroll": "^1.5.2",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "start:dev": "babel-node server/server.js",
    "start:dev:nodemon": "nodemon server/server.js --exec babel-node",
    "build:prod": "babel server/server.js -d build-server",
    "server:start": "node build-server/server.js"
  },
  "standard": {
    "global": [
      "it"
    ]
  }
}

Server route

import React from 'react'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { renderToString } from 'react-dom/server'
import { BrowserRouter } from 'react-router-dom'
import reducer from '../src/reducers/index'
import App from '../src/containers/App'

// server.use('/', express.static(path.join(__dirname, '../build')))
server.use('/', (req, res) => {
  const store = createStore(
    reducer,
    applyMiddleware(
      thunkMiddleware
    )
  )

  // Render the component to a string
  const html = renderToString(
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  )

  // Grab the initial state from our Redux store
  const preloadedState = store.getState()
  // Send the rendered page back to the client
  res.send(renderFullPage(html, preloadedState))
})

let renderFullPage = (html, preloadedState) => {
  return `
    <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          // WARNING: See the following for security issues around embedding JSON in HTML:
          // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
        </script>
        <script src="/static/bundle.js"></script>
      </body>
    </html>
    `
}

Console error:

SyntaxError: C:/.../src/images/background.png: Unexpected character '�' (1:0) [0m[31m[1m>[22m[39m[90m 1 | [39m�PNG [90m | [39m[31m[1m^[22m[39m [90m 2 | [39m[37m[41m[1m[22m[49m[39m [90m 3 | [39m[37m[41m[1m

npm ERR! Windows_NT 10.0.14393 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "start:dev" npm ERR! node v7.0.0 npm ERR! npm v3.10.8 npm ERR! code ELIFECYCLE npm ERR! web.facundolarocca.com@0.1.0 start:dev: babel-node server/server.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the web.facundolarocca.com@0.1.0 start:dev script 'babel-node server/server.js'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the web.facundolarocca.com package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! babel-node server/server.js npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs web.facundolarocca.com npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls web.facundolarocca.com npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! C:\Projects\web.facundolarocca.com\npm-debug.log

I guess I should tell to babel to avoid compiling those kinds of files, but I cant find how neither other solution. I ended up following the simples tutorial I've found: Server Rendering - Redux

I removed the whole server-code because I thought I was cleaner, but If think I should include it, feel free to ask me.

Thanks.

via Facundo La Rocca

Ask Nodejs