Permalink
Browse files

fix($core): Cannot assign to read only property 'exports' of object (c…

…lose: #869)

This is weird issue of webpack. since ClientComputedMixin was used both in server and client side,
client es module will import this commonJS module, it should work but webpack throw error: 'Uncaught
TypeError: Cannot assign to read only property 'exports' of object '#<Object>''. related issue:
webpack/webpack#4039
  • Loading branch information...
ulivz committed Sep 27, 2018
1 parent 6dd3641 commit 47ac48562b72097bdc94a21ed4c3a46ff2ae383e
@@ -6,7 +6,7 @@ import { routes } from '@internal/routes'
import { siteData } from '@internal/siteData'
import appEnhancers from '@internal/app-enhancers'
import globalUIComponents from '@internal/global-ui'
import ClientComputedMixin from '../prepare/ClientComputedMixin'
import ClientComputedMixin from '@transform/ClientComputedMixin'
import Store from './Store'
// generated from user config
@@ -0,0 +1,27 @@
const path = require('path')
const { fs } = require('@vuepress/shared-utils')
const DIR = 'transform'
module.exports = (options, ctx) => ({
name: '@vuepress/internal-transform-modules',
alias: {
'@transform': path.resolve(ctx.tempPath, DIR)
},
async clientDynamicModules () {
const files = [
path.resolve(__dirname, '../prepare/ClientComputedMixin.js')
]
const modules = await Promise.all(files.map(async file => {
const { base } = path.parse(file)
let content = await fs.readFile(file, 'utf-8')
content = content.replace('module.exports =', 'export default')
return { name: base, content, dirname: DIR }
}))
return modules
}
})
@@ -110,6 +110,7 @@ module.exports = class AppContext {
.use(require('../internal-plugins/overrideCSS'))
.use(require('../internal-plugins/layoutComponents'))
.use(require('../internal-plugins/pageComponents'))
.use(require('../internal-plugins/transformModule'))
// user plugin
.useByPluginsConfig(this.cliOptions.plugins)
.useByPluginsConfig(this.siteConfig.plugins)
@@ -30,21 +30,18 @@ function findPageForPath (pages, path) {
*/
module.exports = siteData => {
// We cannot use class here. webpack will throw error.
function ClientComputedMixin () {}
ClientComputedMixin.prototype = {
return class ClientComputedMixin {
setPage (page) {
this.__page = page
},
}
get $site () {
return siteData
},
}
get $themeConfig () {
return this.$site.themeConfig
},
}
get $localeConfig () {
const { locales = {}} = this.$site
@@ -58,11 +55,11 @@ module.exports = siteData => {
}
}
return targetLang || defaultLang || {}
},
}
get $siteTitle () {
return this.$localeConfig.title || this.$site.title || ''
},
}
get $title () {
const page = this.$page
@@ -76,32 +73,28 @@ module.exports = siteData => {
? (selfTitle + ' | ' + siteTitle)
: siteTitle
: selfTitle || 'VuePress'
},
}
get $description () {
// #565 hoist description from meta
const description = getMetaDescription(this.$page.frontmatter.meta)
if (description) {
return description
}
// if (this.$page.frontmatter.meta) {
// const descriptionMeta = this.$page.frontmatter.meta.filter(item => item.name === 'description')[0]
// if (descriptionMeta) return descriptionMeta.content
// }
return this.$page.frontmatter.description || this.$localeConfig.description || this.$site.description || ''
},
}
get $lang () {
return this.$page.frontmatter.lang || this.$localeConfig.lang || 'en-US'
},
}
get $localePath () {
return this.$localeConfig.path || '/'
},
}
get $themeLocaleConfig () {
return (this.$site.themeConfig.locales || {})[this.$localePath] || {}
},
}
get $page () {
if (this.__page) {
@@ -113,16 +106,11 @@ module.exports = siteData => {
)
}
}
return ClientComputedMixin
}
function getMetaDescription (meta) {
if (meta) {
// Why '(() => 'name')()' ?
// You can use item.name directly and see what happened.
// "How many pits did webpack bury?"
const descriptionMeta = meta.filter(item => item[(() => 'name')()] === 'description')[0]
const descriptionMeta = meta.filter(item => item.name === 'description')[0]
if (descriptionMeta) return descriptionMeta.content
}
}

0 comments on commit 47ac485

Please sign in to comment.