Skip to content
This repository was archived by the owner on Jun 27, 2024. It is now read-only.

Error when importing javascript modules (ViteJs?) #68

Closed
libero-developer opened this issue Jul 4, 2022 · 10 comments
Closed

Error when importing javascript modules (ViteJs?) #68

libero-developer opened this issue Jul 4, 2022 · 10 comments

Comments

@libero-developer
Copy link

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:

image

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?

@BenjaminDelacombaz
Copy link

@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
Copy link

anscharivs commented Jul 4, 2022

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

image

@libero-developer
Copy link
Author

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
Copy link

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

@libero-developer
Copy link
Author

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
Copy link

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

image

@PyIter
Copy link
Contributor

PyIter commented Jul 6, 2022

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
Copy link
Contributor

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

@libero-developer
Copy link
Author

Great, thanks!

When are you planning to release V2?

@pascalbaljet
Copy link
Contributor

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

#69

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants