Allow VS Code Quokka samples (New File) to run with incompatible Quokka configuration

[Alexzanderk]

Issue description or question

When I create quokkajs new file with the sample

I get an error output below

I use global config and all packages installed here is my config:

{
  "pro": true,
  "stdEsm": false,
  "nativeEsm": true,
  "babel": {
    "polyfill": true,
    "presets": [["@babel/preset-env", { "targets": { "node": "current" } }], "@babel/preset-typescript"]
  },
  "plugins": ["jsdom-quokka-plugin"]
}

package.json

{
  "dependencies": {
    "@babel/preset-typescript": "^7.3.3",
    "jsdom-quokka-plugin": "^1.0.14",
    "ts-node": "^8.3.0",
    "tsconfig-paths": "^3.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@types/node": "^12.6.8"
  }
}

Quokka.js Console Output

{"message":"Cannot find module '@babel/preset-env'\nRequire stack:\n- ./node_modules/@babel/core/lib/config/files/plugins.js\n- ./node_modules/@babel/core/lib/config/files/index.js\n- ./node_modules/@babel/core/lib/index.js\n- /Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/runners/node/[email protected]/initializer.js\n- /Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/server.js","stack":"Error: Cannot find module '@babel/preset-env'\nRequire stack:\n- ./node_modules/@babel/core/lib/config/files/plugins.js\n- ./node_modules/@babel/core/lib/config/files/index.js\n- ./node_modules/@babel/core/lib/index.js\n- /Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/runners/node/[email protected]/initializer.js\n- /Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/server.js\n    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)\n    at resolve (internal/modules/cjs/helpers.js:94:19)\n    at resolveStandardizedName (./node_modules/@babel/core/lib/config/files/plugins.js:100:7)\n    at resolvePreset (./node_modules/@babel/core/lib/config/files/plugins.js:48:10)\n    at loadPreset (./node_modules/@babel/core/lib/config/files/plugins.js:67:20)\n    at createDescriptor (./node_modules/@babel/core/lib/config/config-descriptors.js:154:9)\n    at ./node_modules/@babel/core/lib/config/config-descriptors.js:109:50\n    at Array.map (<anonymous>)\n    at createDescriptors (./node_modules/@babel/core/lib/config/config-descriptors.js:109:29)\n    at createPresetDescriptors (./node_modules/@babel/core/lib/config/config-descriptors.js:101:10)\n    at ./node_modules/@babel/core/lib/config/config-descriptors.js:58:104\n    at cachedFunction (./node_modules/@babel/core/lib/config/caching.js:62:27)\n    at cachedFunction.next (<anonymous>)\n    at evaluateSync (./node_modules/gensync/index.js:251:28)\n    at sync (./node_modules/gensync/index.js:89:14)\n    at presets (./node_modules/@babel/core/lib/config/config-descriptors.js:29:84)\n    at mergeChainOpts (./node_modules/@babel/core/lib/config/config-chain.js:416:26)\n    at ./node_modules/@babel/core/lib/config/config-chain.js:374:7\n    at Generator.next (<anonymous>)\n    at buildRootChain (./node_modules/@babel/core/lib/config/config-chain.js:73:36)\n    at buildRootChain.next (<anonymous>)\n    at loadPrivatePartialConfig (./node_modules/@babel/core/lib/config/partial.js:101:62)\n    at loadPrivatePartialConfig.next (<anonymous>)\n    at loadFullConfig (./node_modules/@babel/core/lib/config/full.js:57:46)\n    at loadFullConfig.next (<anonymous>)\n    at Function.<anonymous> (./node_modules/@babel/core/lib/config/index.js:33:43)\n    at Generator.next (<anonymous>)\n    at evaluateSync (./node_modules/gensync/index.js:251:28)\n    at Function.sync (./node_modules/gensync/index.js:89:14)\n    at ./node_modules/@babel/core/lib/config/index.js:43:61\n    at OptionManager.init (./node_modules/@babel/core/lib/index.js:257:36)\n    at compile (/Users/admin/.quokka/node_modules/@babel/register/lib/node.js:61:42)\n    at compileHook (/Users/admin/.quokka/node_modules/@babel/register/lib/node.js:102:12)\n    at Module._compile (/Users/admin/.quokka/node_modules/pirates/lib/index.js:93:29)\n    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)\n    at Object.newLoader [as .js] (/Users/admin/.quokka/node_modules/pirates/lib/index.js:104:7)\n    at Module.load (internal/modules/cjs/loader.js:928:32)\n    at Function.Module._load (internal/modules/cjs/loader.js:769:14)\n    at Module.require (internal/modules/cjs/loader.js:952:19)\n    at Module.n.require (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/server.js:28:3633)\n    at Module.n.require (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/server.js:28:3633)\n    at Module.n.require (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/server.js:28:3633)\n    at Module.n.require (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/server.js:28:3633)\n    at require (internal/modules/cjs/helpers.js:88:18)\n    at /Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/runners/node/[email protected]/initializer.js:14:7064\n    at Array.forEach (<anonymous>)\n    at u.<anonymous> (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/runners/node/[email protected]/initializer.js:14:7008)\n    at n (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/runners/node/[email protected]/initializer.js:14:1137)\n    at Object.next (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/runners/node/[email protected]/initializer.js:14:432)\n    at /Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/runners/node/[email protected]/initializer.js:14:331\n    at new Promise (<anonymous>)\n    at __awaiter (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/runners/node/[email protected]/initializer.js:14:125)\n    at u.quokkaStackTraceMarker [as _onStart] (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/runners/node/[email protected]/initializer.js:14:4120)\n    at u.start (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/server.js:26:1675)\n    at F.in:run (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/server.js:20:19887)\n    at WebSocket.<anonymous> (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/server.js:20:17400)\n    at WebSocket.emit (events.js:315:20)\n    at Receiver.ontext (/Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/node_modules/ws/lib/WebSocket.js:841:10)\n    at /Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/node_modules/ws/lib/Receiver.js:536:18\n    at /Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/node_modules/ws/lib/Receiver.js:368:7\n    at /Users/admin/.vscode/extensions/wallabyjs.quokka-vscode-1.0.335/dist/wallaby/node_modules/ws/lib/PerMessageDeflate.js:249:5\n    at afterWrite (internal/streams/writable.js:4 

Code editor version

Visual Studio Code v1.48?

OS name and version

OSX - Big Sur

[smcenlly]

The problem in your case is that your global Quokka configuration is causing our samples to fail.

If you have configured Quokka to use nativeEsm: true, the Quokka file must be saved with an .mjs extension for Quokka to run on your file. This means that the examples will not work until you save them to disk with an .mjs extension.

Also, I can see that you have configured babel for use in your global configuration. Depending on the project that you are using this may also cause problems. Quokka will first try and resolve your node_module dependencies from your local project and then will use its global dependencies if no local dependency can be found. Some of the babel internal code goes looking for its internal babel dependencies outside of normal node_module resolution, which may be what is causing your "Cannot find module '@babel/preset-env'" error.

An alternative to saving the samples to disk with an .mjs extension and bypassing the use of babel for our samples (which is not required) is to either have a customer .quokka configuration for a project when you want to open samples, or add the following snippet to the top of your Quokka example code (you will need to add this after the file has been opened).

+ ({ "babel": false, "nativeEsm": false  })
const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

---

I'll leave this issue open for now and update the title to reflect as a request to allow Quokka examples to run with incompatible Quokka configuration settings. From a technical perspective, there may be some limitations for us being able to easily support this.