Skip to content

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

@shidcordero

Description

@shidcordero

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


  • Operating System: Windows_NT
  • Node Version: v16.11.0
  • Nuxt Version: 2.16.0-27226092.034b9901
  • Package Manager: Yarn
  • Bundler: Webpack
  • User Config: target, telemetry, env, publicRuntimeConfig, privateRuntimeConfig, head, css, alias, loadingIndicator, plugins, components, buildModules, modules, nuxt-buefy, axios, dayjs, pwa, i18n, apollo, build, generate- Runtime Modules: nuxt-buefy@0.4.10, @nuxtjs/axios@5.13.6, @nuxtjs/pwa@3.3.5, nuxt-i18n@6.28.1, @nuxtjs/apollo@4.0.1-rc.5, @nuxtjs/dayjs@1.4.0
  • Build Modules: @nuxtjs/eslint-module@3.0.2, @nuxtjs/stylelint-module@4.0.0, @nuxt/bridge@3.0.0-27242401.39ed77e

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions