Error when importing javascript modules (ViteJs?)

[libero-developer]

Using Laravel 9 (jetstream), Inertia.js, Vue3, ViteJs.

I used this package before, and got it working. The main difference now is that i use ViteJS. Not sure if this is related.

I get the following error when importing this (nice) package:

_Uncaught (in promise) SyntaxError: The requested module '/nodemodules/qs/lib/index.js?v=57eb2887' does not provide an export named 'default' (at InteractsWithQueryBuilder.vue:2:8)

I`m using the example from de documentation:

<script>
import { InteractsWithQueryBuilder, Tailwind2 } from '@protonemedia/inertiajs-tables-laravel-query-builder';

export default {
  mixins: [InteractsWithQueryBuilder],

  components: {
    Table: Tailwind2.Table
  },

  props: {
    users: Object
  }
};
</script>

Am i doing something wrong or is this a bug?

[BenjaminDelacombaz]

@Libero-Software I have the same issue but only with npm run dev not with npm run build. I have just made the migration to ''ViteJS''. For me it's related to this migration

[anscharivs]

@Libero-Software Same issue here. I just migrated from Laravel Mix to Vite. Before it worked.

[libero-developer]

The problem is the: import qs from "qs";

If you remove this, the table will render in vitejs's 'yarn run dev'.

But the table won't work, because 'stringify' is used from the 'qs' package.

[Havenstd06]

I just had the same problem. Has anyone found a solution?

[libero-developer]

I can see in the repo that a version 2.0 is being developed with ViteJs. This will probably solve the problem. @pascalbaljet Do you have a release date in mind? Thanks!

[Havenstd06]

When I build in production I get this message if it helps.

[PyIter]

Vite doesnt support module.exports {} / require(), only export default {} / import .. from .. (ES6 syntax) node_modules with require(); and module.exports should be changed or replaced or ported

Vite caches node_modules in node_modules/.vite. Rerunning npm run dev does not clear this cache.

Steps I took to work around this problem are as follows:

node_modules/qs/index.js replace content with:

'use strict';

import stringify from './stringify';
import parse from './parse';
import formats from './formats';

export default {
    formats: formats,
    parse: parse,
    stringify: stringify
};

node_modules/qs/formats.js

replace line 11

module.exports = {

with

export default {

node_modules/qs/utils.js

replace line 3

var formats = require('./formats');

with

import formats from './formats';

replace line 241

module.exports = {

with

export default {

node_modules/qs/parse.js

replace line 3

var utils = require('./utils');

with

import utils from './utils';

replace line 239

module.exports = function (str, opts) {

with

export default function (str, opts) {

node_modules/qs/stringify.js

replace line 3

var getSideChannel = require('side-channel');

with

// var getSideChannel = require('side-channel');

replace line 4,5

var utils = require('./utils');
var formats = require('./formats');

with

import utils from './utils';
import formats from './formats';

replace line 241

module.exports = function (object, opts) {

with

export default function (object, opts) {

replace line 169

var valueSideChannel = getSideChannel();

with

var valueSideChannel = new WeakMap();

replace line 285

var sideChannel = getSideChannel();

with

var sideChannel = new WeakMap();

After changing the lines remove the node_modules/.vite folder and run npm run dev. Then the table should be functioning again.

getSideChannel contains code or leads to code that that currently cannot easily or will not be changed to ES6 syntax. getSideChannel returns a (equivelant) of WeakMap which is available in most browsers. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

Edited: after some time (idle) parse.js also throws an error, so also change parse.js

Maybe urlsearchparameters could be used instead of qs in the next version? weakmap and urlsearchparameters can both be polyfilled

[pascalbaljet]

It's fixed in v2, but I'll try to backport the fix to v1.

[libero-developer]

Great, thanks!

When are you planning to release V2?

[pascalbaljet]

V2 has been released, but is also breaks on production builds...

https://github.com/protonemedia/inertiajs-tables-laravel-query-builder/issues/69