Symfony webpack localize file error reference to the file "jquery-ui-pack".

[philik]

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 ?

[paramvir]

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"   

[philik]

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

[philik]

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";

[paramvir]

Please do a clean install after updating package.json

Delete the node_modules folder and run npm install or yarn

[philik]

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.

[paramvir]

Thanks for sharing your solution and feedback!