vuejs / vue2-ssr-docs

Vue.js Server-Side Rendering Guide (for Vue 2)
564 stars 239 forks source link

I am having problems on building the entry-server.js #131

Closed raultrysw closed 5 years ago

raultrysw commented 7 years ago

Hi, i dont know if it is the apropiate site to issue this problem but I didnt where to issue this.

My problem is that when I run webpack --config bundler/webpack/webpack-server.config.js for get the bundle of entry server the build process throws me this error:

/home/raul/Documentos/Workshop/vuejs website template/node_modules/vue-server-renderer/server-plugin.js:58
      throw new Error(
      ^

Error: Server-side bundle should have one single entry file. Avoid using CommonsChunkPlugin in the server config.
    at Compiler.<anonymous> (/home/raul/Documentos/Workshop/vuejs website template/node_modules/vue-server-renderer/server-plugin.js:58:13)
    at Compiler.applyPluginsAsyncSeries (/home/raul/Documentos/Workshop/vuejs website template/node_modules/tapable/lib/Tapable.js:206:13)
    at Compiler.emitAssets (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compiler.js:358:8)
    at onCompiled (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compiler.js:244:9)
    at applyPluginsAsync.err (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compiler.js:514:14)
    at next (/home/raul/Documentos/Workshop/vuejs website template/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.<anonymous> (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/CachePlugin.js:78:5)
    at Compiler.applyPluginsAsyncSeries (/home/raul/Documentos/Workshop/vuejs website template/node_modules/tapable/lib/Tapable.js:206:13)
    at compilation.seal.err (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compiler.js:511:11)
    at Compilation.applyPluginsAsyncSeries (/home/raul/Documentos/Workshop/vuejs website template/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compilation.js:671:19)
    at Compilation.applyPluginsAsyncSeries (/home/raul/Documentos/Workshop/vuejs website template/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compilation.js:662:11)
    at Compilation.applyPluginsAsyncSeries (/home/raul/Documentos/Workshop/vuejs website template/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compilation.js:657:10)
    at Compilation.applyPluginsAsyncSeries (/home/raul/Documentos/Workshop/vuejs website template/node_modules/tapable/lib/Tapable.js:195:46)
    at sealPart2 (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compilation.js:653:9)
    at Compilation.applyPluginsAsyncSeries (/home/raul/Documentos/Workshop/vuejs website template/node_modules/tapable/lib/Tapable.js:195:46)
    at Compilation.seal (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compilation.js:596:8)
    at applyPluginsParallel.err (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compiler.js:508:17)
    at /home/raul/Documentos/Workshop/vuejs website template/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compilation.js:498:11)
    at processModuleDependencies.err (/home/raul/Documentos/Workshop/vuejs website template/node_modules/webpack/lib/Compilation.js:468:14)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

I dont know what to do... Watching the documentation doesn't helps me...

This are the webpacks files:

webpack-base.config.js

const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
    module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              // enable CSS extraction
              extractCSS: isProduction
            }
          },
          {
            test: /\.css$/,
            // important: use vue-style-loader instead of style-loader
            use: isProduction
              ? ExtractTextPlugin.extract({
                  use: 'css-loader',
                  fallback: 'vue-style-loader'
                })
              : ['vue-style-loader', 'css-loader']
          }
          // ...
        ]
      },
      plugins: [
        // it is common to extract deps into a vendor chunk for better caching.
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          minChunks: function (module) {
            // a module is extracted into the vendor chunk when...
            return (
              // if it's inside node_modules
              /node_modules/.test(module.context) &&
              // do not externalize if the request is a CSS file
              !/\.css$/.test(module.request)
            )
          }
        }),
        // extract webpack runtime & manifest
        new webpack.optimize.CommonsChunkPlugin({
          name: 'manifest'
        }),
      ]
};

webpck-server.config.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack-base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const nodeExternals = require('webpack-node-externals')

module.exports = merge(baseConfig, {
  // Point entry to your app's server entry file
  entry: __dirname + '/../entries/entry-server.js',

  // This allows webpack to handle dynamic imports in a Node-appropriate
  // fashion, and also tells `vue-loader` to emit server-oriented code when
  // compiling Vue components.
  target: 'node',

  // For bundle renderer source map support
  devtool: 'source-map',

  // This tells the server bundle to use Node-style exports
  output: {
    libraryTarget: 'commonjs2',
    filename: '[name].bundle.js',
    path: __dirname + '/../../server-bundles/'
  },

  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // Externalize app dependencies. This makes the server build much faster
  // and generates a smaller bundle file.
  externals: nodeExternals({
    // do not externalize dependencies that need to be processed by webpack.
    // you can add more file types here e.g. raw *.vue files
    // you should also whitelist deps that modifies `global` (e.g. polyfills)
    whitelist: /\.css$/
  }),

  // This is the plugin that turns the entire output of the server build
  // into a single JSON file. The default file name will be
  // `vue-ssr-server-bundle.json`
  plugins: [
    new VueSSRServerPlugin()
  ]
})

webpack-client.config.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack-base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

module.exports = merge(baseConfig, {
  entry: __dirname + '/../entries/entry-client.js',
  output: {
      filename: '[name].bundle.js',
      path: __dirname + '/../../assets/'
  },
  plugins: [
    // Important: this splits the webpack runtime into a leading chunk
    // so that async chunks can be injected right after it.
    // this also enables better caching for your app/vendor code.
    new webpack.optimize.CommonsChunkPlugin({
      name: "manifest",
      minChunks: Infinity
    }),
    // This plugins generates `vue-ssr-client-manifest.json` in the
    // output directory.
    new VueSSRClientPlugin()
  ]
})

Please help =)

947133297 commented 6 years ago

the error syas Error: Server-side bundle should have one single entry file. Avoid using CommonsChunkPlugin in the server config so try to move the commonChunkPligin in your base.config.js to client.config.js ?

anneincoding commented 6 years ago

@947133297 I didn't use CommonsChunkPlugin , but still face the same problem.

'optimization': {
    'splitChunks': {
      'chunks': 'all',
      'cacheGroups': {
        'styles': {
          'name': 'styles',
          'test': /\.css$/,
          'chunks': 'all',
          'enforce': true
        }
      }
    },
    'runtimeChunk': true,
    'minimize': true
  },

my plugins

'plugins':
    isProd ?
      [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
          'filename': isProd ? '[name].[hash].css' : '[name].css',
          'chunkFilename': isProd ? '[id].[hash].css' : '[id].css'
        })
      ] : [
        new VueLoaderPlugin(),
        new FriendlyErrorsPlugin()
      ]

the error

Unhandled rejection Error: Server-side bundle should have one single entry file. Avoid using CommonsChunkPlugin in the server config.
LinusBorg commented 5 years ago

Hello folks.

Thank your for your interest in this project.

However, your issue is a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests (as outlined in our Contributing Guide).

We encourage you to ask it on the forum , Stack Overflow or on our Discord chat and are happy to help you out there.