In ES6-ifying some TypeScript code (the project I'm working runs in both the browser and a Node server, I'd like to tree-shake the browser bundle), I'm trying to eliminate uses of require and only use import. But when I do this...
import * as request from 'request';
and subsequently call request(), I get runtime errors in Node (after using babel to make the code ES5, and thus Node, compatible):
TypeError: request is not a function
On the other hand, if I do this:
import request from 'request';
then the TypeScript compiler complains with
error TS1192: Module '"<mypath>/node_modules/#types/request/index"' has no default export.
If I manually change the compiled JS code to use import request from 'request';, it actually works fine... how can I force the TS compiler to accept this code and just pass it through?
Can you try Add allowSyntheticDefaultImports: true to your
tsconfig.json
seems like still an open issue in Typescript.
Basically you need remove comment in tsconfig.json at line 46, because default ts config file have this option but it's commented by default
Related
I have an Electron + React app based on create-react-app. In the React code, I'd like to use excel4node to generate an Excel file. The issue is that excel4node tries to import modules such as fs and http which are not available on the renderer side. This results in the following Webpack error:
[0] ERROR in ./node_modules/image-size/dist/index.js 7:11-24
[0] Module not found: Error: Can't resolve 'fs' in 'C:\[...]\node_modules\image-size\dist'
I do not want to use any methods from excel4node which are accessing these modules, such as writing the Excel file to disk for example -- I would be fine with these functions erroring if they were called.
Is it possible to overwrite the problematic modules with something like an empty module just so that the import works? Since I used create-react-app I do not have easy access to the webpack configuration, so if there is a different way that I would prefer that.
I have a slight problem with a basic Node.JS method. When I'm trying to use "require()' method to import any downloaded (with 'npm install ..) module/library, I get a Visual Studio Code message that asks 'to convert 'require'(which is a Common JS module) into ES. If I do it, it transforms 'require()' into 'import..' though I want keep using 'require()'. Why is it so ? I read somewhere that Common JS is already included in the Node.JS environment though.
Then, when trying to compile my index.js file (with 'node index.js'), I obviously get an error about 'require' not recognized method.
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users...index.js from C:\Users...index.js not supported.
I tried then to install Webpack to fix this issue, but nothing change. I also kind of installed CommonJS (npm i common-js)..
Another common answer was to remove 'type':'module' from package.json file which normally should allow to use 'require', but I don't even have such a line in the file.
On top of that I've recently read that 'require' is not compatible with browser development tools (it's ok). But I'm trying to import a downloaded module/npm package in VSC terminal, not even in a browser.
As you understand I'm new to Node.JS, but I don't really get what's going on in this case...
I'm doing a startup server. Basically It has initial setup with express and nodemon dependencies. Unfortunately, I'm getting ERR_MODULE_NOT_FOUND when running yarn dev or npm run dev
Here is the code and file structure I have.
The issue is a missing file extension. The import needs to look like this:
import { sampleExport } from "../config/env.js";
// ^^^
import doesn't use the same algorithm that require used. Instead, it works according to the ECMAScript Modules specification, which requires a definite extension.
This is also explained in the node.js docs for ECMAScript modules:
A file extension must be provided when using the import keyword to resolve relative or absolute specifiers. Directory indexes (e.g. './startup/index.js') must also be fully specified.
This behavior matches how import behaves in browser environments, assuming a typically configured server.
You need to add .js extension
index.js:
import { SampleExport } from "../path/file.js"
In my opinion, it is better to use .env files together with some npm package or even a json file.
I am trying to learn Node and React and I ran into an interesting problem where - in the import statement like below, I need to explicitly type the file format (.jsx) otherwise, the compiler borks up and complains that it cannot find App.js file.
import App from './App.jsx';
Note - App is a jsx file and saved as App.jsx. I used create-react-app for boilerplate code.
Also, I found some more information on GitHub on the lines of "The distinction between .js and .jsx files was useful before Babel, but it’s not that useful anymore."
https://github.com/facebook/create-react-app/issues/87
So, it looks like a non-issue as long as save it as .js and I have babel to compile ES6.. Thanks everyone!
Here your assumption is incorrect.
If I am right then you are assuming that if your file is .jsx, then you don't need to specify the file extension in the import statement to import .jsx file.
But its the other way round.
If you don't specify the extension of the file then compiler assumes that it is a .js file. So, there is nothing wrong with the behavior that you are seeing.
OR
If you don't want to include extensions in the import statement then just create .js files. Compiler will automatically detect the jsx written inside it. This is the easiest way to fool import statement.
Any javascript react snippets will not show up in a plain .js file only a .jsx file
I suggest that closing the running project on Browser
(ctrl + c / command + c on terminal to finish running project) and do
'yarn start' or 'npm start' again. then it would work!
React sometimes shows errors when you add new files like jsx, js, etc..
and I also had the same problem with you.
(I changed App.js to App.jsx and webppack error was occured).
In these case re-starting project would be the solution!
finally you don't need to specify file extension (like the other answers suggestion).
I would like to use moment.js in my node application, so I installed moment.js using node's package manager npm:
npm install moment#2.4.0
Just to be on the safe side, I checked moment is not installed globally and the installed version is really version 2.4.0 (version 2.4.0 in order to use the correct d.ts file ...)
require("moment").version
Alright, seems to be good. I'm also using the latest version of TypeScript (0.9.5).
So, now I added the following file to my projects root directory https://github.com/borisyankov/DefinitelyTyped/blob/master/moment/moment.d.ts and refernced the file:
/// <reference path="moment.d.ts" />
Now, it should work to import moment using TypeScripts import keyword:
import m = require("moment");
Compiling with the following command
tsc app.ts --module commonjs
produces the following errors
/home/unknown/temp/test/app.ts(3,1): error TS2071: Unable to resolve
external module '"moment"'. /home/unknown/temp/test/app.ts(3,1): error
TS2072: Module cannot be aliased to a non-module type.
Why does this error occur? How do I fix it?
The important line in the d.ts file is this one...
declare var moment: MomentStatic;
It just declares a variable for moment.
You can add the following line to resolve your problem:
export = moment;
This should make it loadable using the import statement you have.
If you do this - you won't need yhe reference comment.