NuxtJs dev build breaking after I updated to v2.15

121 Views Asked by At

I recently updated my an old nuxtjs project from 1.4.5 to 2.12.0 so i could take advantage of the public and private runtime config. Everything seems to work until it attempts to finish building the client bundle, i get this error

 ERROR  Failed to compile with 1 errors                                                                                                                           

This relative module was not found:  
                                                                                                                             
* ./blank.vue?vue&type=template&id=082ee776&lang=pug in ./src/layouts/blank.vue

this is the full errorenter image description here

and this is the blank.vue file

<template lang="pug">
  nuxt
</template>

here's my nuxt.config.js

import webpack from 'webpack'
import CompressionPlugin from 'compression-webpack-plugin'
import { config } from 'dotenv'

config()

const siteUrl = {
  'development': 'http://localhost:9001'
}

const modules = [
  '@nuxtjs/axios',
  '@nuxtjs/auth',
  '@nuxtjs/sitemap',
  '@nuxtjs/font-awesome',
  '@nuxtjs/browserconfig'
]

// Add any dev-only nuxt modules here
if (process.env.NODE_ENV === 'development') {
  modules.push('@nuxtjs/webpackmonitor')
}

export default {
  debug: true,
  /*
  ** Headers of the page
  */
  head: {
    title: '',
    htmlAttrs: {
      lang: 'en'
    },
    __dangerouslyDisableSanitizersByTagID: {
      act: ['innerHTML'],
      ieFix: ['innerHTML']
    }
  },
  performance: {
    prefetch: true
  },
  loading: false,
  modules,
  browserconfig: {
    TileColor: '#f16365',
    square150x150logo: {
      '@': {
        src: 'icon.png'
      }
    }
  },
  sitemap: {
    routes: []
  },
  vendor: [],
  publicRuntimeConfig: {
    environment: process.env.NODE_ENV,
    MAPS_KEY: process.env.MAPS_KEY
  },
  /*
  ** Global CSS
  */
  css: [
    '~/assets/css/tooltips.css',
    '~/assets/css/overrides.css',
    // scss
    '~/assets/scss/main.scss'
  ],
  auth: {
    plugins: ['~/plugins/auth.js'],
    redirect: {
      login: '/auth/login',
      logout: '/',
      home: '/home',
      callback: false,
      user: '/'
    },
    resetOnError: true,
    fullPathRedirect: true,
    defaultStrategy: 'local',
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/v2/auth/token', method: 'post', propertyName: 'access_token' },
          logout: { url: '/api/v2/auth/revoke', method: 'post' },
          user: { url: '/api/v2/user', method: 'get', propertyName: 'data' }
        }
      }
    }
  },
  plugins: [
    '~/plugins/stripe',
    '~/plugins/social-sharing',
    '~/plugins/vendor',
    '~/plugins/mobile-layout',
    '~/plugins/validate'
  ],
  router: {
    linkActiveClass: 'is-active',
    middleware: ['auth']
  },
  srcDir: 'src/',
  axios: {
    baseURL: siteUrl['development'],
    proxy: true,
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  },
  build: {
    babel: {
      presets: ['@babel/preset-env'],
      plugins: [
        '@babel/plugin-proposal-function-bind',
        '@babel/plugin-transform-runtime',
        'lodash'
      ]
    },
    analyze: false,
    vendor: [
      'babel-polyfill',
      'axios',
      'jquery',
      'bootstrap',
      'vue-notification'
    ],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0
      })
    ]
  }
}

is there a config i missed for the v2 migration? I followed this guide: https://github.com/nuxt/nuxt/releases/tag/v2.0.0

or is there a new way to load vue templates? post nuxt v1? Any help is appreciated. Thanks!

1

There are 1 best solutions below

0
On

found the fix in this thread: https://github.com/nuxt/nuxt/pull/4824

i simply ran yarn add -D pug-plain-loader

then extended my webpack config in nuxt.config.js

    extend (config, { isDev, isClient }) {
      // Add pug loader
      config.module.rules.push({
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      })
    },