Error when importing javascript modules (ViteJs?)
libero-developer opened this issue · 10 comments
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 '/node_modules/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?
@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
@Libero-Software Same issue here. I just migrated from Laravel Mix to Vite. Before it worked.
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.
I just had the same problem. Has anyone found a solution?
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!
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
It's fixed in v2, but I'll try to backport the fix to v1.
Great, thanks!
When are you planning to release V2?
V2 has been released, but is also breaks on production builds...


