Importing CommonJS module with RequireJS throwing MIME type mismatch error - requirejs

I am trying to import a CommonJS module from an npm package into a project using RequireJS. As per the RequireJS docs, I'm using the following syntax to convert the module to be compatible with RequireJS:
define(function(require, exports, module) { var votes = require('votes'); });
I keep getting the error that the resource I'm trying to import "was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)." I've looked into it and it seems like this error is usually thrown when attempting to import e.g. stylesheets or scripts using src="{path/to/resource}" inside stylesheet/script tags and providing an incorrect path.
However, since importing it using require() should be able to find the resource in node_modules, I'm not sure how to fix this. I'm assuming there's something wrong with how I'm importing/converting the CommonJS module? Any leads appreciated! Thank you.

Related

How to fix the ReferenceError: __dirname is not defined error when it's coming from a third party library?

I'm trying to import the sharp package to my function. I'm trying to create a lambda function using the SST framework. The problem is, Im getting the following error:
Runtime.UnhandledPromiseRejection: ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/pubudu/Projects/MyProject/.sst/artifacts/dev-pubudu-Backend-GraphQLAPI-Lambda_GET_-/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
Now I have seen a lot of material showing how to fix this issue if we are using __dirname in our own code. But in this case, the problem is, it's coming from a third party package. Any idea how to fix this?

weird Nodejs: I never use `require()`, but got an error

Please see Issue
I'm very sure that neither the package and I used no require(), but still got an error that tells me don't use require()
How weird it is!
code with error:
import stripAnsi from 'strip-ansi';
error:
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\13931\Desktop\ucon\node_modules\strip-ansi\index.js from C:\Users \13931\Desktop\ucon\src\utty.ts not supported.
Instead change the require of index.js in C:\Users\13931\Desktop \ucon\src\utty.ts to a dynamic import() which is available in all commonjs modules.
And the most confused thing is that:
import statement is helpful everywhere except importing strip-ansi!
Make sure that your TypeScript config is set for an appropriate target version of Javascript and appropriate target module type that supports and will use import so that the TypeScript compiler will generate code that uses import. If not, then it will generate code that uses require().
You can always look at your compiled (plain Javascript) code and see what it is generating.

how are #types, typescript and webpack related

To use an exported type in .ts file one has to add import it
import {jQuery} from 'jQuery'
Now when I use this I do not get intellisense, I still need to do npm install #types\jQuery to get that.
So without #types, above statement just infers that during typescript bundling include this file.
Now if I install #types then without adding any other code, I do start getting intellisense.
So is it like above statement is dual purpose.
During bundling using typescript/webpack, it tells to bundle these files as dependency and during compilation, it tells to include .d.ts rather than actual code file?
Why this question: I am trying to move angular1 to typescript and I can use angular.whatever in .ts file even without importing it? Not getting why this is happening. It should give me error asking me to import angular
Not sure I get your question 100% but I can try to explain a bit. The javascript runtime won't have a static check, it is just during the compilation time. If you tell typescript that your variable/function/etc. is of type 'any' then it will just allow you to do anything with it. Eventually the generated code is the same, whether it is checked or not. If you don't have corresponding variable during runtime, you will get an error. Typings are used to just "teach" ts compiler about the actual types of variable for static compilation.
So during compilation no .d.ts is included anywhere, this is just for static type check.
As to why you can access angular, I suppose it is because of d.ts contains the definition and by using #types/angular you let ts compiler know about it.
Check here. The .d.ts files includes global variable angular, that's why you can use it without importing I think.
P.S. Not sure 100%, but seems like it is this line:
declare var angular: angular.IAngularStatic;
You can try deleting this line and see if you get your error :)

Typescript module import with configuration file

I would to like forge the path to access node_modules with some configuration file. It seems it's not possible to do the thing below, how should I forge my path then?
The aim is to write absolute path to some node_modules ( cause some files are splitted so this is needed).
import someFileSettings from "./../../models/someFileSettings";
import * as request from JSON.stringify(someFileSettings .somePathIneed+"request");
No, it's not possible, because TypeScript modules follow the standard ES6 modules. To do that, there is a module loader API, based on promises.
Here is the explanation from the book of Dr. Axel Rauschmayer:
16.9.1 Can I use a variable to specify from which module I want to import?
The import statement is completely static: its module specifier is always fixed. If you want to dynamically determine what module to load, you need to use the programmatic loader API:
const moduleSpecifier = 'module_' + Math.random();
System.import(moduleSpecifier)
.then(the_module => {
// Use the_module
})
... but, notice this warning:
The module loader API is not part of the ES6 standard

How do I import a library into node without a Typescript/TSD definition?

I'm trying to use a session helper called connect-session-knex which is obscure enough that it does not have a published typescript definition. So when I try to compile my typescript node project, I get the error,
error TS2307 Cannot find module 'connect-session-knex'
Is there a way to ignore TS for this module only? How do I import it without the TSD? I know knex has a tsd, but the wrapper does not. I'm asking this from a generic standpoint of what to do with libraries without type definitions.
For anyone looking: Compiling typescript when it does not have tsd. Missing tsd. Without tsd.
error TS2307 Cannot find module 'connect-session-knex'
Is there a way to ignore TS for this module only? How do I import it without the TSD?
Use var/require instead of import/require. i.e.
var csk = require('connect-session-knex');
Note you should have node.d.ts included for require to be declared.
Also : https://basarat.gitbooks.io/typescript/content/docs/node/nodejs.html
Another suggestion is to start you own .d.ts file as an empty definition file and export the module. Then if you want to get intellisense on the module you can add definitions to it.
e.g. connect-session-knex.d.ts:
// declare module
declare module "connect-session-knex" {
}

Resources