Razzle: --example with-afterjs project does not start due to webpack error
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?
newbreedofgeek
All 7 comments
have the same error.
leon-wu
on 6 Feb 2019
Same error with "with-react-loadable". Seems like "syntax-dynamic-import" is missing, but adding it to .babelrc doesn't help:/
Gycianka
on 13 Feb 2019
Gycianka
on 20 Feb 2019
As the above comment shows, this a problem in npm that breaks webpack (starting in 4.29.0).
webpack issue: https://github.com/webpack/webpack/issues/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
on 14 Mar 2019
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?
davesteinberg
on 14 Mar 2019
Is there no updates for this yet? Coming over from the after.js repo, this is a serious issue :/
Pixelatex
on 4 Apr 2019
Is there no updates for this yet? Coming over from the after.js repo, this is a serious issue :/
@Pixelatex
https://github.com/jaredpalmer/razzle/issues/904#issuecomment-472935739
That comment worked for me
bigorangemachine
on 16 May 2019
Related issues
gabimor
ยท
3Comments
panbanda
ยท
5Comments
knipferrc
ยท
5Comments
GouthamKD
ยท
3Comments
krazyjakee
ยท
3Comments
Most helpful comment
As the above comment shows, this a problem in npm that breaks webpack (starting in 4.29.0).
webpack issue: https://github.com/webpack/webpack/issues/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:
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: