search

nuxt / bridge

🌉 Experience Nuxt 3 features on existing Nuxt 2 projects
MIT License
271 stars 29 forks source link

Cannot destructure property '__extends' of '_tslib_js__WEBPACK_IMPORTED_MODULE_0___default' #25

Closed shidcordero closed 8 months ago

shidcordero commented 2 years ago

Environment

Nuxt CLI v3.0.0-27242401.39ed77e 16:23:30 RootDir: D:\Documents\Office\Gistlens\Telecompaper\front-end 16:23:30 Nuxt project info: 16:23:30

Describe the bug

It throws this error in the console. Compile and build not showing any error

image

Removing defineNuxtConfig or adding bridge: false removes the error.

Reproduction

package.json

{
  "name": "test",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt",
    "generate": "nuxt generate",
    "postinstall": "npx sort-package-json && patch-package",
    "lint": "yarn lint:js && yarn lint:style",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore --fix .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "maz-get-theme": "maz get-theme --config ./maz-ui.config.js",
    "serve": "nuxt serve",
    "start": "nuxt start"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{scss,css,vue}": "stylelint"
  },
  "dependencies": {
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/dayjs": "^1.4.0",
    "@nuxtjs/pwa": "^3.3.5",
    "apollo-link-context": "^1.0.20",
    "apollo-link-error": "^1.1.13",
    "apollo-link-http": "^1.5.17",
    "apollo-link-retry": "^2.2.16",
    "apollo-link-ws": "^1.0.20",
    "core-js": "^3.18.3",
    "graphql": "^15.5.3",
    "lodash": "^4.17.21",
    "nuxt-buefy": "^0.4.8",
    "nuxt-edge": "latest",
    "nuxt-i18n": "^6.28.1",
    "vue-light-gallery": "^1.0.1",
    "vuelidate": "^0.7.6",
    "vuex-pathify": "^1.5.1"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxt/bridge": "npm:@nuxt/bridge-edge",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-lodash": "^3.3.4",
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^7.12.1",
    "husky": "^6.0.0",
    "lint-staged": "^11.1.2",
    "lodash-webpack-plugin": "^0.11.5",
    "node-sass": "^6.0.0",
    "patch-package": "^6.2.2",
    "prettier": "^2.3.2",
    "sass-loader": "10",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0",
    "webpack": "^5.37.1"
  }
}

nuxt.config.js

import { resolve } from 'path'
import LodashModuleReplacementPlugin from 'lodash-webpack-plugin'
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',
  telemetry: process.env.NUXT_TELEMETRY_DISABLED,
  // env variables accessible via proces.env
  env: {
    API_ROOT: process.env.API_ROOT,
    GRAPHQL_API: process.env.GRAPHQL_API,
    BASE_URL: process.env.BASE_URL,
    DEPLOYMENT_VERSION: process.env.DEPLOYMENT_VERSION
  },

  // public and private configs
  // available on both server and client side
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL,
    apiRootUrl: process.env.API_ROOT,
    graphQlApi: process.env.GRAPHQL_API,
    apiWsUrl: process.env.API_WS_URL,
    apiRestUrl: process.env.API_REST_URL,
    imgBaseUrl: process.env.IMG_BASE_URL
  },
  // available on server side
  privateRuntimeConfig: {},

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Telecompaper',
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content:
          'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
      },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: ['@assets/scss/core.scss'],

  // aliases directory paths
  alias: {
    '@authentication': resolve(__dirname, './authentication'),
    '@assets': resolve(__dirname, './assets'),
    '@utils': resolve(__dirname, './utils'),
    '@mutations': resolve(__dirname, './gql/mutations'),
    '@subscriptions': resolve(__dirname, './gql/subscriptions')
  },

  // loading config
  loadingIndicator: {
    name: 'circle',
    color: '#7367f0',
    background: 'white'
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '@/authentication/module' },
    { src: '@plugins/event-bus.js' },
    { src: '@plugins/vuelidate.js' }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: [
    '~/components',
    { path: '~/components/article', extensions: ['vue'] },
    { path: '~/components/navigation', extensions: ['vue'] },
    { path: '~/components/navigation/dropdowns', extensions: ['vue'] },
    { path: '~/components/user', extensions: ['vue'] },
    { path: '~/components/article', extensions: ['vue'] }
  ],

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/stylelint
    '@nuxtjs/stylelint-module'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/buefy
    'nuxt-buefy',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://i18n.nuxtjs.org/
    'nuxt-i18n',
    // https://github.com/nuxt-community/apollo-module
    '@nuxtjs/apollo',
    // https://github.com/nuxt-community/dayjs-module
    '@nuxtjs/dayjs'
  ],

  // Or you can customize
  'nuxt-buefy': {
    css: false,
    materialDesignIcons: true
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: process.env.API_URL,
    debug: true,
    https: false
  },

  // dayjs config (https://github.com/nuxt-community/dayjs-module)
  dayjs: {
    locales: ['en'],
    defaultLocale: 'en',
    plugins: ['utc', 'relativeTime', 'customParseFormat', 'calendar']
  },

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    workbox: {
      // by default the workbox module will not install the service worker in dev environment to avoid conflicts with HMR
      // only set this true for testing and remember to always clear your browser cache in development
      // dev: process.env.NODE_ENV === 'development'
    },
    manifest: {
      name: process.env.npm_package_name,
      lang: 'en',
      start_url: ''
    },
    meta: {},
    icons: {}
  },
  i18n: {
    locales: [
      {
        code: 'English',
        name: 'English',
        file: 'English.json'
      }
    ],
    strategy: 'no_prefix',
    lazy: true,
    langDir: 'locale/',
    defaultLocale: 'English',
    vueI18n: {
      fallbackLocale: 'English'
    }
  },
  apollo: {
    clientConfigs: {
      default: '~/plugins/apollo-config.js'
    },
    cookieAttributes: {
      expires: 1 // 1 day expiry
    },
    defaultOptions: {
      $query: {
        loadingKey: 'loading',
        fetchPolicy: 'cache-and-network'
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extractCSS: process.env.NODE_ENV === 'production',
    transpile: ['vue-agile', 'resize-detector', 'drawflow'],
    parallel: true,
    build: {
      plugins: [new LodashModuleReplacementPlugin()],
      module: {
        rules: [
          {
            test: /\.js$/,
            // Exclude transpiling `node_modules`
            exclude: /node_modules\//,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['env']
              }
            }
          }
        ]
      }
    },
    babel: {
      plugins: ['lodash'],
      presets: [
        [
          '@nuxt/babel-preset-app-edge',
          {
            corejs: { version: 3 }
          }
        ]
      ]
    },
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      config.resolve.symlinks = false
    }
  },

  // Configure the generation of your universal web application to a static web application.
  generate: {
    interval: 2000,
    fallback: '404.html'
  }
})

