vuetifyjs / vuetify-loader

📦 Webpack and Vite plugins for treeshaking Vuetify components and more
https://vuetifyjs.com/customization/a-la-carte#vuetify-loader
MIT License
507 stars 91 forks source link

pug compatibility broken by v1.0.7 #32

Closed ledermann closed 5 years ago

ledermann commented 5 years ago

After upgrading vuetify-loader to 1.0.7 my app (using pug templates) is broken. Webpack fails with this error message:

(node:90991) UnhandledPromiseRejectionWarning: Error: Module "pug" required by "vuetify-loader" not found. Please run: npm install pug@'^2.0.0' --save
    at realRequire (/Users/ledermann/Projects/myapp/node_modules/codependency/index.js:146:9)
    at requirePeer (/Users/ledermann/Projects/myapp/node_modules/codependency/index.js:326:10)
    at Object.module.exports (/Users/ledermann/Projects/myapp/node_modules/vuetify-loader/lib/loader.js:43:21)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
(node:90991) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:90991) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

With 1.0.6 it works fine. It seems to be caused by #28.

I'm using Yarn, the packages pug and pug-plain-loader are in my devDependencies.

KaelWD commented 5 years ago

What version of pug do you have installed? Can you try deleting node_modules and running yarn again?

ledermann commented 5 years ago

I'm using the latest release of pug (v2.0.3). Deleting node_modules/ and running yarn again doesn't help.

I've tried to move pug and pug-plain-loader from devDependencies to dependencies, but that doesn't help either.

My package.json ```json { "name": "myapp", "private": true, "scripts": { "test": "vue-cli-service test:unit", "lint": "vue-cli-service lint app/javascript/**/*.{js,vue} spec/javascript/*" }, "jest": { "verbose": true, "testURL": "https://myapp.test/", "roots": [ "spec/javascript" ], "moduleDirectories": [ "node_modules", "app/javascript" ], "moduleNameMapper": { "^@/(.*)$": "app/javascript/$1" }, "moduleFileExtensions": [ "js", "json", "vue" ], "transform": { "^.+\\.jsx?$": "babel-jest", "^.+\\.vue$": "vue-jest" }, "snapshotSerializers": [ "/node_modules/jest-serializer-vue" ] }, "dependencies": { "@mdi/font": "^3.0.39", "@rails/webpacker": "^4.0.0-pre.3", "axios": "^0.18.0", "marked": "^0.5.2", "offline-plugin": "^5.0.6", "typeface-roboto": "^0.0.54", "vue": "^2.5.17", "vue-infinite-loading": "^2.4.3", "vue-loader": "^15.4.2", "vue-router": "^3.0.2", "vue-timeago": "^5.0.0", "vuetify": "^1.3.9", "vuex": "^3.0.1" }, "devDependencies": { "@vue/babel-preset-app": "^3.1.1", "@vue/cli-plugin-babel": "^3.1.0", "@vue/cli-plugin-eslint": "^3.1.5", "@vue/cli-plugin-unit-jest": "^3.1.0", "@vue/cli-service": "^3.1.4", "@vue/test-utils": "^1.0.0-beta.25", "babel-core": "7.0.0-bridge.0", "babel-jest": "^23.6.0", "eslint-plugin-jest": "^22.0.0", "less": "^3.8.1", "less-loader": "^4.1.0", "pug": "^2.0.3", "pug-plain-loader": "^1.0.0", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "vue-template-compiler": "^2.5.17", "vuetify-loader": "^1.0.7", "webpack-dev-server": "^3.1.9" } } ```
ledermann commented 5 years ago

... and here is my webpack config (I'm using rails/webpacker).

environment.js ```javascript const { environment } = require('@rails/webpacker') const { VueLoaderPlugin } = require('vue-loader') const vue = require('./loaders/vue') const path = require('path') environment.config.merge({ resolve: { alias: { '@': path.resolve('app/javascript'), vue$: 'vue/dist/vue.runtime.esm.js', vuex$: 'vuex/dist/vuex.esm.js' } } }) const isProduction = process.env.NODE_ENV === 'production' const MiniCssExtractPlugin = require('mini-css-extract-plugin') const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') environment.plugins.append('VuetifyLoaderPlugin', new VuetifyLoaderPlugin()) environment.loaders.append('stylus', { test: /\.styl$/, use: [ isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'stylus-loader' ], }) environment.loaders.append('pug', { test: /\.pug$/, use: ['pug-plain-loader'] }) environment.loaders.append('less', { test: /\.less$/, use: [ isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'less-loader' ], }) environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin()) environment.loaders.append('vue', vue) module.exports = environment ```
ComfyFluffy commented 5 years ago

Same issue. After setting the version of vuetify-loader to 1.0.6, it works again.

MatthewAry commented 5 years ago

Guess we just have to roll things back.

KaelWD commented 5 years ago

Sorry, this slipped under my radar. I'll try to remember to look at it sometime over the weekend.