airyland / vux

Mobile UI Components based on Vue & WeUI
https://vux.li
MIT License
17.59k stars 3.71k forks source link

[Bug Report] vux 在nuxt 中按照官方demo运行报错 #3143

Open AbsenceSliet opened 6 years ago

AbsenceSliet commented 6 years ago

VUX version

2.9.2

OS/Browsers version

Mac safari

Vue version

2.5.17

Code

✖ error /Users/zhangzongbo/works/selfPractice/nuxt-demo/node_modules/vux/src/components/group/index.vue:1
  (function (exports, require, module, __filename, __dirname) { <template>
  ^

  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 r (/Users/zhangzongbo/works/selfPractice/nuxt-demo/node_modules/vue-server-renderer/build.js:8341:16)
  at Object.vux/src/components/group/index.vue (server-bundle.js:3006:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../plugins/vux-components.js (plugins/vux-components.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../.nuxt/index.js (.nuxt/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)

Steps to reproduce

按照官方的demo 走了一遍。下面是nuxt.config.js的配置

Code

const path = require('path')
const vuxLoader = require('vux-loader')
module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
  css: ['~/assets/css/main.css', 'vux/src/styles/reset.less',
    'vux/src/styles/1px.less'],
  plugins: [
    {
      src: '~/plugins/vux-plugins',
      ssr: false
    },
    {
      src: '~/plugins/vux-components',
      ssr: true
    }
  ],
  /*
  ** Add axios globally
  */
  build: {
    vendor: ['axios'],
    extend (config, ctx) {
      vuxLoader.merge(config, {
        options: {
          isWebpack2: true
        },
        plugins: [{
          name: 'vux-ui'
        }, {
          name: 'duplicate-style'
        }, {
          name: 'less-theme',
          path: path.join(__dirname, './styles/theme.less')
        }]
      })
    }
    /*
    ** Run ESLINT on save
    */
    /* extend (config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    } */
  },
  babel: {
    presets: ['es2015', 'stage-0'],
    'plugins': ['transform-runtime']
  },
  loaders: [{
    test: /\.vue$/,
    loader: 'vue-loader'
  }],
  serverMiddleware: [
    // API middleware
    '~/api/index.js'
  ]
}

npm run dev 的时候不会报错, 挡在浏览器访问的时候会报上面的错误

What is Expected?

希望可以帮忙解决

What is actually happening?

是否vux 还不能支持服务端渲染

reboy commented 6 years ago

将nuxt退回到1.0版本试试。估计是vux-loader与nuxt2.0的兼容问题

lancerfox commented 6 years ago

npm install nuxt@1.0.0 -D 回退到1.0版本

jjskay commented 5 years ago

Nuxt.js v2.3.0 Vux v2.9.2 vux不能使用nuxt2.x的版本吗?我也是升级nuxt后vux-loader,打包死活过不去 ERROR in ./node_modules/.2.9.2@vux/src/components/v-chart/v-tooltip.vue friendly-errors 09:42:04

Module parse failed: Unexpected token (3:0) friendly-errors 09:42:04 You may need an appropriate loader to handle this file type. | var render, staticRenderFns | import script from "./v-tooltip.vue?vue&type=script&lang=js&"

../../../../.1.2.9@vux-loader/src/script-loader.js!export * from "./v-tooltip.vue?vue&type=script&lang=js&"

如果不能兼容nuxt2.x,有计划什么时候升级吗?

hopkinson commented 5 years ago

请问怎么解决?