wallabyjs / quokka

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

Normal import not working #968

Closed DHFW closed 1 month ago

DHFW commented 1 month ago

Issue description or question

When I'm in my Typescript NodeJS project, Quokka snaps are not working as expected.

Non working code

import { faker } from '@faker-js/faker/locale/nl' // Cannot find module @faker-js/faker/locale/nl
{
  {
    const x = faker.helpers.arrayElement(['A', 'B'])
    x  
  }
}

Working code, however, for use further down in the file I want to use the locale/nl import:

import { faker } from '@faker-js/faker'
{
  {
    const x = faker.helpers.arrayElement(['A', 'B'])
    x  'B' 
  }
}

This is strange because the imports work when using the locale import. However, not when using Quokka.

I also tried a simple Node JS project setup like the sample repo and then it was also not working:

import { faker } from "@faker-js/faker/locale/nl";
{
  {
    const x = faker.helpers.arrayElement(['A', 'B', 'C'])
    x
  }
}

Working:

import { faker } from "@faker-js/faker";
{
  {
    const x = faker.helpers.arrayElement(['A', 'B', 'C'])
    x
  }
}`»
  'C'
  «`

What is strange that I cannot use the "@faker-js/faker/dist/locale/nl" import my project as import (TypeScript than complains). I guess it has something to do with how imports are handled in Quokka...

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

Sample code

See above

Sample repository link

If the issue can not be reproduced just using the quokka file above (for example because it requires/imports some files from your project), please create a small repository where the issue can be reproduced.

Quokka.js Console Output

Cannot find module '@faker-js/faker/locale/nl' 
Require stack: 
- <rootDir>/index.js 
  ​​​​​at ​​​​​​index.ts:1:1​
 
Cannot read properties of undefined (reading 'faker') 
  ​​​​​at ​​​​​​​​quokka_snap​​​ ​index.ts:6:5​

Code editor version

Visual Studio Code v1.94.1

OS name and version

OSX 14.6.1 (23G93)

smcenlly commented 1 month ago

If you are using TypeScript, unless your package.json has "type": "module", then Quokka will try and run your TypeScript file using commonjs, and will try to add support for ESM using standard-things/esm. I expect this is the cause of your problem.

Are you able to add "type": "module" to your package.json to see if it fixes the problem?

Alternatively, you may explicitly configure Quokka to run using node built-in ESM instead of standard-things/esm with a Quokka configuration file in your project root:

.quokka

{
  "stdEsm": false,
  "nativeEsm": true
}
DHFW commented 1 month ago

Hi @smcenlly, you are right. "type": "module" works. However, I cannot use that (yet) in my project (Azure Functions 4.0 but some deps are not able to work with it yet).

The .quokka file also works. Thank you!