Can't make it work with Nuxt2.15.8

marco-varias commented 2 years ago

Reproduction

I'm currently trying to migrate our vuex-orm project to use pinia + pinia-orm. Sadly though, I haven't been able to install pinia(-orm) without getting errors.

I already tried the steps mentioned in the docs about Nuxt2, making my package.json look like:

{
  // general package.json stuff,
  "resolutions": {
    "nanoid": "3.3.4"
  },
  "dependencies": {
    "@dansmaculotte/nuxt-zendesk": "0.4.1",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/composition-api": "^0.32.*",
    "@nuxtjs/style-resources": "^1.0.0",
    "@pinia-orm/nuxt": "^1.0.18",
    "@pinia/nuxt": "0.2.1",
    "@tinymce/tinymce-vue": "^2.1.0",
    "@toast-ui/vue-image-editor": "^3.14.0",
    "@tobjoern/vue-color-gradient-picker": "git+https://github.com/Tobjoern/vue-color-gradient-picker.git",
    "@vuex-orm/core": "0.31.13",
    "core-js": "^3.8.3",
    "cross-env": "^5.2.0",
    "element-ui": "^2.13.0",
    "lodash": "^4.17.20",
    "lodash.throttle": "^4.1.1",
    "messagebird": "^3.6.2",
    "nanoid": "3.3.4",
    "nuxt": "^2.15.8",
    "nuxt-dropzone": "^1.0.4",
    "nuxt-gmaps": "^1.2.10",
    "nuxt-intercom": "^1.0.8",
    "nuxt-jsonld": "^1.5.0",
    "nuxt-property-decorator": "^2.9.1",
    "nuxt-purgecss": "^1.0.0",
    "nuxt-user-agent": "^1.2.2",
    "pinia": "^2.0.18",
    "pinia-orm": "^1.0.0-rc.5",
    "tinymce": "^5.5.1",
    "vue-agile": "^1.1.3",
    "vue-cool-lightbox": "^2.6.3",
    "vue-echo": "^1.0.2",
    "vue-i18n": "^8.21.1",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/eslint-parser": "^7.13.10",
    "@babel/preset-env": "^7.18.10",
    "@fortawesome/fontawesome-pro": "^5.15.0",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/laravel-echo": "^1.0.3",
    "@nuxtjs/tailwindcss": "^3.4.2",
    "@types/jest": "^28.1.6",
    "@vue/test-utils": "^1.0",
    "@vue/vue2-jest": "^28.0.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^28.1.3",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.5.0",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "jest-serializer-vue": "^2.0.2",
    "nodemon": "^1.18.10",
    "prettier": "^2.2.1",
    "pusher-js": "^5.1.1",
    "ts-jest": "^28.0.7",
    "typescript": "^4.7.4",
    "vue": "2.6.14",
    "vue-jest": "^3.0.7",
    "vue-server-renderer": "2.6.14",
    "vue-template-compiler": "2.6.14"
  }
}

I still get the errors from Nuxt stating:

Module parse failed: Unexpected token (287:39) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | const type = model[this.morphType]; | const id = model[this.morphId]; > const related = dictionary[type]?.[id] ?? null; | model.$setRelation(relation, related); | });

Making me think the ?? operator is not supported. My nuxt.config.js is as follows as well:

import webpack from 'webpack'

