Author Topic: vue3+vite5 Importing pqgrid-10.1.0 downloaded locally reports an error  (Read 240 times)

focallure

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 2
    • View Profile
vue3+vite5 Importing pqgrid-10.1.0 downloaded locally reports an error

Error content:
main.js:41 TypeError: e is not a function
at pqgrid.min.js:9:7908

Steps:
1. I downloaded the 10.1.0 version of pqgird from the forum and put it in the lib folder under my vite project

2. I manually added "pqgrid": "file:libs/paramquerypro" in package.json-dependencies, and then npm install

3. Use in my vue component
<script setup>
import pq from "pqgrid";
import 'pqgrid/localize/pq-localize-zh.js';

import 'pqgrid/pqgrid.min.css'
import 'pqgrid/pqgrid.ui.min.css'
import 'pqgrid/themes/bootstrap/pqgrid.css'
<script>

The last version of 9 I downloaded using npm worked fine, but after purchasing the pro version, I couldn't use 10.1.0 downloaded from the forum.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6323
    • View Profile
Re: vue3+vite5 Importing pqgrid-10.1.0 downloaded locally reports an error
« Reply #1 on: November 26, 2024, 11:42:23 am »
v10.1.0 when used locally is working fine with vue3 for me.

This is package.json of my project.

Code: [Select]
{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "pqgrid": "file:paramquery-10.1.0",
    "pqselect": "^2.0.1",
    "@types/jquery": ">=2.2.1",
    "@types/jqueryui": ">=1.12.21",
    "jquery": ">=2.2.1",
    "jquery-ui-pack": ">=1.12.3",
    "jszip": "2.5.0"   
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "no-irregular-whitespace":"off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

Please share a small project reproducing the error as attachment.

focallure

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 2
    • View Profile
Re: vue3+vite5 Importing pqgrid-10.1.0 downloaded locally reports an error
« Reply #2 on: November 26, 2024, 01:17:01 pm »
Hello, the following attachment is a reproduction of the problem

node -v   18.16.1

Because the upload limit is 196kb, I cleared the paramquerypro folder in the project. You need to manually put paramquery V10.1.0 in before running the project.

Download dependencies:  npm install
Run the project:  npm run dev

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6323
    • View Profile
Re: vue3+vite5 Importing pqgrid-10.1.0 downloaded locally reports an error
« Reply #3 on: November 26, 2024, 11:49:23 pm »
pqgrid is a commonjs module while Vite uses ES modules

so please add 'pqgrid' and 'pqgrid/localize/pq-localize-en.js' in vue.config.js

export default defineConfig({
  plugins: [commonjs(),vue()],
  optimizeDeps: { include: ['pqgrid','pqgrid/localize/pq-localize-en.js']} 
})