wallabyjs / quokka

Repository for Quokka.js questions and issues
https://quokkajs.com
1.18k stars 31 forks source link

SvelteKit path alias barrel export #956

Closed IwannabeRealnerD closed 6 months ago

IwannabeRealnerD commented 6 months ago

Issue description or question

Is this issue related to Quokka not outputting the expected results of your code?: Yes

https://github.com/wallabyjs/quokka/issues/864 I had issue with alias but the issue up there helped me to fix the issue I had. but I found out that there is another issue with SvelteKit path alias when the directory has barrel export file.

Sample code

// it works fine here - imported directly 
import { TEST_CONSTANT } from "./constants/testConstant";
const a = 3 + 4;

a;

TEST_CONSTANT;

// it doesn't work here - imported from barrel export file
import { TEST_CONSTANT } from "./constants";
const a = 3 + 4;

a;

TEST_CONSTANT;

Sample repository link

https://github.com/IwannabeRealnerD/khanne-sh/blob/ADD-quokkajs/src/quokkaTestNotWorking.ts

Quokka.js Console Output

​​​​​Quokka PRO 'quokkaTestNotWorking.ts' (node: v20.10.0, TypeScript: v5.0.4 + swc)​​​​
 
ERR_UNSUPPORTED_DIR_IMPORT <rootDir>/src/constants <rootDir>/src/quokkaTestNotWorking.js 

Code editor version

Cursor Version: 0.33.4 (VSCode Version: 1.86.2)

OS name and version

OSX

smcenlly commented 6 months ago

I'm assuming that you are using ESM (i.e. "type": "module" in your package.json)?

You will need to configure Quokka to run node with an option to allow importing directories with the experimental-specifier-resolution setting via Quokka configuration:

{
  "env": {
     "params": {
        "runner": "--experimental-specifier-resolution=node"
     }
  }
}
IwannabeRealnerD commented 6 months ago

Thank you for your suggestion but it still doesn't work.

{
  "env": {
     "params": {
        "runner": "--experimental-specifier-resolution=node"
     }
  }
}

I added this code to my .quokka.json file but it still doesn't work.

image
smcenlly commented 6 months ago

We tried the .quokka file on a new svelte kit project and we got a slightly different error message. There was a bug in Quokka that is fixed in Quokka for VS Code v1.0.644.

Can you please update to the latest version of Quokka and let us know if it fixes your problem? If not, it's likely that your .quokka file is not located in the correct location. It should be in your project root.

IwannabeRealnerD commented 6 months ago

I'm afraid it still doesn't work

image image image
smcenlly commented 6 months ago

I've uploaded our sample project that we originally used to reproduce your problem.

Can you please update our sample project to make it break the same way that you're seeing in your project so we can reproduce the problem?

IwannabeRealnerD commented 6 months ago

I tried to update the sample repository but I don't have permission to push the changes.

I reproduced the problem and it turns out that if I import something from svelte, it occurs the problem.

image image image
smcenlly commented 6 months ago

Could you please try installing vite-node to run your Quokka file instead of node.js? We think this may work for you as it will apply svelte transformations using vite.

You should be able to install vite-node with:

npm install vite-node --save-dev
IwannabeRealnerD commented 6 months ago

it's finally working now! Even without .quokka file!(quokka's v1.0.644 is necessary) Thank you so much.

image
smcenlly commented 6 months ago

Thanks for letting us know, it's great to hear.

There was definitely a bug in there that we fixed earlier. Seems like the rest was configuration.