Vue ssr load on demand reports an error

router.js 

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router);

export default function createRouter () {
  return new Router({
    mode: "history",
    routes: [
      { path: "/",  redirect:{name: "articleList"}, name: "index"},
      { path:"/article", name:"article", component: () => import(/* webpackChunkName: "article" */ "./article/index.vue") ,
        children:[
          { path: "list.html", name: "articleList", component: () => import(/* webpackChunkName: "articleList" */ "./article/articleList.vue") },
          { path: "articleDetails.html", name: "articleDetails", component: () => import(/* webpackChunkName: "articleDetails" */ "./article/articleDetails.vue") }
        ]
      },
      { path: "/crawler.html", name: "crawler", component: () => import(/* webpackChunkName: "crawler" */ "./crawler/index.vue") },
      { path: "/register.html", name: "register", component: () => import(/* webpackChunkName: "register" */ "./user/register.vue") },
      { path: "/messageBoard.html", name: "messageBoard", component: () => import(/* webpackChunkName: "messageBoard" */ "./messageBoard/index.vue")},
      { path: "/profile.html", name: "profile", component: () => import(/* webpackChunkName: "profile" */ "./profile/index.vue") }
    ]
  })
}

webpack.base.js 

const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const isPro = require("process").env.NODE_ENV === "production";

module.exports = {
  mode: "development",
  module: {
    rules: [{
      test: /\.vue$/,
      loader: "vue-loader",
      options: {
        extractCSS: isPro
      }
    },{
      test: /\.js$/,
      loader: "babel-loader",
      exclude: /node_modules/
    },{
      test: /\.less$/,
      use:[isPro ? MiniCssExtractPlugin.loader : "vue-style-loader","css-loader","less-loader"]       
    },{
      test: /\.css$/,
      use:[isPro ? MiniCssExtractPlugin.loader : "vue-style-loader","css-loader"]       
    },{
      test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
      loader: "file-loader"
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[hash].css"
    }),
    new VueLoaderPlugin()
  ],
  resolve: {
    alias: {
      "vue$":"vue/dist/vue.js"
    }
  }
}
ReferenceError: document is not defined
    at r.(anonymous function).r.(anonymous function).(anonymous function).i.push.r.(anonymous function).Promise.then.r.(anonymous function) (webpack/bootstrap:52:0)
    at new Promise (<anonymous>)
    at Function.module.exports.o.e [as e] (webpack/bootstrap:49:0)
    at component (src/router.js:24:65)
    at D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1776:17
    at D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1803:66
    at Array.map (<anonymous>)
    at D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1803:38
    at Array.map (<anonymous>)
    at flatMapComponents (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1802:26)
    at D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1738:5
    at iterator (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1945:7)
    at step (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1719:9)
    at step (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1723:9)
    at runQueue (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1727:3)
    at AbstractHistory.confirmTransition (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1974:3)
    at AbstractHistory.transitionTo (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1876:8)
    at AbstractHistory.push (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:2379:10)
    at VueRouter.push (D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:2536:16)
    at bundle.server.js:1:22479
    at new Promise (<anonymous>)
    at t.default (entry/server.js:8:9)

1. The error file is the packaged vue-ssr-server-bundle.json. The server-side file of vue ssr.
2. If the components at router do not use demand loading, there will be no error
3. If webpack does not use mini-css-extract-plugin to extract css alone, it will not report an error.
4. The error has been positioned as () = > import () reject

there is no problem with webpack compilation and no error will be reported.
kneel for answers

Vue.js ssr
May.25,2022

1. Find out the components that use browser-specific objects such as window , document . These objects can only be used after the mounted of the vue lifecycle. When created is rendered by the server, these objects are not available.
2, import xxx form xxx . For this reason, you can use dynamic import

document object, that is, document object. If it is not defined, it means that the current environment does not support this object, such as nodejs, so you need to locate and see where this object is used. Generally speaking, you just call some methods under this object, such as document.createElement () , and then compare the environment. We can find out what the problem is.

ide/css.html-sharp%E4%BB%8E%E4%BE%9D%E8%B5%96%E6%A8%A1%E5%9D%97%E5%AF%BC%E5%85%A5%E6%A0%B7%E5%BC%8F" rel=" nofollow noreferrer "> Import styles from dependency modules-official instructions
several points to pay attention to when importing CSS from NPM dependency modules:

extraction should not be externalized during server-side build.

when using CSS extraction + using the CommonsChunkPlugin plug-in to extract vendor, extract-text-webpack-plugin will encounter problems if the extracted CSS is in the extracted vendor chunk. To solve this problem, avoid including CSS files in vendor chunk. An example of client webpack configuration is as follows: 

module.exports = {
  // ...
  plugins: [
    //  vendor chunk 
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        //  vendor chunk 
        return (
          //  node_modules 
          /node_modules/.test(module.context) &&
          //  request  CSS 
          !/\.css$/.test(module.request)
        )
      }
    }),
    //  webpack  manifest
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),
    // ...
  ]
}

have you solved it? I also encountered the same problem. When I use sass, it's okay to extract css alone, but the page that uses sass to extract the style of sass cannot be accessed normally

.

Previous: How does win10 open the ubuntu18.04 version in WSL through cmd?

Next: How can Amap's js api obtain the latitude and longitude of the four corners of the current visual area?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu