Issue with typescript: true in Nuxt Bridge Migration

[makoto-mk]

Issue with typescript: true in Nuxt Bridge Migration

I’m migrating a Nuxt 2 project to Nuxt Bridge following the migration guide.

In the TypeScript setup section, when I set typescript: true in my configuration, I encounter the following error. How can I resolve this?

Error Message:

ERROR  Failed to compile with 1 errors                                                   friendly-errors 22:23:47


 ERROR  in ./node_modules/cookie-es/dist/index.mjs                                        friendly-errors 22:23:47

Module parse failed: Unexpected token (22:12)                                             friendly-errors 22:23:47
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.
|     }
|     const key = str.slice(index, eqIdx).trim();
>     if (opt?.filter && !opt?.filter(key)) {
|       index = endIdx + 1;
|       continue;
                                                                                          friendly-errors 22:23:47
 @ ./node_modules/h3/dist/index.mjs 113:0-56 906:9-16 915:18-27 922:54-61
 @ ./node_modules/@nuxt/bridge/dist/runtime/composables/ssr.mjs
 @ ./.nuxt/imports.mjs
 @ ./.nuxt/capi.plugin.mjs
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Node.js Version:

v22.2.0

package.json Dependencies:

"dependencies": {
  "@nuxtjs/auth-next": "^5.0.0-1624817847.21691f1",
  "@nuxtjs/axios": "^5.13.6",
  "@nuxtjs/dotenv": "^1.4.1",
  "@nuxtjs/google-analytics": "~2.4.0",
  "@nuxtjs/proxy": "^2.1.0",
  "@nuxtjs/pwa": "^3.3.5",
  "@nuxtjs/sentry": "^5.1.5",
  "@nuxtjs/toast": "^3.3.1",
  "core-js": "^3.29.1",
  "file-saver": "^2.0.5",
  "jszip": "^3.7.1",
  "jszip-utils": "^0.1.0",
  "nuxt": "^2.17.8",
  "nuxt-lazy-load": "^1.2.9",
  "sanitize-html": "~2.5.3",
  "text-encoding": "^0.7.0",
  "vue-facebook-login-component": "^4.0.2"
},
"devDependencies": {
  "@nuxt/bridge": "^3.3.1",
  "@nuxt/types": "^2.16.3",
  "@nuxtjs/eslint-module": "^3.0.2",
  "@nuxtjs/style-resources": "^1.2.1",
  "@nuxtjs/stylelint-module": "^4.0.0",
  "@nuxtjs/vuetify": "^1.12.1",
  "@typescript-eslint/eslint-plugin": "^5.48.1",
  "@typescript-eslint/parser": "^5.48.1",
  "@vue/test-utils": "^1.2.2",
  "eslint": "^7.32.0",
  "eslint-config-prettier": "^8.8.0",
  "eslint-import-resolver-webpack": "^0.13.2",
  "eslint-junit": "^1.0.1",
  "eslint-loader": "^4.0.2",
  "eslint-plugin-import": "^2.27.5",
  "eslint-plugin-jest": "^24.4.0",
  "eslint-plugin-prettier": "^3.4.0",
  "eslint-plugin-vue": "^7.16.0",
  "jest": "^27.3.1",
  "jest-junit": "^13.0.0",
  "jsdoc": "^3.6.7",
  "jsdoc-vuejs": "^4.0.0",
  "minami": "^1.2.3",
  "nuxi": "^3.15.0",
  "prettier": "^2.8.7",
  "sass": "^1.38.0",
  "sass-loader": "^10.2.0",
  "stylelint": "^13.13.1",
  "stylelint-config-standard": "^22.0.0",
  "stylelint-junit-formatter": "^0.2.2",
  "stylelint-scss": "^3.20.1",
  "tslint": "^6.1.3",
  "typescript-tslint-plugin": "^1.0.1",
  "vue-jest": "^3.0.7",
  "webpack": "^4.46.0"
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "plugins": [{
      "name": "typescript-tslint-plugin"
    }],
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxt/vue-app"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

nuxt.config.js

export default defineNuxtConfig({
	bridge: {
		typescript: false,
		nitro: false,
	},
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Target: https://go.nuxtjs.dev/config-target
  target: "static",

  env: {
    API_BASE_URL,
    API_KEY,
    FB_APP_ID,
    ZIP_BASE_URL,
    ORIGIN,
  },
  head: {
			...
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    // プロジェクト内の SCSS ファイル
    "@/assets/scss/main.scss",
  ],
  styleResources: {
    scss: ["@/assets/scss/main.scss"],
  },
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
		...
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // Simple usage
    "@nuxtjs/vuetify",
    "@nuxtjs/google-analytics",
    "@nuxtjs/stylelint-module",
    "@nuxtjs/toast",
    "@nuxtjs/pwa",
    "@nuxt/typescript-build",
  ],

  googleAnalytics: {
    id: process.env.GOOGLE_ANALYTICS_ID, // Use as fallback if no runtime config is provided
  },
  publicRuntimeConfig: {
    googleAnalytics: {
      id: process.env.GOOGLE_ANALYTICS_ID,
    },
    api_url: process.env.API_BASE_URL,
  },
  privateRuntimeConfig: {
    api_key: process.env.API_KEY,
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/dotenv",
    "@nuxtjs/sentry",
    "@nuxtjs/auth-next",
  ],
  axios: {
    proxy: true,
  },
  /**
   * for CORS
   */
  proxy: {
		...
  },

  /*
   ** Auth module configuration
   ** See https://auth.nuxtjs.org/schemes/local.html#options
   */
  auth: {
    redirect: {
      login: `/login`, // 未ログイン時に認証ルートへアクセスした際のリダイレクトURL
      logout: "/", // ログアウト時のリダイレクトURL
      callback: false, // Oauth認証等で必要となる コールバックルート
      home: "/", // ログイン後のリダイレクトURL
    },
    strategies: {
      local: {
        user: {
          // endpoints.userのAPIをfetchUserで叩いた時にレスポンスからデータを引くためのカラム名
          property: "data",
        },
        endpoints: {
          login: {
            url: `${process.env.API_BASE_URL}/login`,
            method: "post",
            propertyName: false,
          },
          logout: {
            url: `${process.env.API_BASE_URL}/logout`,
            method: "post",
            propertyName: false,
          },
          user: {
            url: `${process.env.API_BASE_URL}/me?include=roles.permissions`,
            method: "get",
            propertyName: false,
          },
        },
      },
    },
  },

  router: {
    // loginのauthが必要なら追加する
    middleware: ["roles"],

    /*
    extendRoutes(routes, resolve) {
      routes.push({
        name: "not found",
        path: "*",
        component: resolve(__dirname, "pages/error.vue"),
      });
    },

     */
  },
  toast: {
    position: "top-right",
    duration: 5000,
    keepOnHover: true,
    fullWidth: false,
    fitToScreen: true,
    className: "vue-toast-custom",
    closeOnSwipe: true,
    register: [
      // Register custom toasts
      // @todo add custom messages as they come : login failed, register failed etc
      {
        name: "my-error",
        message: "Oops...Something went wrong",
        options: {
          type: "error",
        },
      },
    ],
  },

  generate: {
    fallback: true,
    dir: "public",
  },
  loading: {
    color: "#23335e",
    height: "5px",
  },
  vuetify: {
    lang: {
      locales: ["ja"],
      current: "ja",
    },
    customVariables: ["~/assets/scss/variables.scss"],
    theme: {
      dark: false,
      themas: {
        light: {
          primary: "#23335E", //main
          //          accent: colors.grey.darken3, //
          secondary: "#697084", //sub
          info: "#F8F8F8", //light-grey
          warning: "#FFD86D",
          error: "#FF8A35",
          //          success: colors.green.accent3
        },
      },
      config: {
        silent: false, // todo production env化
      },
      options: {
        customProperties: true,
      },
    },
  },
  pwa: {
		...
	},
  loadingIndicator: {
    name: "circle",
    color: "blue",
    background: "white",
  },
  // for logging crash log by sentry.io
  sentry: {
    dsn: process.env.SENTRY_DSN,
  },
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    parallel: false,
    extractCSS: true,
    extend(config, ctx) {
      config.devtool = ctx.isClient ? `eval-source-map` : "inline-source-map";
    },
  },
});

I’d appreciate any advice or solutions. Thank you!