export default {
  mode: 'universal',
  // Disable annoying notice if we want to send anonymous data.
  telemetry: false,
  /*
   ** Headers of the page
   */
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
  },
  router: {
    prefetchLinks: false,
    middleware: ['Server/userAgent'],
  },

  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#f00', height: '4px' },

  /*
   ** Global CSS
   */
  css: [
    { src: '@fortawesome/fontawesome-pro/css/all.min.css', lang: 'css' },
    '@/assets/css/tailwind.css',
  ],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '@/plugins/ui-store',
    '@/plugins/axios',
    '@/plugins/graphql/plugin',
    '@/plugins/vue-agile',
    '@/plugins/path-handler.js',
    '@/plugins/storage.js',
    '@/plugins/jsonld',
  ],

  /*
   ** Server middleware
   */
  serverMiddleware: ['@/middleware/Server/noSsr'],

  /*
   ** Nuxt.js modules
   */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    'nuxt-user-agent',
    '@pinia-orm/nuxt',
    // '~/modules/caching/caching'
  ],
  /*
  cache: {

    key(route, context) {
      if (context.req.originalUrl.startsWith('/cms')) {
        return false
      }

      return true
    },

    store: {
      type: 'filesystem',
      max: 100,
      ttl: 60
    }
  },

  auth: {
    debug: false,
    cookie: {
      options: {
        sameSite: 'strict',
      },
    },
    rewriteRedirects: true,
    redirect: {
      login: '/login',
      logout: '/login',
      callback: false,
      home: false,
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/auth/login',
            method: 'post',
            propertyName: 'token',
          },
          logout: { url: '/auth/logout', method: 'post' },
          user: { url: '/auth/user', method: 'get', propertyName: 'user' },
        },
        // tokenRequired: true,
        // tokenType: 'bearer',
      },
    },
    plugins: [
      { src: '@/plugins/i18n', mode: 'client' },
      { src: '~/plugins/echo.js', mode: 'client' },
      '@/plugins/permissions',
    ],
  },
  buildModules: [
    '@nuxtjs/tailwindcss',
    'nuxt-purgecss',
    '@nuxt/typescript-build',
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],

  /*
   ** PurgeCSS
   ** https://github.com/Developmint/nuxt-purgecss
   */
  purgeCSS: {
    // enabled: process.env.NODE_ENV === 'production', // or `false` when in dev/debug mode
    enabled: false, // TEMP SET ON FALSE TO REMOVE CSS BUGS FOR NOW
    whitelist: [
      'static/css/element-ui/theme-modual/index.css',
      'vue-color-gradient-picker/dist/index.css',
      'assets/css/main.css',
      'body',
      'html',
      'nuxt-progress',
    ],
    whitelistPatternsChildren: [/^el-/, /^fa-/, /^v-modal/],
  },
  buildDir: '.nuxt/build',
  build: {
    splitChunks: {
      layout: true,
      pages: true,
    },
    optimization: {
      splitChunks: {
        // Force Webpack to split some vendor packages
        cacheGroups: {
          // https://stackoverflow.com/questions/48985780/webpack-4-create-vendor-chunk
          tinyMceVendor: {
            test: /[\\/]node_modules[\\/](tinymce)[\\/]/,
            name: 'tinymcevendor',
          },
          lodashVendor: {
            test: /[\\/]node_modules[\\/](lodash)[\\/]/,
            name: 'lodashvendor',
          },
          elementUiVendor: {
            test: /[\\/]node_modules[\\/](element-ui)[\\/]/,
            name: 'elementuivendor',
          },
          vendor: {
            test: /[\\/]node_modules[\\/](!tinymce)(!lodash)(!element-ui)[\\/]/,
            name: 'vendor',
          },
        },
      },
    },
    transpile: ['vue-agile', 'pinia-orm'],
    /*
     ** PostCSS setup
     */
    babel: {
      plugins: [
        ['@babel/plugin-proposal-private-methods', { loose: true }],
        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: '~static/css/element-ui/theme-modual/',
          },
        ],
      ],
    },
    postcss: {
      // Add plugin names as key and arguments as value
      // Disable a plugin by passing false as value
      plugins: {
        'postcss-url': {},
        cssnano: {
          preset: 'default',
          discardComments: { removeAll: true },
          zIndex: false,
        },
      },
      // Change the postcss-preset-env settings
      preset: {
        stage: 0,
        autoprefixer: {
          cascade: false,
          grid: false,
        },
      },
    },
    extractCSS: { ignoreOrder: true },
    plugins: [
      new webpack.ProvidePlugin({
        mapboxgl: 'mapbox-gl',
      }),
      new webpack.NormalModuleReplacementPlugin(
        /element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/,
        'element-ui/lib/locale/lang/en'
      ),
    ],
  },
}

Steps to reproduce the behavior

I've tried installing all the latest versions of vue and such
I've tried installing specific older versions without any luck
Expected behavior

A working Nuxt2 installation.

Actual behavior

The error mentioned above.

CodeDredd commented 2 years ago

i hate this bug with webpack4 and i dont know why yet...

CodeDredd commented 2 years ago

@marco-varias For now you use "v1.0.0-rc.4" which seems to work. Have to find out now what is wrong with rc.5

CodeDredd commented 2 years ago

@marco-varias Now with the new release everything should be fine. How to use it nuxt2 is described here: https://pinia-orm.codedredd.de/guide/nuxt/setup#usage-on-nuxt-2

bradley-varol commented 1 year ago

Edit - fixed this by adding 'pinia-orm' to the build transpile array. Wasn't sure this was needed with Nuxt Bridge but since i'm still using Webpack it seems it is :)

i am seeing this error with pinia-orm 1.2.2, pinia-orm/nuxt 1.1.4, and Nuxt Bridge:

 ERROR  in ./node_modules/pinia-orm/dist/index.mjs                                                                                                                                                                                                                                                                                                                                         friendly-errors 16:56:32

Module parse failed: Unexpected token (83:39)                                                                                                                                                                                                                                                                                                                                              friendly-errors 16:56:32
File was processed with these loaders:
 * ./node_modules/@nuxt/bridge/node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.
|       const type = model[this.morphType];
|       const id = model[this.morphId];
>       const related = dictionary[type]?.[id] ?? null;
|       model.$setRelation(relation, related);
|     });
                                                                                                                                                                                                                                                                                                                                                                                           friendly-errors 16:56:32
 @ ./plugins/pinia-orm.js 3:0-38 5:18-27
 @ ./.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

CodeDredd / pinia-orm