I try to use axios in my main.js.
i tried import axios from 'axios'. ... I got error for import. I read here that I should use require instead of import.
after that I tried
var axios=require('axios');
but I got the error ....require is not defined.
after that I read about browserify. I installed it
npm install -g browserify
after that I used this code to bundle it
browserify main.js -o bundle.js
and I add this script to my index.html code.
<script src="bundle.js"></script>
but I got the same error
REQUIRE IS NOT DEFINED!!
I am actually confused. can somebody HELP ME!
appreciated
By default require() is not a valid function in client side Javascript and is primarily used in server side Node.js. I recommend you look into require.js as this does extend the client side to provide you with that function. Or else go with ES6 import.
npm install axios --save-dev
will help you to solve problem
Related
I'm kind of a newbie with node.js, so please, be merciful :)
I use node ver 14.15.1
The problem I'm facing is to get a npm module("ghost-cursor", https://www.npmjs.com/package/ghost-cursor) that is written in ES6 ("import") working in commonjs (require).
I need to pack my node.js app in an exe file and the npm "pkg" doesn't seem to work with ES6. With nexe I can't get to pack all dependencies in order to work outside of the project folder and on other machines... I have tried to transpile the ES6 module to commonjs with babel:
babel --presets=es2015 ./folder/filename.js > ./folder/filenameCJ.js
but I get the error: SyntaxError: Invalid or unexpected token
I have also tried the solutions posted in:
How to use ES6 modules in CommonJS?
but I can't get it to work.
Are there any other ways, except "nexe" and "pkg" to make an exe file from node.js?
Is it possible to use an ES6 module from npm in commonjs with require? If so, how?
Thanky you for your help and replies.
This might be a stupid question, or the answer is so obvious that I just couldn't find it.
Basically I want to use Redux in my very simple web app. I wanna be able to include redux like this :
<script type="text/javascript" src="js/redux.js"></script>
And just use it directly in my code like this :
var store = redux.createStore(...);
I tried webpack and browserify but I couldn't make it work. Any ideas ?
To import Redux via a <script> tag you have to use the UMD builds.
According to the docs, they are present on the dist/ folder.
I got Redux working with their pre-built UMD files.
But to use other NPM modules directly in the browser here's what to to (I don't know if this is the correct method but it worked for me) :
1- Create a simple file main.js with :
window.Redux = require('redux');
2- Install browserify globally :
npm install -g browserify
3- Browserify the file from the command line (no config files) :
browserify main.js -o redux.js
Now just include redux.js as a <script> tag
If you want to include the package directly on the browser for a smaller use case you could use unpkg.com which is a fast prepackage list of everything available on NPM (per the claim on their website)
I wrote a very basic express.js app. Then tried to make it one .js file. Browserify compiled the whole thing to a one file. But browserify-compiled code didn't work. As far as I know, browserify just replaces require statements with module codes. Error is:
C:\Users\HP\n\express\app.js:27025
__proto__: http.IncomingMessage.prototype
^
TypeError: Cannot read property 'prototype' of undefined
at Object.__dirname.173.accepts (C:\Users\HP\n\express\app.js:27025:34)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.170../application (C:\Users\HP\n\express\app.js:26823:11)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.168../lib/express (C:\Users\HP\n\express\app.js:26154:18)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.153.express (C:\Users\HP\n\express\app.js:24010:15)
Browserify is designed specifically to package code for a browser.
Node.js supports a number of modules that a browser doesn't which have to be emulated by builtins. These modules will be replaced by a browser-specific shim. Some only supply a subset of the Node API that makes sense to have in a browser.
So you are running an app that has converted all the Node.js modules to support running what it can in a browser, back in Node where the modules are available but are no longer being used.
Try rollup or you could possibly configure babel to work like you need
I had this very same issue but like you said the compile code should work on server side. I solved it from this link:
https://www.linkedin.com/pulse/bundling-nodemodules-your-nodejs-app-one-single-file-xuan-son-nguyen/
Use browserify for bundling and terser for minifying. Starting by installing them globally:
npm install -g browserify
npm install -g terser
Next, we have to add a build script to package.json
...
"scripts": {
...
"build": "browserify --node --ignore-missing index.js | terser > bundle.js"
}
...
Each time you want to promote to production, you have to make a new bundle:
npm run build
A new file called "bundle.js" will be created.
Let there be peace, and there was peace. Happy coding.
I would like to use a node.js module from https://github.com/asbjornenge/react-datalist using browserify.
I did install the module locally at my working directory.
In that directory, I created a javascript file, main.jsx
var React = require('react');
var ReactDatalist = require('react-datalist');
var options = ['apple','orange','pear','pineapple','melon'];
React.render(<ReactDatalist list="fruit" options={options} />, document.body);
Then, I reactify like this:
browserify -t reactify main.jsx > main.js
So far so good, but the problem is when I want to browserify:
browserify main.js > bundle.js
I got an error:
Error: Cannot find module './components/DataList' from '...my working directory...'
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:55:21
at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:95:15)
In ...my working directory../node_modules/react-datalist/src/ReactDataList.js, this is defined:
import React from 'react'
import DataList from './components/DataList'
import DataListOption from './components/DataListOption'
import layout from './styles/react-datalist.styl'
This is unclear to me about the scope of import. I thought node.js import mechanism should work locally, but why does it try to find './components/DataList' right from my working directory?
There must be some concept about importing modules I don't know yet. So I would appreciate if you can point out to some references.
I feel embarrassed now. The problem is I didn't realize the transformation step and the bundling step are already combined into a single command line. Hence, instead of
browserify -t reactify main.jsx > main.js
browserify main.js > bundle.js
Do this
browserify -t reactify main.jsx > bundle.js
I am attempting to install localForage into a node.js application (with Angular) and Browserify.
Here is a link to the localForage documentation
It appears that using localForage and angular-localForage causes a problem with browserify based around the use of 'require'
If I require the localforage.js file in the src file I get the following error:
Warning: module "promise" not found from "/Users/mgayhart/Sites/epson- receipts/bower_components/localforage/src/localforage.js" Use --force to continue.
If I require the localforage.js file in the dist file, I get the following error:
Warning: module "./drivers/indexeddb" not found from "/Users/mgayhart/Sites/epson- receipts/bower_components/localforage/dist/localforage.js" Use --force to continue.
Anyone know of a workaround to be able to move forward with these libraries?
There is an issue on github with this problem: https://github.com/ocombe/angular-localForage/issues/26
I'll be working on it soon, you can subscribe to the github notifs on this issue to know when it's fixed !
For me installing it through bower and using it with browserify-shim worked. So in package.json:
"browser": {
"localforage":"./src/lib/vendor/localforage/dist/localforage.min.js"
},
"browserify-shim": {
"localforage":"localforage"
}
And to expose it as an angular-service (if you don't want to use angular-localforage):
app.factory "localforage",-> require 'localforage'
I've just been having this issue myself tonight, but I think I found a fix.
Instead of trying to get the bower modules to work with browserify, why not just use npm like its made for?
npm install localforage
and then when you use require you don't have to give it the path
but it still didn't work for me until I copied the folder:
localforage/src/drivers TO localforage/dist/drivers
Then it found all the dependencies and worked like a champ!
Alternatively if you must use bower you could try to use the debowerify tranform w/ gulp:
https://github.com/eugeneware/debowerify