I have a simple javascript function in an example.js file placed inside the node js public directory.
I am using jest for unit testing.
The problem is if I write the following in the example.js javascript file in the public folder:
module.exports.myFunction = myFunction;
Jest test file is able to import it, using require() and perform tests, however when I run the web application, the browser complains when I service the page containing this javascript:
Uncaught ReferenceError: module is not defined
What is the correct way to test javascript files in the public directory of the node application?
Using export and/or import in the project is reported an being unrecognized and results in errors as well.
How is this done?
As mentioned in comments require(...) and module.exports relate to Common JS Modules, which are natively supported by NodeJS runtime, but not by browser. So basically you'll need to add extra build configuration to have your module work in both runtimes.
If you want to have outputs in both CommonJs and Browser friendly bundle - you can write all code in ES Modules and use build tools like webpack to provide outputs in different formats.
Also, starting from Node 13.2.0 - it supports ES modules natively. So I would stick to ES modules for ongoing development anyway.
Please also check this short article on main JS module format differences.
Related
I'm trying to add typescript to existing javascript project.
So if I run tsc, I get same working project in build folder with no issues.
Now I want to start adding typescript files
If I add one, and try to import it in existing javascript file like this:
require('./myNewTypescriptFile.ts').initialize();
And try to transpile and run project, I get syntax errors which indicate, that my typescript file is being interpreted as javascript. Even though in my build folder I can see, that there is proper transpiled myNewTypescriptFile.js file.
If I change my require to
require('../build/myNewTypescriptFile').initialize();
Now even the new file seems to work, but I'm forced to use this strange path.
Is this how typescript migration is supposed to work or am I missing something?
EDIT This project is on nodejs and written using commonjs module syntax, so I can't use import in javascript file, unless I rewrite all imports on all files which is a no go at the moment.
I run project using npm start which calls:
"nodemon build/index.js"
Pure JavaScript support for Flatbuffers has been abandoned, and the project website tells you to use transpile from TypeScript.
This is what I tried:
Write a Flatbuffers file website.fbs.
Run flatc --ts website.fbs to receive website.ts.
Run tsc website.ts to receive website.js.
Run browserify website.js -o website.browser.js to receive a file which I can include with <script src="website.browser.js"></script>.
But console.log(Website) tells me there is no Website object.
What is the correct path to use Flatbuffers with JavaScript in the browser?
The problem is that browserify does not export to global namespace (window) by default. By supplying the -s parameter to browserify you can get it to export to a global symbol:
browserify website.js -o website.browser.js -s website
After that you should be able to find window.website with the same API as before with the old direct to js code generator.
Or, in my opinion, the better option is to use a more modern bundler (Rollup, Parcel, esbuild, Webpack etc.) and have it bundle the generated ts (or js) together with your application in a single step so that you do not need to use the global namespace at all. That would also allow for more efficient and small code, better IDE support and probably some other benefits.
I understand a similar question has been asked before. I am trying to import a payment gateway module (paynow/nodeJS) into a web application. Browser console is displaying
"ReferenceError: require is not defined"
at line
const { Paynow } = require("paynow");
What is that I could be doing wrong?
There are two likely causes of this:
You are trying to run the JS in a browser instead of in Node.js
You have Node.js configured to use ES6 modules instead of CommonJS modules
If the former, run the code designed to be run in Node.js in Node.js.
If the latter, either use import instead or configure the system to use CommonJS modules (don't use the .mjs file extension and don't use package.json's type field.
I'm relatively new to modern Javascript dependency management. I'm writing a web app in Typescript and have started to use Jasmine as a unit test framework.
Once I started using Jasmine it became clear I needed to start exporting/importing the classes and functions in my source code files, since there is no HTML page loading all of them via script tags. This has been fine for my own files, but I am using a third-party library that is provided minified:
https://currency.js.org/
https://unpkg.com/currency.js#1.2.2/dist/currency.min.js
I can't seem to get my code running via Jasmine to recognize the existence of the currency function defined in this file. I'm guessing it's because the function seems to be dynamically created.
What would be a proper way to export the currency function above for use in my own modules?
That package actually is published on npm (with TypeScript typings included), and I was able to successfully import it as a module in a test application:
npm install currency.js
Then in your code:
import currency from "currency.js"
console.log(currency(1.23).add(.01).format());
https://www.npmjs.com/package/currency.js
We are trying to use Webpack to compile typescript code where we replaced “module” (now defined as external modules) with namespaces (defined as internal modules).
This change was done primarily to be in line with the recommendations of typescript and ensuring that dependency on “require” is not required for running Jasmine based unit tests on Karma. Karma-typescript preprocessor has been configured and the test case is running fine without the need of "require".
The change to namespace caused us to remove the dependency on require which works very well when it comes unit tests and compilation of the code through tsc. But on compilation through Webpack using typescript loaders (I’ve tried ts-loader, Webpack-typescript), the output contains code of just the entry ts file and not its dependencies. Tsc already has an option (--outFile) to concatenate the output into a single file but both the loaders do not use it.
Is there a way (loader or configuration of a loader) to resolve the dependency and bundle it into the single output js produced by Webpack?
This change was done primarily to be in line with the recommendations of typescript and ensuring that dependency on “require” is not required for running Jasmine based unit tests on Karma
You don't need to do that. You should use --module:commonjs everywhere and bundle for frontend + leave it as it is for running tests using node (node understands commonjs natively).
Example
I do this with alm https://github.com/alm-tools/alm/