ElemeFE / ElemeFE/mint-ui

[Bug Report] SSR 时,无法单独引用 DatetimePicker 等组件,报错:style.css

Open
#1,290 2 comments 1 reaction 0 assignees View on GitHub
Dominant language
Vue
Stars
16.4k
Forks
3.5k
PR merge metrics
No merged PRs in 30d

Description

### Mint UI version
2.2.11

### OS/Browsers version
Node

### Vue version
2.5.2

### Reproduction Link
[https://jsfiddle.net/null](https://jsfiddle.net/null)

### Steps to reproduce
##### webpack.base.config.js
``` javascript
rule: [{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
extractCSS: !isDev,
preserveWhitespace: false,
postcss: [
require('autoprefixer')({
browsers: [
'last 3 versions'
]
})
],
loaders: {
scss: [
'vue-style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
resolve('../src/assets/css/variables.scss'),
resolve('../src/assets/css/mixins.scss')
]
}
}
],
i18n: '@kazupon/vue-i18n-loader'
}
}
}
]
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(scss|css)$/,
use: isDev
? ['vue-style-loader', 'css-loader', 'sass-loader']
: ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: ['css-loader?minimize', 'postcss-loader', 'sass-loader']
})
}]
```
##### .babelrc
``` json
{
"presets": ["env", "stage-0"],
"plugins": [
"syntax-dynamic-import",
"transform-runtime",
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
]
}
```
##### import
``` javascript
import { DatetimePicker } from 'mint-ui'
```

### What is Expected?
不报错

### What is actually happening?
``` shell
[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token .
[vue-router] uncaught error during route navigation:
/node_modules/mint-ui/lib/picker/style.css:2
.picker {
^

SyntaxError: Unexpected token .
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:588:28)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at Object.202 (/node_modules/mint-ui/lib/datetime-picker/index.js:257:18)
at __webpack_require__ (/node_modules/mint-ui/lib/datetime-picker/index.js:21:30)
at Object.58 (/node_modules/mint-ui/lib/datetime-picker/index.js:359:3)
at __webpack_require__ (/node_modules/mint-ui/lib/datetime-picker/index.js:21:30)
at Object.136 (/node_modules/mint-ui/lib/datetime-picker/index.js:185:3)
at __webpack_require__ (/node_modules/mint-ui/lib/datetime-picker/index.js:21:30)
at Object.24 (/node_modules/mint-ui/lib/datetime-picker/index.js:287:83)
at __webpack_require__ (/node_modules/mint-ui/lib/datetime-picker/index.js:21:30)
at Object.215 (/node_modules/mint-ui/lib/datetime-picker/index.js:278:18)
at __webpack_require__ (/node_modules/mint-ui/lib/datetime-picker/index.js:21:30)
at module.exports.0.module.exports.rawScriptExports (/node_modules/mint-ui/lib/datetime-picker/index.js:67:18)
at Object. (/node_modules/mint-ui/lib/datetime-picker/index.js:70:10)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at r (/node_modules/vue-server-renderer/build.js:8336:16)
at Object.528 (server-bundle.js:4531:18)
at __webpack_require__ (server-bundle.js:27:30)
at Object.234 (24.server-bundle.js:83:23)
at __webpack_require__ (server-bundle.js:27:30)
at Object.156 (24.server-bundle.js:9:141)
at __webpack_require__ (server-bundle.js:27:30)
at
at process._tickDomainCallback (internal/process/next_tick.js:228:7)
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.