SyntaxError: Invalid or unexpected token on rendering server side on React

Tunji545 · August 13, 2020, 2:00pm

SyntaxError: Invalid or unexpected token on rendering server side on React.

gist.github.com

https://gist.github.com/Tunji545/f127302f553b51473f5a4190e30342b9

App.js

import React from "react";
import bible from "../public/bible.jpg"
import cross from "../public/cross.jpg"
import ing from "../public/ing.jpg"
import olatunji from "../public/olatunji.jpg"

const App = () => {
  return (
    <div className="contacts">
      <div className="contact-card">

This file has been truncated. show original

gist.github.com

https://gist.github.com/Tunji545/64b66ea08faed8617056c070a902a78d

webpack.config.js

const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    main: "./src/index.js",
    vendor: "./src/vendor.js"
  },
  output: {
    filename: "[name].[contentHash].bundle.js",

This file has been truncated. show original

JeremyLT · August 13, 2020, 2:01pm

Hi. Can you please explain more about the issue you are experiencing and what question you are asking?

Tunji545 · August 13, 2020, 2:06pm

Image not displaying, though is in build files. React
I’m having an issue getting an image to appear within my React project. I’ve done it before and actually copied the same exact code to put it into my project, but for some reason nothing is showing up. I looked in the console and inspected the image and it’s showing that there is something there, but just not rendering somehow. Nothing I search for online has a similar issue so I’m wondering if I’m just missing something, and that’s what causing it not to render.

timchen · August 13, 2020, 6:40pm

Given you’re using ES6 imports in your React and you’re probably using commonjs imports server-side, it’s probably trying to run ES6 on your server and failing there. Webpack won’t help here since it bundles code for your client and you’re hitting the error on your server. Hopefully this helps you in your search / gives you a path forward.

Tunji545 · August 13, 2020, 9:21pm

Wow, thanks a lot for pointing these out. My configuration is exactly as you have highlighted. But is there any fix you can suggest please?

timchen · August 13, 2020, 9:58pm

You basically want to allow ES6 on your server - here’s a random article I found on Google (disclaimer: have not tried it myself) but if it doesn’t work if you just look for “express es6” there should be plenty of resources and hopefully one will work:

Tunji545 · August 13, 2020, 10:01pm

You have just saved me hours of frustrated debugging. Thanks.