Razzle: --example with-afterjs 项目由于 webpack 错误而无法启动

创建于 2019-01-30 · 7评论 · 资料来源: jaredpalmer/razzle

我的环境：
节点 v10.15.1
npm 6.4.1

我已经 -g 安装了 create-razzle-app。我想尝试--example with-afterjs项目，所以我这样安装： create-razzle-app --example with-afterjs poca （poca 是我的应用程序）

一切都好，然后我被要求 cd 进入 poca 并运行npm start 。

这会引发错误：

 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)

似乎是一个 webpack 加载器问题。

如果我创建一个没有--example with-afterjs选项的新 razzle 应用程序，我不会收到任何错误。

这是一个已知的问题？

stale

资料来源

newbreedofgeek

👍5

最有用的评论

正如上面的评论所示，这是 npm 中的一个问题，它破坏了 webpack（从 4.29.0 开始）。

webpack 问题： https ://github.com/webpack/webpack/issues/8656
npm 错误： https ://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

npm 中几乎有一个修复，但它破坏了另一个用例，所以它被恢复了。 npm 说需要重写树构建器来解决这个问题，没有 ETA。

所以，显然，你可以通过使用 yarn 来避免这个问题，或者这里有一个非常简单的 npm 解决方法：

npm install acorn
npm dedupe

问题是 npm 无法弄清楚如何满足 acorn-dynamic-import 对 acorn 的对等依赖。解决方法安装最新的 acorn（将其添加到您的 package.json）并确保 webpack 正在使用它。

作为第一次想试用 After.js 的人，偶然发现一个在 npm 上破坏了项目的 hello world 的问题，然后得知它已经被破坏了一个多月，这并不令人鼓舞。我知道根本问题在于 npm，但是在解决之前可以做一些事情：

Razzle 可以降级它的 webpack 依赖（显然 4.28 没有出现这个问题）。
可以修改 with-afterjs 示例以添加直接 acorn 依赖项。
该问题可以记录在 After.js README 中，这样每个潜在用户都不必自己弄清楚这一切。

davesteinberg 于 2019-03-14

👍9 🚀1

所有7条评论

有同样的错误。

leon-wu 于 2019-02-06

与“with-react-loadable”相同的错误。似乎缺少“语法动态导入”，但将其添加到 .babelrc 并没有帮助：/

Gycianka 于 2019-02-13

https://github.com/webpack/webpack/issues/8656

Gycianka 于 2019-02-20

正如上面的评论所示，这是 npm 中的一个问题，它破坏了 webpack（从 4.29.0 开始）。

webpack 问题： https ://github.com/webpack/webpack/issues/8656
npm 错误： https ://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

npm 中几乎有一个修复，但它破坏了另一个用例，所以它被恢复了。 npm 说需要重写树构建器来解决这个问题，没有 ETA。

所以，显然，你可以通过使用 yarn 来避免这个问题，或者这里有一个非常简单的 npm 解决方法：

npm install acorn
npm dedupe

Razzle 可以降级它的 webpack 依赖（显然 4.28 没有出现这个问题）。
可以修改 with-afterjs 示例以添加直接 acorn 依赖项。
该问题可以记录在 After.js README 中，这样每个潜在用户都不必自己弄清楚这一切。

davesteinberg 于 2019-03-14

👍9 🚀1

我只是快速浏览了一下是否可以修改示例。 CONTRIBUTING.md 中的说明似乎已过时：package.json 中没有脚本目录和引导脚本。

有没有更新的指针可用？

davesteinberg 于 2019-03-14

还没有这方面的更新吗？从 after.js 回购过来，这是一个严重的问题：/

Pixelatex 于 2019-04-04

还没有这方面的更新吗？从 after.js 回购过来，这是一个严重的问题：/

@Pixelatex

https://github.com/jaredpalmer/razzle/issues/904#issuecomment -472935739

那条评论对我有用

bigorangemachine 于 2019-05-16

此页面是否有帮助？

0 / 5 - 0 等级

Razzle: --example with-afterjs 项目由于 webpack 错误而无法启动

最有用的评论

所有7条评论

https://github.com/webpack/webpack/issues/8656

相关问题