--example with-afterjs project does not start due to webpack error

[newbreedofgeek]

My Environment:
node v10.15.1
npm 6.4.1

I've -g installed create-razzle-app. I wanted to try the --example with-afterjs project, so I installed like so: create-razzle-app --example with-afterjs poca (poca is my app)

All good and then I'm asked to cd into poca and run npm start.

This throws an error:

 WAIT  Compiling...


✔ success client compiled in 10s 226ms

Compiling

● client

● server █████████████████████████ compiling (0%)  
 

✖ ｢wdm｣: Hash: deb1b5ac86099023d9ff
Version: webpack 4.29.0
Time: 10236ms
Built at: 01/30/2019 3:28:59 PM
                  Asset      Size  Chunks             Chunk Names
    static/js/bundle.js  1.89 MiB  client  [emitted]  client
static/js/bundle.js.map  2.06 MiB  client  [emitted]  client
Entrypoint client = static/js/bundle.js static/js/bundle.js.map
[0] multi ./node_modules/razzle/config/polyfills.js ./node_modules/razzle-dev-utils/webpackHotDevClient.js ./src/client 52 bytes {client} [built]
[./node_modules/@jaredpalmer/after/build/index.js] 417 bytes {client} [built]
[./node_modules/object-assign/index.js] 2.06 KiB {client} [built]
[./node_modules/process/browser.js] 5.29 KiB {client} [built]
[./node_modules/promise/lib/es6-extensions.js] 2.6 KiB {client} [built]
[./node_modules/promise/lib/rejection-tracking.js] 2.81 KiB {client} [built]
[./node_modules/razzle-dev-utils/node_modules/react-dev-utils/formatWebpackMessages.js] 4.27 KiB {client} [built]
[./node_modules/razzle-dev-utils/node_modules/react-dev-utils/launchEditorEndpoint.js] 330 bytes {client} [built]
[./node_modules/razzle-dev-utils/node_modules/react-error-overlay/lib/index.js] 318 KiB {client} [built]
[./node_modules/razzle-dev-utils/webpackHotDevClient.js] 7.56 KiB {client} [built]
[./node_modules/razzle/config/polyfills.js] 1.06 KiB {client} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {client} [built]
[./node_modules/react-router-dom/es/index.js] 1010 bytes {client} [built]
[./node_modules/react/index.js] 190 bytes {client} [built]
[./src/client.js] 707 bytes {client} [built]
    + 159 hidden modules

ERROR in ./src/routes.js 11:13
Module parse failed: Unexpected token (11:13)
✔ success server compiled in 322ms

/Users/mark.paul/poca/build/server.js:978
throw new Error("Module parse failed: Unexpected token (11:13)\nYou may need an appropriate loader to handle this file type.\n|   component: asyncComponent({\n|     loader: function loader() {\n>       return import('./Home');\n|     }, // required\n|     Placeholder: function Placeholder() {");
      ^

Module parse failed: Unexpected token (11:13)
You may need an appropriate loader to handle this file type.
|   component: asyncComponent({
|     loader: function loader() {
>       return import('./Home');
|     }, // required
|     Placeholder: function Placeholder() {

  976 | /***/ (function(module, exports) {
  977 | 
> 978 | throw new Error("Module parse failed: Unexpected token (11:13)\nYou may need an appropriate loader to handle this file type.\n|   component: asyncComponent({\n|     loader: function loader() {\n>       return import('./Home');\n|     }, // required\n|     Placeholder: function Placeholder() {");
  979 | 
  980 | /***/ }),
  981 | 

    at Object../src/routes.js (/Users/mark.paul/poca/build/server.js:978:7)
    at __webpack_require__ (/Users/mark.paul/poca/webpack/bootstrap:682:1)
    at fn (/Users/mark.paul/poca/build/webpack:/webpack/bootstrap:59:1)
    at Module../src/server.js (/Users/mark.paul/poca/build/server.js:999:65)
    at __webpack_require__ (/Users/mark.paul/poca/build/webpack:/webpack/bootstrap:682:1)
    at fn (/Users/mark.paul/poca/build/webpack:/webpack/bootstrap:59:1)
    at Module../src/index.js (/Users/mark.paul/poca/build/webpack:/src/index.js:3:1)
    at __webpack_require__ (/Users/mark.paul/poca/build/webpack:/webpack/bootstrap:682:1)
    at fn (/Users/mark.paul/poca/build/webpack:/webpack/bootstrap:59:1)
    at Object.0 (/Users/mark.paul/poca/build/server.js:1072:18)

Seems to be a webpack loader issue.

I don't get any error if I create a new razzle app without the --example with-afterjs option.

Is this a known issue?

[leon-wu]

have the same error.

[Gycianka]

Same error with "with-react-loadable". Seems like "syntax-dynamic-import" is missing, but adding it to .babelrc doesn't help:/

[Gycianka]

#webpack/webpack#8656

[davesteinberg]

As the above comment shows, this a problem in npm that breaks webpack (starting in 4.29.0).

webpack issue: webpack/webpack#8656
npm bug: https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

There was almost a fix in npm, but it broke another use case, so it was reverted. npm says a rewrite of the tree builder will be needed to fix this, with no ETA.

So, apparently, you can avoid this problem by using yarn, or here's a very simple workaround with npm:

npm install acorn
npm dedupe

The problem is that npm can't figure out how to satisfy the peer dependency of acorn-dynamic-import on acorn. The workaround installs the latest acorn (adding it to your package.json) and ensures that webpack is using it.

As someone who wanted to try out After.js for the first time, it's not at all encouraging to stumble upon a problem that breaks the project's hello world on npm, and then to learn that it's been broken for more than a month. I know that the underlying problem is with npm, but there are things that could be done until it is solved:

• Razzle could downgrade its webpack dependency (apparently 4.28 doesn't exhibit this problem).
• The with-afterjs example could be modified to add the direct acorn dependency.
• The issue could be documented in the After.js README so that every potential user doesn't have to figure this all out for themself.

[davesteinberg]

I just took a quick look to see if I could modify the example. The instructions in CONTRIBUTING.md seem out of date: there's no scripts directory and no bootstrap script in package.json.

Are any newer pointers available?

[Pixelatex]

Is there no updates for this yet? Coming over from the after.js repo, this is a serious issue :/

[bigorangemachine]

Is there no updates for this yet? Coming over from the after.js repo, this is a serious issue :/

@Pixelatex

#904 (comment)

That comment worked for me