Develop Reference

Svelte: Uncaught ReferenceError: exports is not defined

Background
I am trying to use dgraph-js-http in a Svelte application.
Error
The initial error I was facing was:
Uncaught ReferenceError: buffer is not defined
<anonymous> http://localhost:5000/build/bundle.js:6947
I'm including this as maybe my solution to this was not the best, and that hopefully there is a way to solve both this issue, and the current blocker issue.
However, after a trial-and-error approach (see below for the various things I've tried) I'm now stuck.
Current error
After solving the above error, I am now blocked on this error:
Uncaught ReferenceError: define is not defined
Attempts to resolve
None of the following have worked.
Add <script src="https://bundle.run/stream#0.0.2"></script> to index.html
Run npm install stream
Add import * as Stream from "stream" to the App.svelte file
Add import * as Stream from "stream" to the stores.js file
Add preferBuiltins:true to rollup.config.js
Add npm install --save-dev rollup-plugin-node-polyfills
Add preferBuiltins:false to rollup.config.js. This resolved prior errors and resulted in the new error of: Uncaught ReferenceError: define is not defined
Add npm install --save define. This, now results in the current blocker:
Uncaught ReferenceError: exports is not defined

I think you missed type: "module" attribute in package.json. Here, the type attribute represents whether the type of javascript interpreter is commonjs or babel. type: "module" indicates that you are going to use babel as the ECMA script interpreter.

Warning in Jest: 'Native module not found/exported - are you sure its linked properly?'

I have a react-native expo bare workflow app where I'm seeing a warning in my console only when running tests in jest the packages in question work when used in my app (tested unimodules works via using the Constants in there), and I've re-followed the instructions to set them up multiple times: https://docs.expo.io/bare/installing-unimodules/
These warnings don't prevent my app running or my tests, but they clog up the terminal as they repeat for every set of tests making it a struggle to read. (I'm aware I can run jest with the --silent flag but this will obviously hide all the other output like actual errors e.g. wrap in act(() => { }) errors)
The warnings:
console.warn
The "UMNativeModulesProxy" native module is not exported through NativeModules; verify that #unimodules/react-native-adapter's native code is linked properly
at Object.<anonymous> (node_modules/#unimodules/react-native-adapter/src/NativeModulesProxy.native.ts:41:11)
at Object.<anonymous> (node_modules/#unimodules/react-native-adapter/src/index.ts:2:1)
console.warn
No native ExponentConstants module found, are you sure the expo-constants's module is linked properly?
at Object.<anonymous> (node_modules/expo-constants/src/Constants.ts:25:11)
at Object.<anonymous> (node_modules/expo-asset/src/PlatformUtils.ts:3:1)

Typescript compile with imports

So I have two files: a.ts and b.ts. b exports something for a to use. The TypeScript compiler handles this fine, but refuses to create valid output for a browser. Example:
import { test } from "./b";
console.log(test);
b.ts
export const test = "quest";
and now I try compiling it:
$ tsc --lib dom,es2018 --target ES2018 --out test.js a.ts b.ts
b.ts:1:1 - error TS6131: Cannot compile modules using option 'out' unless the '--module' flag is 'amd' or 'system'.
1 export const test = "quest";
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 1 error.
hm, weird. Okay, let's try using --module. If I use amd a browser that loads test.js will tell me: ReferenceError: define is not defined. If I try system it says: ReferenceError: System is not defined.
Okay, that's not working. Let's try without setting a single output file with --out. That gives me:
SyntaxError: import declarations may only appear at top level of a module a.js:1
SyntaxError: export declarations may only appear at top level of a module b.js:1
So based on this, it seems like my only options for using typescript are:
Put all code in a single file
Use an external library like require.js or webpack
Learn what a module is and if/how it can be used in a browser
Or am I missing something? How do I compile Typescript using imports without adding libraries/modules ?
TypeScript version: 3.8.3

Syntax error
please correct this
export const test = "quest";
to
export test = "quest";
No need to add any const here while exporting

How to import nodejs module "module" via es6 import to create "require" function with "createRequire" in order to use node's "require"?

I am writing a JavaScript es6 module which contains "Mocha" test-cases which test a JavaScript es6 module containing the actual functionality of my app.
I am trying to import nodejs module "module" via es6 import like so:
import { createRequire } from 'module';
Next I create a "require" function by calling "createRequire":
const require = createRequire(import.meta.url);
Afterwards I try to use "require" to import nodejs modules:
const chai = require('chai');
const assert = chai.assert;
I put that all together in a HTML file, started a web-server and opened the HTML file in the browser.
Unfortunately, the first line gives me an error in the console of the Browser Firefox:
TypeError: Error resolving module specifier: module
The browser Chromium gives me the following error message:
Uncaught TypeError: Failed to resolve module specifier "module". Relative references must start with either "/", "./", or "../".
Actually, giving relative references is not working either:
I installed the nodejs module "module" (npm install module) and used a relative path to that module. Unfortunately, the browser does not know how to load the module because no concrete entrypoint is given.
I just tried stick to the manual but had no luck:
https://nodejs.org/api/modules.html#modules_module_createrequire_filename
What do you think? How should I change my code so that this works?
Many thanks in advance for your valuable advice.

I hope you've installed the module using 'npm install module' command, try using commonJS pattern and include the module in the following way
const { createRequire } = require('module');

require() is used to load files in node, and module is a node module.
These things don't exist in browsers.
You do these things, and running mocha tests in node. There should be no browser, just a command line.

Dynamic imports in typescript broken either in tests or in webpack runtime

I have a TypeScript project that uses webpack to compile the bundle. I'm using Jest + ts-jest for testing.
I'm trying to get dynamic imports working but can only seem to get it working either in the tests or the bundle, but not both. In this case the library I'm trying to dynamically import is zxcvbn but I imagine this might apply to any library.
E.g. I have a script:
const result = import('zxcvbn').then(zxcvbn => zxcbn('foo'))
When testing this, the test runs fine. It also compiles the bundle with no problems. However when run in the browser I get:
Unhandled Rejection (TypeError): zxcvbn is not a function
So to fix this I added "allowSyntheticDefaultImports": true to my tsconfig.json and changed the import line to:
const result = import('zxcvbn').then(({default: zxcvbn}) => zxcbn('foo'))
Now the browser runtime works fine but the test fails with
TypeError: zxcvbn is not a function.
I also tried using a extended tsconfig.test.json for the tests with "allowSyntheticDefaultImports": false but this results in a compilation error:
Property 'default' does not exist on type '(password: string, userInputs?: string[] | undefined) => ZXCVBNResult'
Any idea how to fix this? I'm currently not using Babel, just the TypeScript compiler + Webpack for bundling.