Problems of build apps that use vue.js

[nkbaim]

Hi, I tried to build a shiny app that uses vue.js just following the document https://packer.john-coene.com/#/examples/shiny-bs4

golem::create_golem("demoVue")
packer::scaffold_golem(vue = TRUE)
packer::bundle()

However, run above codes will results below errors:

packer::bundle()
! Command raised the warning below
running command '"C:\Program Files\nodejs\npm" run production' had status 2
> [email protected] production
> webpack --config webpack.prod.js
[webpack-cli] Failed to load 'C:\Users\duyang\Documents\vueDemo\webpack.prod.js' config
[webpack-cli] Error: Cannot find module 'vue-loader/lib/plugin'
Require stack:
- C:\Users\duyang\Documents\vueDemo\webpack.common.js
- C:\Users\duyang\Documents\vueDemo\webpack.prod.js
- C:\Users\duyang\Documents\vueDemo\node_modules\webpack-cli\lib\webpack-cli.js
- C:\Users\duyang\Documents\vueDemo\node_modules\webpack-cli\lib\bootstrap.js
- C:\Users\duyang\Documents\vueDemo\node_modules\webpack-cli\bin\cli.js
- C:\Users\duyang\Documents\vueDemo\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Users\duyang\Documents\vueDemo\webpack.common.js:1:25)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\duyang\\Documents\\vueDemo\\webpack.common.js',
    'C:\\Users\\duyang\\Documents\\vueDemo\\webpack.prod.js',
    'C:\\Users\\duyang\\Documents\\vueDemo\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
    'C:\\Users\\duyang\\Documents\\vueDemo\\node_modules\\webpack-cli\\lib\\bootstrap.js',
    'C:\\Users\\duyang\\Documents\\vueDemo\\node_modules\\webpack-cli\\bin\\cli.js',
    'C:\\Users\\duyang\\Documents\\vueDemo\\node_modules\\webpack\\bin\\webpack.js'
  ]
}
x Failed to bundle files

Seems that change the version of vue to ^2.6.0 and vue-loader to ^15.0.0 could fix this problems.

[shalom-lab]

Hello,buddy, how did you fix the problem?

[nkbaim]

Hello,buddy, how did you fix the problem?

Firstly, modify the package.json file in the root directory, change the version of vue to ^2.6.0, and vue-loader to ^15.0.0. Then, run system("npm install") to update the packages.

I also modified the srcjs/config/loaders.json as below:

[
  {
    "test": "\\.(js|jsx)$",
    "use": [
      "babel-loader"
    ],
    "exclude": "/node_modules/"
  },
  {
    "test": "\\.vue$",
    "use": [
      "vue-loader"
    ],
    "exclude": "/node_modules/"
  },
  {
    "test": "\\.css$",
    "use": [
      "css-loader"
    ]
  }
]

Then, packer::bundle() works.

[shalom-lab]

Yeah, It did work.Thanks.

[JohnCoene]

Vue's latest and stable version has been bumped, I will have to modify scaffold. Thanks for flagging this.

[shalom-lab]

Vue's latest and stable version has been bumped, I will have to modify scaffold. Thanks for flagging this.

Thanks. I hope scaffold can support vue 3. The default Vue version has upgraded to Vue 3. Hope this can help you.