In my Koa project, I use the koa-static to serve the static files. And the simple project it just goes as following:
var koa = require('koa');
var serve = require('koa-static');
var app = new koa();
app.use(serve('./public'));
app.listen(3000);
We plan to put all the static files in the public folder.
But I get the following error message when I want to run the Node app.
koa-static#4.0.1#koa-static\index.js:39
return async function serve (ctx, next) {
^^^^^^^^
SyntaxError: Unexpected token function
So my Node version is 6.11.0. And the koa-static used async/await function, which is supported by Node.js newer than v7.6.0.
So if I don't plan to update the Node, is there anyway to work around this issue? I manually use Babel to transpile my ES6 code. But for the package, can I babel it?
The thing is that Koa is specifically built around async/await and Node.js 7.6.0 or higher, which is mentioned at GitHub. So package developers are just following the basic standard and most of the time do not bother supporting earlier versions of Node.js. Maybe you should reconsider migrating?
If absolutely not, there are two visible ways to make it work:
Setup package.json step to give you transpile with Babel as part of installation process (npm install has preinstall and postinstall steps). That way you will have transpiled packages right after installation.
Configure your Webpack (Gulp, Grunt) to preprocess node_modules or specifically koa-static with Babel. Performance degradation could be significant, and this is rather lazy solution.
Related
I have downloaded node-js and I am using npm inside a folder. I have downloaded the lodash package as a dependency and it is in the node modules folder.
but when I try to use it using require() it is giving above mentioned error in the console and suggesting to use ES6 module by vs code and require is a module of common.js
I have a package.json file and lodash is listed as a dependency. I am able to run lodash in the command line using node server but not in the browser
Do we need any other package installed in order for require() function to run other than node-js?
what am I doing wrong?
I am on windows and using the latest version of node and npm
let a = require('lodash');
If VSCode is suggesting you use ES6 modules, then you may have turned on ES6 Module support in your project which overrides Node's default support for CommonJS modules.
Use
import lodash from 'lodash';
instead of require.
Re edit:
I am able to run lodash in the command line using node server but not in the browser
Well yes. If you run a program designed to work in Node.js in Node.js then it work. If you run the same program in a browser, then it won't work. Just having Node.js installed somewhere doesn't turn the browser into Node.js.
If you want to use an ES6 module in a browser then:
It must be compatible with browsers (lodash might be)
You need to use import lodash from "./url/to/lodash.js"; because browsers don't have support for resolving npm paths.
If the module isn't designed to run in browsers, then you might be able to use a tool like Webpack to bundle it up in a way that will work (but that won't work in the module depends on APIs provided by Node.js, like fs).
You can use express framework to work on NODE js
let express = require('express') ;
For me, Webpack is a bundler for "web" since browsers don't have good support for js module system. Thus using Webpack we could still use "module" way to develop and pack them for browsers.
Webpack has a config option target
module.exports = {
target: 'node'
};
using node webpack will compile for usage in a Node.js-like environment
But NodeJS already support CommonJS modules, why need Webpack to build something that runs in NodeJS environment?
Besides, if you want to compile your javascript, for example, using the ES module, you could just use babel to do so, using es module transform plugins or proper presets.
Why use Webpack, set the target to node and then use babel loader... instead of using babel directly?
I cannot think of the use case of using Webpack to bundle application running in node.
One reason I can think of when to use webpack for node is when you have a node_modules package where it's not compiled yet (Still in ES6).
babel-node won't be able to help you bundle the node_modules packages that need to be transpiled along with the rest of your code
I had to go through this process.. ): This scenario is helpful in Yarn Workspaces where you want your server to depend on another package in your workspace. Where your server will re-update whenever you make changes in the other package with the help of webpack
How to include a few node_modules package in babel-node
Having a single server.js output
instant deployable on a server
no worry about mismatching dependencies compared to your dev environment.
In my project I need to use the npm module ipfs-api with create-react-app.
I can run npm start and run the proect.
But when I try to build the proect with react-scripts build, it throws the following error
Failed to compile.
Failed to minify the code from this file:
./node_modules/ipfs-api/src/utils/module-config.js:7
Read more here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
According to the suggestions in the provided link in eorror log, I tried using,
"dependencies": {
...
"ipfs-api": "github:atfornes/js-ipfs-api#transpiled",
...
}
instead of "ipfs-api": "^22.0.0",. Although this solved error for ipfs-api, other dependent modules (probably installed with ipfsapi) kept giving same type of Failed to minify errors which I stopped transpiling them manually.
Is there a way to transile all the dependent node modules to es5 while before using the command react-scripts build ? Or any other way to overcome this issue?
Usually client-side or platform independent packages are compiled to ES5 on publishing. That you have this problem may suggest that the package isn't intended for client side.
As the documentation explains, the package contains a bundle for browsers that includes polyfilled Node features (streams, etc.) that are needed to run it on client side.
It's supposed to be used as a global:
import 'ipfs-api/dist';
ipfs(...)
Is there a way to transile all the dependent node modules to es5 while before using the command react-scripts build ?
This would require to eject create-react-app configuration and configure Webpack to transpile this package properly. This example from the documentation shows how Node-specific parts should be configured to bundled for browsers.
I am trying to use this package here without using any bundlers(webpack/browserify). I have already downloaded this package to my project by running npm install --save mtgsdk. To use this package in Javascript, I would call const mtg = require('mtgsdk'). If I don't want to install/configure webpack, how would I load this package into my project?
Note that I am using Gulp and NPM. My project is an AngularJS project so I am not using node.
Package I am trying to load: https://github.com/MagicTheGathering/mtg-sdk-javascript
Quick answer
You can't without using any bundlers like webpack or browserify.
Try to use requireJs however It depends on the modules:
RequireJS does not contain code that will magically make a npm-installed module work in the browser. It ultimately depends on how the modules are structured.
To know more about this please check the last section of this answer by #Louis
MTG API
The Gathering SDK Javascript implementation: It is a wrapper around the MTG API of magicthegathering.io
I don't really see the point of using a npm module if you aren't going to use node in your project.
As mentioned before the module is just a wrapper for the api so you can still do an http request usign the api endpoint:
https://api.magicthegathering.io/<version>/<resource>
Example: client.js
This call will return a maximum of 100 cards
// Get All Cards
const api = 'https://api.magicthegathering.io/v1';
fetch(`${api}/cards`).then(res => res.json())
.then(json => console.log(json));
Output
{ cards: [...] }
To know more about the api please read the api-docs
You don't need Webpack to use require. Once you've run npm install, the package has been downloaded to the node_modules folder of your project. You can require the package perfectly fine from any script within your project folder. Node itself will handle finding the package in node_modules when you call require.
I am trying to implement elasticsearch.js in my project and when I added:
var elasticsearch = require('elasticsearch');
It broke my project and said require is not defined. I did research and saw that I would have to use a library called require.js within my project but that is changing my whole project structure just for one script.
I wanted to see if anybody knows how to call an instance without using require:
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client();
You seem to be following the instructions for using elasticsearch in a node project or using a bundling system that supports CJS modules (like browserify or webpack). If you want a script that's for a browser-only project, see the Browser Builds page.
Note that at this time, they have this note:
These versions of the client are currently experimental.
You're using a version that should be used in a node project or through a module loader/bundler. The require keyword is node specific, the browser has no idea what to do with it. Require.js would help, you can also install Rollup or Webpack which would bundle the CJS (require) dependencies and your code into one file.
Or to be simple just go to https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/browser-builds.html as Jacob said