fix: load vue-template-compiler with nuxt.resolver.requireModule

src/core/hooks.js

@@ -1,5 +1,6 @@
 import { STRATEGIES } from '../helpers/constants'
 import { formatMessage } from '../templates/utils-common'
+import { makeRoutes } from '../helpers/routes'
 
 /**
  * @this {import('@nuxt/types/config/module').ModuleThis}
@@ -19,16 +20,16 @@ export function createExtendRoutesHook (options) {
   const { trailingSlash } = nuxtOptions.router
 
   return routes => {
-    // This import (or more specifically 'vue-template-compiler' in helpers/components.js) needs to
-    // be required only at build time to avoid problems when 'vue-template-compiler' dependency is
-    // not available (at runtime, when using nuxt-start).
-    const { makeRoutes } = require('../helpers/routes')
+    // Load 'vue-template-compiler' module with Resolver dynamically
+    // See https://github.com/nuxt-community/i18n-module/issues/297#issuecomment-491755323
+    const { parseComponent } = this.nuxt.resolver.requireModule('vue-template-compiler')
 
     const localizedRoutes = makeRoutes(routes, {
       ...options,
       pagesDir,
       includeUprefixedFallback,
-      trailingSlash
+      trailingSlash,
+      parseComponent
     })
     routes.splice(0, routes.length)
     routes.unshift(...localizedRoutes)

src/helpers/components.js

@@ -1,9 +1,6 @@
 import { readFileSync } from 'fs'
 import { parse } from '@babel/parser'
 import traverse from '@babel/traverse'
-// Must not be an explicit dependency to avoid version mismatch issue.
-// See https://github.com/nuxt-community/i18n-module/issues/297
-import { parseComponent } from 'vue-template-compiler'
 import { formatMessage } from '../templates/utils-common'
 import { COMPONENT_OPTIONS_KEY } from './constants'
 
@@ -13,9 +10,10 @@ import { COMPONENT_OPTIONS_KEY } from './constants'
  * @typedef {Required<Pick<import('../../types/vue').NuxtI18nComponentOptions, 'locales' | 'paths'>>} ComputedPageOptions
  *
  * @param {import('@nuxt/types/config/router').NuxtRouteConfig['component']} component
+ * @param {import('vue-template-compiler')['parseComponent']} parseComponent
  * @return {ComputedPageOptions | false}
  */
-export function extractComponentOptions (component) {
+export function extractComponentOptions (component, parseComponent) {
   if (typeof (component) !== 'string') {
     return false
   }

src/helpers/routes.js

@@ -8,6 +8,7 @@ import { adjustRouteDefinitionForTrailingSlash, getPageOptions } from './utils'
  *   pagesDir: string
  *   includeUprefixedFallback: boolean
  *   trailingSlash: import('@nuxt/types/config/router').NuxtOptionsRouter['trailingSlash']
+ *   parseComponent: import('vue-template-compiler')['parseComponent']
  * }} MakeRouteOptions
  *
  * @param {NuxtRouteConfig[]} baseRoutes
@@ -26,7 +27,8 @@ export function makeRoutes (baseRoutes, {
   routesNameSeparator,
   sortRoutes,
   strategy,
-  trailingSlash
+  trailingSlash,
+  parseComponent
 }) {
   /** @type {NuxtRouteConfig[]} */
   let localizedRoutes = []
@@ -48,7 +50,7 @@ export function makeRoutes (baseRoutes, {
     }
 
     const pageOptions = parsePages
-      ? extractComponentOptions(route.component)
+      ? extractComponentOptions(route.component, parseComponent)
       : getPageOptions(route, pages, allowedLocaleCodes, pagesDir, defaultLocale)
 
     // Skip route if i18n is disabled on page

test/unit.test.js

@@ -1,10 +1,11 @@
 import path from 'path'
+import { parseComponent } from 'vue-template-compiler'
 import { matchBrowserLocale, parseAcceptLanguage } from '../src/templates/utils-common'
 
 describe('parsePages', () => {
   test('parses in-component options', async () => {
     const { extractComponentOptions } = await import('../src/helpers/components')
-    const options = extractComponentOptions(path.join(__dirname, './fixture/typescript/pages/index.vue'))
+    const options = extractComponentOptions(path.join(__dirname, './fixture/typescript/pages/index.vue'), parseComponent)
     expect(options).toHaveProperty('paths')
     if (options) {
       expect(options.paths).toHaveProperty('pl')
@@ -16,7 +17,7 @@ describe('parsePages', () => {
     const { extractComponentOptions } = await import('../src/helpers/components')
 
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => { })
-    const options = extractComponentOptions(path.join(__dirname, './fixture/typescript/pages/invalidOptions.vue'))
+    const options = extractComponentOptions(path.join(__dirname, './fixture/typescript/pages/invalidOptions.vue'), parseComponent)
     expect(spy.mock.calls[0][0]).toContain('Error parsing')
     spy.mockRestore()