vue-server-rendererをwebpackするとエラー

Question

vue-server-rendererをwebpackするとエラー

受付中

回答 0

投稿 2017/01/04 21:05

評価
クリップ 1
VIEW 556

stakezaki

score 30

Vue.jsのSSRを試そうとして、vue-server-rendererをwebpackでビルドしたのですが以下のエラーが出てしまいます。解決方法を教えてください。

インストール

npm install webpack --save-dev
npm install vue --save
npm install vue-server-renderer --save
npm install webpack -g

webpack.config.js

module.exports = {
  entry: './src/main.js',
  output: {
    path: "./build",
    filename: 'build.js'
  }
}

src/main.js

var renderer = require('vue-server-renderer');
console.log(renderer);

エラー内容

$ webpack
Hash: b780c6234145a9bea83b
Version: webpack 1.14.0
Time: 973ms
   Asset    Size  Chunks             Chunk Names
build.js  597 kB       0  [emitted]  main
   [0] ./src/main.js 70 bytes {0} [built]
    + 39 hidden modules

WARNING in ./~/vue-server-renderer/build.js
Critical dependencies:
6346:47-54 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/vue-server-renderer/build.js 6346:47-54

WARNING in ./~/vue-server-renderer/README.md
Module parse failed: /Users/takezaki/temp/vue/node_modules/vue-server-renderer/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
    at Parser.pp$4.raise (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.parse (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:515:10)
    at Object.parse (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/takezaki/temp/vue/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
    at fs.js:334:14
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:95:15)
 @ ./~/vue-server-renderer ^\.\/.*$

ERROR in ./~/vue-server-renderer/package.json
Module parse failed: /Users/takezaki/temp/vue/node_modules/vue-server-renderer/package.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:8)
    at Parser.pp$4.raise (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseBlock (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
    at Parser.pp$1.parseStatement (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:709:33)
    at Parser.pp$1.parseTopLevel (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/takezaki/temp/vue/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.provide (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.readFile (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
    at DependenciesBlock.onLoadPitchDone (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
    at DependenciesBlock.loadPitch (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
    at DependenciesBlock.doBuild (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
    at DependenciesBlock.build (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModule.js:84:14)
    at Compilation.buildModule (/Users/takezaki/temp/vue/node_modules/webpack/lib/Compilation.js:126:9)
    at /Users/takezaki/temp/vue/node_modules/webpack/lib/Compilation.js:309:10
    at /Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModuleFactory.js:58:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:69)
    at onDoneResolving (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModuleFactory.js:38:11)
    at onDoneResolving (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModuleFactory.js:121:6)
    at /Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModuleFactory.js:116:7
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/async/lib/async.js:52:16
 @ ./~/vue-server-renderer/index.js 5:18-43 6:21-46

ERROR in ./~/vue-server-renderer/build.js
Module not found: Error: Cannot resolve module 'module' in /Users/takezaki/temp/vue/node_modules/vue-server-renderer
 @ ./~/vue-server-renderer/build.js 10:35-52

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

まだ回答がついていません

同じタグがついた質問を見る

JavaScript

15885questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
Vue.js

649questions

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。
webpack

223questions

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

vue-server-rendererをwebpackするとエラー

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

vue-server-rendererをwebpackするとエラー

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン