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

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

質問する

ただいまの
回答率

90.40%

  • JavaScript

    18156questions

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

  • Vue.js

    939questions

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

  • webpack

    275questions

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

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 668
stakezaki

stakezaki

score 32

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

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

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

    評価を下げる理由を選択してください

    詳細な説明はこちら

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

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 90.40%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

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

  • JavaScript

    18156questions

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

  • Vue.js

    939questions

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

  • webpack

    275questions

SNSアカウントでログイン

  • Facebookでログイン
  • Twitterでログイン
  • Googleでログイン
  • Githubでログイン
  • Hatenaでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る