vuetify-module icon indicating copy to clipboard operation
vuetify-module copied to clipboard

Doesn't work when an app is written in JSX and built for production

Open kimamula opened this issue 5 years ago • 1 comments

Module version

Describe the bug If I use JSX, Vuetify components are rendered correctly only when an app is built for development.

To Reproduce

  • CSB: https://codesandbox.io/s/naughty-hoover-5fqpu?file=/pages/index.vue
  • GitHub repository (the same code as the CSB): https://github.com/kimamula/nuxt-vuetify-jsx

You can see that the app renders Vuetify components correctly on the CSB. If you git clone from the GitHub repository and run yarn dev (MINIMAL=1 CSB=1 nuxt), it also works fine. However, if you run yarn build && yarn start (nuxt build && nuxt start) or yarn generate (nuxt generate) in the repository, Vuetify components are not rendered correctly as shown below.

Expected behavior Vuetify components should be rendered correctly when an app is written in JSX and built for production.

Screenshots When built for development (can be seen on the CSB):

  • Page image: image
  • HTML image

When built for production:

  • Page image: image
  • HTML: image

Additional context I confirmed that I can fix the problem by creating plugins/vuetify.js, writing Vue.use(Vuetify) there, and registering it as a plugin in nuxt.config.js (see https://github.com/kimamula/nuxt-vuetify-jsx/commit/8cb92c7d7410bfc48e1c043282ae52c9038a4933). However, I am not sure whether this is the right way to fix the problem.

kimamula avatar Aug 23 '20 16:08 kimamula

Setting treeShake: false also works.

kimamula avatar Aug 24 '20 23:08 kimamula