admin 管理员组

文章数量: 1086019

I am trying to run a html file in Firebase staging environment. I have used Firebase npm package in the js code. But while running in the browser it throws error "require is not defined".

HTML Code:

<html>   
<body>
<h1>Hello World</h1>
</body>
<script type="text/javascript" src="./js/test.js"></script>
</html>

JS Code:

var Firebase = require('firebase');
var dataRef = new Firebase('firebase url');
console.log("Firebase : "+Firebase+" -- dataRef :: "+dataRef)
dataRef.set("Firebase Require");

Please suggest me some solution.

I am trying to run a html file in Firebase staging environment. I have used Firebase npm package in the js code. But while running in the browser it throws error "require is not defined".

HTML Code:

<html>   
<body>
<h1>Hello World</h1>
</body>
<script type="text/javascript" src="./js/test.js"></script>
</html>

JS Code:

var Firebase = require('firebase');
var dataRef = new Firebase('firebase url');
console.log("Firebase : "+Firebase+" -- dataRef :: "+dataRef)
dataRef.set("Firebase Require");

Please suggest me some solution.

  • javascript
  • node.js
  • firebase
Share Improve this question asked Nov 30, 2016 at 9:19 deeptimancodedeeptimancode 1,1396 gold badges18 silver badges40 bronze badges 5
  • is the JS code your test.js file? – Francesco Commented Nov 30, 2016 at 9:24
  • yes , it's the test.js file – deeptimancode Commented Nov 30, 2016 at 9:25
  • require doesn't exist in the web API and it is not implemented by any browser. You can think about using a tool such as webpack.js/get-started/install-webpack if you want to import npm frontend packages directly – Francesco Commented Nov 30, 2016 at 9:26
  • will the webpack modules will work in Firebase hosting – deeptimancode Commented Nov 30, 2016 at 9:28
  • 1 of course, I am using it in this project github./francescoes/scrabble, have a look – Francesco Commented Nov 30, 2016 at 9:29
Add a ment  | 

2 Answers 2

Reset to default 3

You need to setup a tool (such as webpack) to manage your dependencies. In this way you will be able to require (or import es6 sintax) libraries directly in your .js files.

A possible setup could be the following:

in webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
}

To tell webpack which is the entry file of your app and let it build the bundle for you.

Then in index.js you can use:

import Firebase from 'firebase';
var dataRef = new Firebase('firebase url');
console.log("Firebase : "+Firebase+" -- dataRef :: "+dataRef)
dataRef.set("Firebase Require");

Refer to https://webpack.js/configuration/ for a more plete guide.

p.s. that will be valid for every node dependecies with frontend support

This happens becaure require does not exist on the client-side. Note that npm packages, just as nodeJS as a service, are backend services.

Therefore you need to include Firebase's SDK via the following:

<script src="https://www.gstatic./firebasejs/3.6.1/firebase.js"></script>

Then initialise the SDK using the config you need. The setup is explaing here in more detail: https://www.gstatic./firebasejs/3.6.1/firebase.js

Cheers!

本文标签： javascriptrequire is not defined in FirebaseStack Overflow

版权声明：本文标题：javascript - require is not defined in Firebase? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744056488a2525945.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。