ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: philik on May 07, 2024, 02:28:30 pm
-
Hello,
I have a problem with pqgrid 9.1.1 install with Symfony 7/webpack
My config :
Init packages and dependencies
File : /package.json
"devDependencies":
"@types/jquery": "^3.5.29",
"dependencies":
"@types/jqueryui": "^1.12.22",
"jquery": "^3.7.1",
"jquery-ui": "^1.13.3",
"jquery-ui-pack": "^1.13.3",
"jszip": "^3.10.1",
"pqgrid": "file:../../_packages/paramquery-9.1.1"
No problem with npm update.
pqgrid folder created in /nodes_modules
Adding a new webpack entry
File : /webpack.config.js
.addEntry("grid", "./assets/grid/_grid.ts")
(Note : same trouble with using js or ts, /assets/grid/_grid.js or /assets/grid/_grid.ts)
Import pqgrid in my asset file
File : /assets/grid/_grid.ts
import pq from "pqgrid";
import "pqgrid/localize/pq-localize-fr.js";
> npm run build
import pq from 'pqgrid'; // work fine
import 'pqgrid/localize/pq-localize-fr.js'; // error
Module build failed: Module not found:
"../../_packages/paramquery-9.1.1/localize/pq-localize-fr.js" contains a reference to the file "jquery-ui-pack".
This file can not be found, please check it for typos or update it if the file got moved.
Is someone can help me ?
-
Please remove jquery-ui from dependencies section and include "@types/jquery" in the dependencies section.
As a side note, use v2.5.0 of jszip
A typical dependencies section from package.json of a working project.
"pqgrid": "^9.1.1",
"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"
-
Thank you for your help.
Unfortunately, this information has not resolved the problem.
Therefore, I created a basic Symfony web project by adding only the specified packages.
And it seems that the problem is due to the use of a local path for the installation of pqgrid
Am I making a mistake when installing the pro version from a local folder?
How to reproduce :
install all packages and pqgrid with the eval version
npm install pqgrid
> package.json
"dependencies": {
"@types/jquery": ">=2.2.1",
"@types/jqueryui": ">=1.12.21",
"jquery": "^3.7.1",
"jquery-ui-pack": ">=1.12.3",
"jszip": "2.5.0",
"pqgrid": "^9.1.1",
"pqselect": "^2.0.1"
}
npm run build > no problem
webpack compiled successfully
now remove the eval version and install pqgrid from fresh pro version download local folder
as recommended in the documentation
npm remove pqgrid
npm add ../../../_packages/paramquery-9.1.1
> package.json
"dependencies": {
"@types/jquery": ">=2.2.1",
"@types/jqueryui": ">=1.12.21",
"jquery": "^3.7.1",
"jquery-ui-pack": ">=1.12.3",
"jszip": "2.5.0",
"pqgrid": "file:../../../_packages/paramquery-9.1.1",
"pqselect": "^2.0.1"
}
npm run build > ERROR Failed to compile with 101 errors
Module build failed: Module not found:
"../../../_packages/paramquery-9.1.1/localize/pq-localize-fr.js" contains a reference to the file "jquery-ui-pack".
This file can not be found, please check it for typos or update it if the file got moved.
... and 100 other errors
Entrypoint app [big] 3.7 MiB = runtime.js 14.6 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-b36057.js 1.09 MiB app.css 741 bytes app.js 2.59 MiB
webpack compiled with 101 errors
-
PS : my simple app.js webpack entry file
import "./bootstrap.js";
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you import will output into a single css file (app.css in this case)
import "./styles/app.css";
import pq from "pqgrid";
import "pqgrid/localize/pq-localize-fr.js";
-
Please do a clean install after updating package.json
Delete the node_modules folder and run npm install or yarn
-
Thank you for your answers.
Delete node_modules folder and package-lock.json have no effect on this issue.
I found the solution, but I don't understand exactly where the problem was coming from.
Everything works if I put the source folder of pqgrid at the root of the Symfony folder.
"pqgrid": "file:packages/paramquery-9.1.1" works fine
But it doesn't work if I put the pqgrid folder outside, one (or more) level up.
"pqgrid": "file:../packages/paramquery-9.1.1" do not work anymore
It's as if webpack can't interpret the path with level up ../
I hope this solution can help other users
Thank you for all.
For me, this ticket is closed.
-
Thanks for sharing your solution and feedback!