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

package.json

@@ -135,6 +135,7 @@
     "playwright-chromium": "1.15.2",
     "release-it": "14.11.6",
     "serve-static": "1.14.1",
-    "typescript": "^4.4.4"
+    "typescript": "^4.4.4",
+    "vue-template-compiler": "^2.6.14"
   }
 }

src/core/hooks.js

@@ -19,16 +19,17 @@ 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).
+    // 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 { makeRoutes } = require('../helpers/routes')
 
     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()
 

yarn.lock

@@ -13444,7 +13444,7 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.12:
+vue-template-compiler@^2.6.12, vue-template-compiler@^2.6.14:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
   integrity sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==