Closed anneincoding closed 6 years ago
Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!
你好,你的 issue 不符合我们所要求的格式,因此已被自动关闭。为了确保每个 issue 都提供必需的相关信息,请务必使用我们的 Issue 向导 来创建新 issue,谢谢!
I also had the same problem, I found it might be caused by mini-css-extract-plugin.
mini-css-extract-plugin will extract css file and inject, which use function such as document.getElementsByTagName
So what I did to solve it is drop the css file at server render.
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = merge(baseConfig, {
entry: './src/entry-server.js',
target: 'node',
devtool: 'source-map',
output: {
libraryTarget: 'commonjs2'
},
externals: nodeExternals({
whitelist: /\.css$/
}),
plugins: [
new VueSSRServerPlugin()
],
module: {
rules: [{
test: /\.css$/,
use: [
'css-loader/locals'
]
}, {
test: /\.scss$/,
use: [
'css-loader/locals',
'sass-loader'
]
}]
}
})
note css-loader/locals
will not inject the css file at server, thus solve the problem.
Hope that will help you.
Reference https://github.com/webpack-contrib/mini-css-extract-plugin/issues/48#issuecomment-375288454
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/90 https://github.com/vuejs/vue-ssr-docs/issues/196
For me, I got a very similar error (with vue-router
and the anonymous functions, running with dev
but not build
and whatnot).
The fix was I was refreshing my babel config and took out "dynamic-import-node"
from the plugins
section. I needed to add it back... and it started working again. :)
use extract-css-chunks-webpack-plugin instead mini-css-extract-plugin
webpack.base.config.js
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin')
{
...
{
test: /\.css$/,
use: [
{
loader: ExtractCssChunksPlugin.loader,
options: {
hot: !isProd,
reloadAll: !isProd
}
},
'postcss-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
{
loader: ExtractCssChunksPlugin.loader,
options: {
hot: !isProd,
reloadAll: !isProd
}
},
'css-loader',
'postcss-loader',
'less-loader'
]
}
...
plugins: [
...
new ExtractCssChunksPlugin({
filename: isProd ? 'css/[name].[contenthash:8].css' : '[name].css',
chunkFilename: isProd ? 'css/[name].[contenthash:8].chunk.css' : '[name].chunk.css'
})
]
}
webpack.server.config.js
{
...
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
}
I also had the same problem, I found it might be caused by mini-css-extract-plugin. mini-css-extract-plugin will extract css file and inject, which use function such as
document.getElementsByTagName
So what I did to solve it is drop the css file at server render.
const merge = require('webpack-merge') const nodeExternals = require('webpack-node-externals') const baseConfig = require('./webpack.base.config.js') const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') module.exports = merge(baseConfig, { entry: './src/entry-server.js', target: 'node', devtool: 'source-map', output: { libraryTarget: 'commonjs2' }, externals: nodeExternals({ whitelist: /\.css$/ }), plugins: [ new VueSSRServerPlugin() ], module: { rules: [{ test: /\.css$/, use: [ 'css-loader/locals' ] }, { test: /\.scss$/, use: [ 'css-loader/locals', 'sass-loader' ] }] } })
note
css-loader/locals
will not inject the css file at server, thus solve the problem.Hope that will help you.
Reference webpack-contrib/mini-css-extract-plugin#48 (comment)
820
webpack-contrib/mini-css-extract-plugin#90 vuejs/vue-ssr-docs#196
I also had the same problem, I found it might be caused by mini-css-extract-plugin. mini-css-extract-plugin will extract css file and inject, which use function such as
document.getElementsByTagName
So what I did to solve it is drop the css file at server render.
const merge = require('webpack-merge') const nodeExternals = require('webpack-node-externals') const baseConfig = require('./webpack.base.config.js') const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') module.exports = merge(baseConfig, { entry: './src/entry-server.js', target: 'node', devtool: 'source-map', output: { libraryTarget: 'commonjs2' }, externals: nodeExternals({ whitelist: /\.css$/ }), plugins: [ new VueSSRServerPlugin() ], module: { rules: [{ test: /\.css$/, use: [ 'css-loader/locals' ] }, { test: /\.scss$/, use: [ 'css-loader/locals', 'sass-loader' ] }] } })
note
css-loader/locals
will not inject the css file at server, thus solve the problem.Hope that will help you.
Reference webpack-contrib/mini-css-extract-plugin#48 (comment)
820
webpack-contrib/mini-css-extract-plugin#90 vuejs/vue-ssr-docs#196
Hello, in the version of vue-cli3+, how to use css-loader/locals? I tried for a long time but failed. Do you have any examples?
@lycHub Hello, I build SSR with webpack, I do not have any examples with vue-cli3
PS: I do have one, but it is "hybrid", SSR is still handled by webpack https://github.com/simon300000/musedash.moe
use extract-css-chunks-webpack-plugin instead mini-css-extract-plugin
webpack.base.config.js
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin') { ... { test: /\.css$/, use: [ { loader: ExtractCssChunksPlugin.loader, options: { hot: !isProd, reloadAll: !isProd } }, 'postcss-loader', 'css-loader' ] }, { test: /\.less$/, use: [ { loader: ExtractCssChunksPlugin.loader, options: { hot: !isProd, reloadAll: !isProd } }, 'css-loader', 'postcss-loader', 'less-loader' ] } ... plugins: [ ... new ExtractCssChunksPlugin({ filename: isProd ? 'css/[name].[contenthash:8].css' : '[name].css', chunkFilename: isProd ? 'css/[name].[contenthash:8].chunk.css' : '[name].chunk.css' }) ] }
webpack.server.config.js
{ ... plugins: [ new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) ] }
Hi,
I am running into the same problem. However, i attempted to add your solution into my vue.config.js
file as such
const path = require('path')
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin')
module.exports = {
outputDir: 'dist',
lintOnSave: false,
css: {
extract: true //false
},
chainWebpack: config => {
config.resolve.alias.set('@', path.resolve(__dirname))
},
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
plugins: [
new ExtractCssChunksPlugin({
filename: '[name].css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: ExtractCssChunksPlugin.loader
},
'postcss-loader',
'css-loader'
]
}
]
}
}
}
i get the following error
(1:1) Unknown word
> 1 | // Imports
| ^
2 | var ___CSS_LOADER_API_IMPORT___ = require("../../../node_modules/css-loader/dist/runtime/api.js");
3 | exports = ___CSS_LOADER_API_IMPORT___(false);`
@lycHub Hello, I build SSR with webpack, I do not have any examples with vue-cli3
PS: I do have one, but it is "hybrid", SSR is still handled by webpack https://github.com/simon300000/musedash.moe
I create a vue-ssr-demo project with vue-cli, and I also encountered the same problem. My solution is replace the mini-css-extract-plugin with a new loader
// css-loader mini-css-extract-plugin(extract-css-loader),will generate browser sentence such as document.getElementsByTagName xxxxx。
// this will result in error (document not defined), running on server side。
// so delete mini-css-extract-plugin and replace with css-context-loader。
const langs = ['css', 'less']
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
langs.forEach(lang => {
types.forEach(type => {
const rule = config.module.rule(lang).oneOf(type)
rule.uses.delete('extract-css-loader')
rule.use('css-context-loader').loader(CssContextLoader).before('css-loader')
})
})
the new loader you can reference vue-cli-plugin-ssr
Hi everyone, I am trying to do server side render by 'vue-server-renderer', I can do
to develop, but when I try
I always got errors like this
my server.js looks like this