TypeError: Cannot read property 'type' of undefined

[vimcaw]

我从一个 SPA 转成 mpvue 后，运行 npm run dev 后，控制台报错，但是是报的 loader 的错误，实在不好排查是哪里的问题，有人遇到过吗？

TypeError: Cannot read property 'type' of undefined
    at C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\lib\style-compiler\plugins\scope-id.js:34:24
    at Selector.each (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\postcss-selector-parser\dist\selectors\container.js:153:22)
    at C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\lib\style-compiler\plugins\scope-id.js:24:20
    at Root.each (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\postcss-selector-parser\dist\selectors\container.js:153:22)
    at Processor.func (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\lib\style-compiler\plugins\scope-id.js:22:19)
    at Processor.process (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\postcss-selector-parser\dist\processor.js:34:14)
    at rewriteSelector (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\lib\style-compiler\plugins\scope-id.js:56:10)
    at Root.each (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\node_modules\postcss\lib\container.js:110:22)
    at C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\lib\style-compiler\plugins\scope-id.js:8:10
    at LazyResult.run (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at processing.Promise.then._this2.processed (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\node_modules\postcss\lib\lazy-result.js:231:20)
    at new Promise (<anonymous>)
    at LazyResult.async (C:\Users\vimcaw\Documents\Work\kcshop-mpvue\node_modules\@f-loat\mpvue-loader\node_modules\postcss\lib\lazy-result.js:228:27)

离报错点最近的代码（node_modules\@f-loat\mpvue-loader\lib\style-compiler\plugins\scope-id.js:34:24）：

selector.each(function (n) {
            // ">>>" combinator
            if (n.type === 'combinator' && n.value === '>>>') {
              n.value = ' '
              n.spaces.before = n.spaces.after = ''
              return false
            }
            // /deep/ alias for >>>, since >>> doesn't work in SASS
            if (n.type === 'tag' && n.value === '/deep/') {
              var next = n.next()
              if (next.type === 'combinator' && next.value === ' ') {
                next.remove()
              }
              n.remove()
              return false
            }
            if (n.type !== 'pseudo' && n.type !== 'combinator') {
              node = n
            }
          })

貌似大概是深度选择符 /deep/ 相关的报错，n 缺失 next 属性，打印出报错前最近的 n 的值，为：

Tag {
  value: '/deep/',
  source: { start: { line: 1, column: 1 }, end: { line: 1, column: 6 } },
  sourceIndex: 0,
  spaces: { before: '', after: '' },
  type: 'tag',
  parent: 
   Selector {
     spaces: { before: '', after: '' },
     nodes: [ [Circular], [Object], [Object] ],
     type: 'selector',
     parent: 
      Root {
        spaces: [Object],
        nodes: [Array],
        type: 'root',
        lastEach: 1,
        indexes: [Object] },
     lastEach: 1,
     indexes: { '1': 0 } } }

看起来像是 /deep/ 之后是空的导致没有 next 属性，但是我的项目中并不会出现这种语法错误。

而且如果是语法错误的话，那应该在旧项目上就会报错，但是旧项目上是没问题的。

[F-loat]

你先排查下是哪个页面的问题，虽然可能是 mpvue-loader 的 bug，但是也应该是你使用了不规范的写法造成的

[F-loat]

另外 deep 这种语法应该还不支持，有问题再重开吧