Not working yarn.lock URLs

[sneko]

Hi @lovetingyuan ,

Note that I was not able to run yarn install because of a network issue:

error An unexpected error occurred: "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz: getaddrinfo ENOTFOUND registry.npm.taobao.org".
info If you think this is a bug, please open a bug report with the information provided in "/Users/sneko/Documents/tests/vue-ssr-example/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...

I succeeded by removing the yarn.lock since this one was pointing to https://registry.npm.taobao.org registry instead of https://registry.yarnpkg.com or the official NPM one. (it seems not reachable from Europe ?)

I will give a try to your settings to minify CSS and extract it in other files :)

[lovetingyuan]

Sorry, I have changed the registry, could you try again?

[sneko]

Yes it works, thank you!

By the way, I tried to merge your configuration with mine but I'm still unable to extract the CSS lines into separate files. They are still embedded in the HTML 😢

Here is my vue.config.js:

const fs = require('fs-extra');
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const nodeExternals = require('webpack-node-externals')

// import { sitemapHandler } from './src/sitemap';

module.exports = {
  productionSourceMap: false,
  css: {
    extract: false,
  },
  pluginOptions: {
    apollo: {
      enableMocks: true,
      enableEngine: false
    },
    ssr: {
      port: process.env.HTTP_SERVER_PORT || 3000,
      // templatePath: path.resolve(__dirname, './dist/index.html'),
      extendServer: (app) => {
        // Disable Express header for security reasons
        app.disable('x-powered-by');

        // Generate a sitemap for search engines
        // app.get('/sitemap.xml', sitemapHandler);
      },
    },
  },
  pwa: {
    name: "test-app",
    iconPaths: {
      favicon32: 'img/icons/favicon-96x96.png',
      favicon16: 'img/icons/favicon-96x96.png',
      appleTouchIcon: 'img/icons/apple-icon-152x152.png',
      maskIcon: 'img/icons/safari-pinned-tab.svg',
      msTileImage: 'img/icons/ms-icon-144x144.png'
    },
    workboxOptions: {
      exclude: [ /\.map$/, /asset-manifest\.json$/, /index\.html$/ ],
    }
  },
  chainWebpack: (config) => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.(graphql|gql)$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end();
  },
  configureWebpack: (config) => {
    // Settings from the sample https://github.com/lovetingyuan/vue-ssr-example/blob/master/vue.config.js
    config = {
      ...config,
      target: 'node',
      devtool: 'source-map',
      node: false,
      output: {
        libraryTarget: 'commonjs2'
      },
      externals: nodeExternals({
        whitelist: /\.(css|svg)$/
      }),
      optimization: {
        minimize: false,
        splitChunks: false
      },
      plugins: [
        new VueSSRServerPlugin()
      ],
    };
  }
}

I see 2 possibilities:

• That's because I'm just using new VueSSRServerPlugin(). Is the other one required? If so, could you please expand on what is it exactly and the difference with new VueSSRClientPlugin()
• Otherwise, I'm using "@akryum/vue-cli-plugin-ssr": "~0.6.0" and it has changed some things into the file tree. For example you have know both in public/ folder 2 files: index.html and index.ssr.html. Maybe their management of webpack plugins are different underlying and that's why the CSS extraction is not working?

Thank you,

EDIT: I just noticed you were not using @akryum/vue-cli-plugin-ssr, you never did? (we talked onto its repository about CSS extraction issue)

[lovetingyuan]

I think your configureWebpack is wrong. Please modify config directly or just return the new configuration. Like this:

configureWebpack: (config) => {
    // Settings from the sample https://github.com/lovetingyuan/vue-ssr-example/blob/master/vue.config.js
    return { // you need return this.
      // ...config, // no need to merge config.
      target: 'node',
      devtool: 'source-map',
      node: false,
      output: {
        libraryTarget: 'commonjs2'
      },
      externals: nodeExternals({
        whitelist: /\.(css|svg)$/
      }),
      optimization: {
        minimize: false,
        splitChunks: false
      },
      plugins: [
        new VueSSRServerPlugin()
      ],
    };
  }

By the way, vue ssr always inline your critical css into your index html.

[sneko]

@lovetingyuan at the end I ended using my own fork with a specific PR that I was waiting for to make it working with my settings.

You can find my comment here: Akryum/vue-cli-plugin-ssr#191 (comment)

Thank you for answering me 👍