react-router-tutorial icon indicating copy to clipboard operation
react-router-tutorial copied to clipboard

Step 11 tutorial missing step

Open yarnball opened this issue 8 years ago • 7 comments

Great tutorial! Thank you :)

Step 11 seems to be missing something. I keep getting the error:

Uncaught SyntaxError: Unexpected token < (bundle.js:1)

I'm pretty sure the cause is that it's missing:

publicPath: '/'

from webpack.config.js

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: '/'
  },

yarnball avatar Aug 17 '16 02:08 yarnball

Yep, that looks to be a small oversight. Can you submit a PR to fix it?

timdorr avatar Aug 23 '16 18:08 timdorr

Small fix, now that publicPath: '/' is declared, the snippet of code

output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: '/'
  }

contains also path: 'public' which should be declared later on in the tutorial. Otherwise, it will keep returning the Unexpected token < (bundle.js:1) error.

spik3s avatar Sep 26 '16 14:09 spik3s

Thanks a ton for the heads-up guys.

smilingkylan avatar Oct 27 '16 04:10 smilingkylan

the path: 'public' issue that spik3s pointed out is still an issue. Tripped me up at least

eurobob avatar Dec 07 '16 03:12 eurobob

Correct, the issue persists if webpack.config.js is not amended in a similar way at this first step of booting a prod server: output: { /*path: "public",*/ filename: "bundle.js", publicPath: "/" },

@spik3s: thanks.

dloret avatar Dec 08 '16 05:12 dloret

To add a bit more information:

  1. The error is from Express not finding ./public/bundle.js because it is looking for ./bundle.js. It keeps looping back until it just tries to deal with index.html. See http://stackoverflow.com/questions/38743275/express-js-unexpected-token.

  2. Moving bundle.js from ./public to . will make the error disappear.

  3. One way to move bundle.js is not to put in the "path: 'public'" line until after this step. This also keeps the public directory from being created, which makes the next step of the tutorial break.

The only remaining issue is updating the path in webpack .config.js is now listed twice, so those following the tutorial will still get stuck. Adding a PR.

merriam avatar Mar 21 '17 11:03 merriam

If we apply PR #310, we can close #229, #242, #280, #282, #289, and #291. Everyone runs across this bug.

merriam avatar Mar 21 '17 12:03 merriam