10

I am trying to use node-postgres to hook my app up to Postgres. The code I use is:

import React from 'react';
import pg from 'pg';
import fs from 'fs';
var cn = {
  host: 'localhost', // server name or IP address; 
  port: 5432,
  database: 'my_db',
  user: 'myname',
  password: 'mypass'
};

and it produces the error:

index.js:5 Uncaught ReferenceError: __dirname is not defined
up  @ index.js:5
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ client.js:4
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ index.js:3
console.EventEmitter._events  @ index.js:81
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ app.js:26957
__webpack_require__ @ bootstrap 539ecc7…:19
content @ bootstrap 539ecc7…:39
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ bootstrap 539ecc7…:39
(anonymous function)  @ bootstrap 539ecc7…:39
webpackUniversalModuleDefinition  @ universalModuleDefinition:7
(anonymous function)  @ universalModuleDefinition:10

The path on index.js provided in the console is webpack:///./~/pg/~/pgpass/lib/index.js:5

I tried @Renzo Poddighe solution at how to write file with node webkit js? but I still get the same error. I think it may have something to do with the discussions at https://github.com/nwjs/nw.js/wiki/Differences-of-JavaScript-contexts#resolving-relative-paths-to-other-scripts and https://github.com/nwjs/nw.js/issues/264. They say that

// __dirname is not defined in webkit context, this is only node.js thing
console.log(__dirname); // undefined

and

__dirname works in Node.js modules, i.e. in JavaScript code that was called with require(). __dirname doesn't work only in WebKit scripts, i.e. in JavaScript code that was called with HTML , or jQuery's $.getScript(), or any other similar method.

Any ideas? Let me know what other information I need to include.

edit

I think my target is 

var config = {
  entry: { app: './src/index.jsx'},
  output: {
     libraryTarget: 'umd',
     path: path.join(__dirname, 'dist'),
     filename: '[name].js'
  }, ...

My webpack.config.js looks like:

...
  node: {
    console: true,
    __dirname: true,
    dns: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
...
Community
  • 1
  • 1
neallred
  • 740
  • 1
  • 8
  • 24
  • What is your webpack's target? web/node or something else https://webpack.github.io/docs/configuration.html#target – thangngoc89 Mar 18 '16 at 17:40
  • The only thing with `target` that I see is `libraryTarget: 'umd',`. Should I be setting this explicitly? According to the link to the docs, It looks like my target is web by default. – neallred Mar 18 '16 at 17:43
  • Try to specify `target: 'node'` in webpack config – Bob Sponge Mar 18 '16 at 19:50
  • Trying that, I instead get an error "Uncaught ReferenceError: process is not defined ReactPerf.js:38". – neallred Mar 18 '16 at 19:56

2 Answers2

11

In that case, add this to your webpack config:

{
  node: {
    __dirname: true
  }
}

This will tell webpack to replace __dirname instances with the path of the module. This path relative to context

nem035
  • 34,790
  • 6
  • 87
  • 99
thangngoc89
  • 1,400
  • 11
  • 14
  • 3
    I added it but I still get the same error after restarting my webpack-dev-server. I am also using hot-reloader if that makes a difference. – neallred Mar 18 '16 at 17:54
  • Is there any reason why do you trying to use `fs` and `pg` in a web environment ? Webpack has mock for node api but `pg` in the other hand, is a node package. It might uses some node api underhood. – thangngoc89 Mar 18 '16 at 18:07
  • I might be going about this the wrong way, but I want to create a web interface for the database so a non-technical admin can add, edit, and delete entries in the database. I thought I needed to include pg to do this. I included fs to try and fix errors, but maybe that introduced more. If I don't include the dns, fs, tls, net, I get an error about the modules not being found. – neallred Mar 18 '16 at 18:13
  • 1
    You're doing this the wrong way. Make an REST API on top of pg, and consume it from your web app. – thangngoc89 Mar 18 '16 at 22:22
  • I ran into this same problem when trying to setup a custom Webpack for my Electron App. Now I am getting an error: ERROR Invalid options in vue.config.js: "node" is not allowed – Seth Eden Jul 13 '20 at 12:36
  • I tried the above and it doesn't work for me. :/ – Michael Paccione Apr 05 '21 at 17:06
0

Try this:

    node: { __dirname: "mock" }

Check this reference out

Eissa Saber
  • 161
  • 1
  • 8