Additional context

No response

Logs

No response

danielroe commented 2 years ago

I'm closing this as there is no reproduction. Feel free to comment with one and I'll reopen!

joel-wenzel commented 2 years ago

@danielroe Here is a code sandbox with just nuxt-bridge, graphql and graphql-tag. https://codesandbox.io/s/tender-poitras-ofnpw?file=/pages/index.vue

This error also happens on a nuxt3 project but that can be worked around by using the following in the nuxt.config

build: {
        transpile: ['tslib', '@apollo/client', 'ts-invariant']
    },

However that same solution doesn't seem to work in nuxt-bridge

sppmstar commented 2 years ago

Running into that same issue with vue-apollo when trying to implement @nuxt/bridge ...

nuxt bridge version: 3.0.0-27304790.cad09fe vue-apollo version: 3.0.7

Screen Shot 2021-11-30 at 20 58 35
danielroe commented 2 years ago

If you're encountering this on Bridge, you can try this workaround:

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  alias: {
    tslib: 'tslib/tslib.es6.js'
  }
})

The issue is an upstream one with libraries like graphql-tag.

sppmstar commented 2 years ago

If you're encountering this on Bridge, you can try this workaround:

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  alias: {
    tslib: 'tslib/tslib.es6.js'
  }
})

The issue is an upstream one with libraries like graphql-tag.

Seems to work :) Thanks !

dargmuesli commented 2 years ago

@danielroe thank you for the workaround! <3 Would you mind linking the upstream issue you mentioned? :pray:

danielroe commented 2 years ago

The issue is summarised at https://v3.nuxtjs.org/concepts/esm/

viktorkrepak commented 2 years ago

If you're encountering this on Bridge, you can try this workaround:

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  alias: {
    tslib: 'tslib/tslib.es6.js'
  }
})

The issue is an upstream one with libraries like graphql-tag.

Seems work for me as well, previously had issue with nuxtjs/sentry package. Thank you!

LBrian commented 2 years ago

If you're encountering this on Bridge, you can try this workaround:

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  alias: {
    tslib: 'tslib/tslib.es6.js'
  }
})

The issue is an upstream one with libraries like graphql-tag.

The solution works like charm 🚀

sandrinejoy commented 7 months ago

The issue is summarised at https://v3.nuxtjs.org/concepts/esm/

@danielroe the link seems to be not working

danielroe commented 7 months ago

It is now https://nuxt.com/docs/guide/concepts/esm.