I'm trying to import a browser build for the elasticsearch.js client. I'm using npm as my package manager since EmberJS (v2.13.1) is moving away from bower:
npm install elasticsearch-browser
Few questions:
Can I directly import the module as it is "built for the browser" and probably doesn't use any CommonJS syntax? If yes, what would the import statement look like?
Am I required to use browserify to import any module I install from the npm registry? Why? How do I know which packages are browser-ready?
I could install the module through bower and then do an app.import in the ember-cli-build.js file. Would that work?
As I understand, it finally comes down to using bower vs installing browserify, correct? But I still don't understand why I should have to use a transpiler.
Related
I have been coding with a React frontend and a Node/Express backend. But sometimes, I only need some plain Javascript without React, but still want the benefit of NPM and other Node modules. What is a way to do this?
You'll need a module bundler of some kind. There are many options including Webpack, Browserify, Gulp, and Parcel.
For Webpack, for example, from their example docs, the process could be:
Install webpack with npm install webpack and install webpack-cli
Install a module you want to use on the frontend, eg lodash
In src/index.js, import lodash: import _ from 'lodash'; and use it as needed. (You can also import other modules from NPM or from other places in your source code)
Set up webpack.config.js if you need custom build configuration settings
Run webpack to build the project: npx webpack. A single bundled JavaScript file will be created which contains all your source code and the imported Lodash's source code.
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.
So I forked a package in the git. Made my changes. Then in my terminal
npm install --save git+https://github.com/hayk94/ddp.js.git
And then I try to import the package in my code as this
import DDP from 'ddp.js'
But webpack gives me this error
ERROR in ./main.js
Module not found: Error: Can't resolve 'ddp.js' in '/Users/hayksafaryan/projects/b2cEmbedLib'
# ./main.js 23:11-28
# multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./main.js
webpack: Failed to compile.
However webpack works fine if I install the package from npm.
I import the package as in the docs, however maybe there is some other way for git installed packages?
The entry point of the package is lib/ddp.js, but that file doesn't exist in the repository. It is very common that libraries build their libraries before publishing to npm, so that they can use newer JavaScript features but still provide support for older versions that don't support them. This is done with the prepublish hook, which is automatically run before the package is published (when you run npm publish). With that, the built files don't end up in the repository, as it would mainly clutter up your commits. Some people decide to check them in so they can use it directly from there, which has become quite rare because these use-cases are generally covered by services like Unpkg.
You have several possibilities to use it from a git repository.
Check in the built files.
Build the files after installing. Either manually or with a postinstall hook. (not recommended)
Change the entry point to src/ddp.js. If you need to transpile the files, this isn't a valid option, even though you could theoretically whitelist the package in your webpack config, so it gets transpiled (assuming you were excluding node_modules from being transpiled).
Publish the package to npm under your namespace (#yourusername/ddp.js) and use that. For details see Working with scoped packages.
I'm using npm pack to export a local package to use in projects. It uses es6, jsx and other new features. So when I run npm install <tarball> in my new project, it gets unexpected token errors when it tries to import the package. I tried to having an prepublish script that used my webpack config file to compile to /dist and then set the package.json's main key to dist/compiledPackage.js but I wasn't able to import that package either. I simply want to export my React Component to use in other projects by running npm install ThatReactComponentTarBall. How can I do this?
I just installed Node and I want to use the lodash library. I made a new JS file in my desktop and I started the file with
var _ = require('lodash');
However, I get
Error: Cannot find module 'lodash'
How do I use the lodash library? All I can find online says to use the import statement I already used.
You need to install lodash with npm:
npm install lodash
That will install lodash into a subdirectory of your current directory called node_modules. Node.js knows to look there when you use require('lodash').
Usually you'll have a package.json file that tracks your dependencies so that you can just do npm install to install all dependencies for a project. If you want to add lodash to package.json then you can use npm install --save lodash.
If you don't have a package.json for your project yet, I would recommend running npm init to create one.