I am new to web dev and am following a JS tutorial that is only 1 year old but uses outdated instructions for importing the JS library date-fns with a CDN. I love CDNs, unfortunately only an npm package is available now (link to documentation).
I made sure npm was updated then installed date-fns to the desired directory with the following line in terminal:
npm install date-fns --save
There are no more instructions on how to use the package except this example, which I assume goes in the JS file and not the html:
import { formatDistance, subDays } from 'date-fns'
... but using this syntax to try to import the isToday method from the package gives the following warning in my Chrome console:
Uncaught SyntaxError: Cannot use import statement outside a module
This question is asked elsewhere, but there is so much npm-related jargon in those answers I couldn't tell what I was supposed to do. Also, the code was different and older. Does 'module' refer to the npm package?
One would hope a one-year-old tutorial would be new enough to follow. Alas, earwax.
You can get the CDN build of date-fns here: https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js
The import/export won't work in browsers natively, especially if you're trying to work with npm packages. Since you're a beginner, I don't want to confuse you but import/export works in a specific scenario. You can read more about that here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Once you're acquainted with web dev, you can try using a bundler such as Parcel which allows you to use npm packages and combine them into a single JS file that can be used in the web: https://parceljs.org/
Related
Trying to compile a project and being greeted with
Compiling your contracts...
===========================
> Compiling .\src\contracts\TokenFarm.sol
> Artifacts written to C:\Users\sean\AppData\Local\Temp\test--17472-6fYHF170F1H9
> Compiled successfully using:
- solc: 0.5.16+commit.9c3226ce.Emscripten.clang
Error: Cannot find module 'react-bootstrap/lib/Breadcrumb'
Require stack:
I've tried manually installing the package with
npm install --save Breadcrumbs
But I can't seem to find the correct link to download the library
Is there a way to install an older version of node because I believe the repo I'm cloning from is from a few years ago so there could be some dependency issues going on.
You don't need to downgrade your node version. It appears your react-bootstrap has been updated with a major release, without updating related references.
To fix this, either downgrade your library version as suggested by Drew Reese, or just fix your imports.
If you look over the library codebase, you can see you should now import your components through react-bootstrap/src/Breadcrumb instead.
This question already has answers here:
SyntaxError: Cannot use import statement outside a module
(34 answers)
Closed last year.
I'm trying to import myArr from hello.js into index.js. However I get an error of
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module
File hello.js
export let myArr = ['hello', 'hi', 'hey'];
File index.js
import { myArr } from './hello.js';
console.log(myArr);
Where am I going wrong?
Use version 2:
npm install node-fetch#2
node-fetch from v3 is an ESM-only module - you are not able to import it with require().
If you cannot switch to ESM, please use v2 which remains compatible with CommonJS. Critical bug fixes will continue to be published for v2.
I ran your code without any problems. Check for two things:
Node.js version >= 14. It only works with the latest version of Node.js.
Make sure your package.json includes a line for "type": "module". Without this line, Node.js assumes you want to use CommonJS modules rather than ESM.
I ran into a similar issue while building my React project.
Here's the error:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/pradeep/Work/my_project/node_modules/#babel/runtime/helpers/interopRequireWildcard/_index.mjs
Then I realized that I am on a different Node.js version than the one used to install packages in this project.
I had two options:
Change Node.js version to the one required by this project and build again.
Stay on the Node.js version you have and remove the node_modules directory and package-lock.json file and do npm install again.
I chose the first approach and it worked for me.
If you have Node.js version lower than 14, e.g., v12 - you must specify this flag:
node --experimental-modules your.mjs
I use nvm to install the latest stable version of Node.js.
To delete the package-lock.json file and the node_modules folder, run npm. I then npm start to solve my problem.
Rename hello.js to hello.mjs.
You are using CommonJS right now with the .js extension. To import ES6 modules, you will have to change the extension of the file that you want to import to .mjs so it knows that it is an ES6 module.
The problem is that Node.js does not currently support import and export natively yet. It is still experimental according to the documentation. I recommend you use Babel to compile your code and allow you to use import and export.
For example, you can install the #babel/node package and run your project using:
npx babel-node index.js
Here are the documentation for #babel/node. Like the documentation state, this command is only meant for local development. In production, they recommend a configuration like this.
I come from Java world and I'm used to code with Maven and Eclipse, which makes very easy to work with local dependencies as the IDE + M2Eclipse plugin is able to resolve dependencies from the workspace.
Now that I'm developing in JavaScript with NPM and VS Code, I find that you have to use manual options such as npm link + npm build --watch or npm pack + npm install <path> to work with local dependencies.
I'm developing an Angular application which codebase is split in different Git projects and npm packages, so we waste a lot of time testing local dependencies and also it is error prone.
I guess that this is caused by the different nature of JavaScript and Npm but, is there any plugin or option to ease local depevelopment in VS Code?
EDIT: I have seen this article about Yarn Workspaces and it looks like what I'm looking for... anything similar in npm? I see Lerna is an option but only for monorepos, I have separated Git repos for each library.
EDIT2: To clarify the problem, lets say I'm developing two Angular libraries, each on a different Angular workspace. Library A depends on library B. I use VS Code workspace to have these two Angular workspaces open at the same time and edit them together. If I change library B I have to build it and link it so that I can test the changes locally in library A before publishing. This is what "resolve dependencies from the workspace" solves in Eclipse + M2Eclipse in Java, the IDE just builds and links projects together. Thats what I'm looking for in VS Code + NPM in Angular.
EDIT3: New workspaces feature in NPM 7 looks promising, I will give it a try. Any thoughts about it?
I am using Visual Studio Code (VSC) 0.10.11 on Windows and Mac. For the purpose of this question I have this small JavaScript snippet:
'use strict';
const os = require('os');
console.log(os.homedir());
I followed John Papa on Visual Studio Code (Blog entry and Pluralsight Visual Studio Code JavaScript Intellisense - for those who have an account) and therefore I would expect that VSC provides Intellisense and Quick fix options when typings are available.
In the snippet above VSC recognizes console and log() (I use hoover, but it is the same with Intellisense):
but not os and homedir():
But all 4 typings are available in typings/main/ambient/node/index.d.ts. I know that the difference is the require in the case of os, but in John Papa's video course VSC also provided IntelliSense for required modules. A difference is that John Papa used tsd while I am using typings.
So my questions are
how can I enable Intellisense for all known typings?
what do I have to do that VSC offers me Quick fix (green line under moduls with missing typings)?
The above links are outdated. In older versions of VS Code you needed to reference your typings like /// <reference path> for somelibrary.d.ts.
With new version you need to initialize your project by creating jsconfig.json at the root of your project and add the following inside:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
Next install typing you need. You can use either tsd or typings. In your case you need to install tsd install node or typings install node --ambient. Make sure you have typings/tsd installed. Restart project.
Please refer to docs:
Setup JS project - https://code.visualstudio.com/docs/languages/javascript
Node.js - https://code.visualstudio.com/docs/runtimes/nodejs
Debugging - https://code.visualstudio.com/docs/editor/debugging
Update:
Since version 1.7 there is no need to manually install typings, they should be downloaded automatically. Better JavaScript IntelliSense
There is a built-in extension called TypeScript and JavaScript Language Features (vscode.typescript-language-features) that is disabled.
In order to enable it, open Extensions panel, search for "#built-in JavaScript", and enable the required extension.
Now you should be able to use the autocomplete feature.
I experienced this on global "process" object. Vscode enabled intellisense for process object, only if I add any "require" statements to the file.
So if there is not any other require statements, you can add
const process = require('process');
in the beginning of your script to get intellisense.
Well, after 4 hr's googling finally, I decided to uninstall nodejs, npm, and typescript then install all of them again. The previous time I installed them using nvm but this time I decided not to use nvm just install them from node source since I am using Ubuntu I executed bellow commands, for windows or mac just install them without any package or version manager.
curl https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -
sudo apt-add-repository "deb https://deb.nodesource.com/node_7.x $(lsb_release -sc) main"
sudo apt-get update
sudo apt-get install nodejs
above command installed both nodejs and npm, after then to install typescript I ran bellow command
sudo npm install --global typescript
I updated my VSCode to the newest version.
Then in the bottom right of my VSCode I clicked on javascript to change the language mode, I wrote 'type' on the search bar and select typescript as my new selected language mode...........BINGO
While reading this article earlier, I came across the following line of code:
import { run } from '#cycle/core';
Which led me to the following questions:
What is the significance of the # symbol, if any?
Is there a difference between import 'foo/bar' and import '#foo/bar'?
Is it a way to resolve a particular type of module?
I'm relatively new to ES6, although the import syntax seems pretty straightforward to me - except, in this case, for the cryptic presence of the # symbol.
I tried googling but couldn't find any information on Stack Overflow, MDN or elsewhere.
Right from the Getting Started docs:
Packages of the type #org/package are npm scoped packages, supported
if your npm installation is version 2.11 or higher. Check your npm
version with npm --version and upgrade in order to install Cycle.js.
In case you are not dealing with a DOM-interfacing web application,
you can omit #cycle/dom when installing.