ReadFileSync return ENOENT

A bit of backstory

I'm trying to run an https REST server with express and I'm using webpack to compile and bundle.
Now this is my structure:

-dist
-src
 -server
  server.js
 client
  index.html
  index.js
.babelrc
package.json
webpack.config.js
rootCA.key
rootCA.pem

I have imported in server.js rootCA.key and rootCA.pem like this:

7 import key from '../../rootCA.key';
8 import cert from '../../rootCA.pem';

so whenever I build in my dist folder I import those files through file-loader.

Now to the problem

When I run the server and those two lines are executed the result is an ENOENT like this:

fs.js:114
    throw err;
    ^

Error: ENOENT: no such file or directory, open '/406598dc63994ef30b45f867a314da17.key'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at eval (webpack:///./src/server/server.js?:19:21)
    at Module../src/server/server.js (C:\Users\simon\Desktop\CodeProjects\dual-setup\dist\server.js:121:1)
    at __webpack_require__ (C:\Users\simon\Desktop\CodeProjects\dual-setup\dist\server.js:20:30)
    at C:\Users\simon\Desktop\CodeProjects\dual-setup\dist\server.js:84:18
    at Object.<anonymous> (C:\Users\simon\Desktop\CodeProjects\dual-setup\dist\server.js:87:10)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)

I don't understand what the problem could be as both server.js and the key are in the dist directory.

Some configurations

webpack.config.js


const path = require('path')
const fs = require('fs');
const nodeExternals = require('webpack-node-externals')
module.exports = {
  entry: {
    server: './src/server/server.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  target: 'node',
  node: {
    // Need this when working with express, otherwise the build fails
    __dirname: false,   // if you don't put this is, __dirname
    __filename: false,  // and __filename return blank or /
  },
  externals: [nodeExternals()], // Need this to avoid error when working with Express
  module: {
    rules: [
      {
        // Transpiles ES6-8 into ES5
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(pem|key)$/,
        use: {
          loader: 'file-loader'
        }
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080,
    https: {
      cert: fs.readFileSync('./rootCA.pem'),
      key: fs.readFileSync('./rootCA.key')
    }
  }
}

It should be noted that the command that I use to run the server is as simple as:

node ./dist/server.js

Comments

[Richard Schloss]

In the part where you readFileSync, I would use path.resolve. Same for the part with path.join.

contentBase: path.resolve(__dirname, 'dist'),
key: path.resolve(__dirname, 'rootCA.key'),
cert: path.resolve(__dirname, 'rootCA.cert'),

Also, since you're using relative paths, you'd have to change directories to your dist folder to run your server, but it seems like your source code goes up 2 directories, when your dist would only need to go up one (i.e., ../../ should be ../)

If possible, it may be helpful to use aliases to help with path resolution. See more examples here: webpack.js.org/configuration/resolve/

[Simone Aronica]

Hello Richard, thanks for the answer!
So yes, I go up twice because webpack bundles starting from the src file, and since server.js is contained into server, which is contained into root where the certificate is I have to go up twice so that webpack can import it into dist. As you can see from the error I get the key that fails to be imported is has a / before the filename, which means that it gets imported correctly into the dist folder. However I will try tomorrow to use path.resolve as (I hope at least) it might help! So thanks for the tip!

[Katie Nelson]

Hey Simone. Have you tried running this outside your own Desktop folder? Create a new folder under C:\ and use absolute paths rather than relative ones.

[Simone Aronica]

Hey thanks for the reply. I cannot use absolute paths as in this project we'll be many developers... But no, I haven't tried.

[Katie Nelson]

Okay, but let us know how it turns out.

[Simone Aronica]

I will, but I'm pretty stuck as there's no reason for it to not work. I could understand it if it was something generated by me, but it's something generated by webpack itself. I think we'll probably just stay on HTTP for the development and then upgrade to HTTPS via the Domain Provider.