FetchError: unable to verify the first certificate when using self signed certificate

  docker, next.js, reactjs, ssl

I have my self-signed certificate but my Next.js (A react framework) throws this error since I started implementing it:

FetchError: request to https://nginx:443/api/items failed, reason: unable to verify the first certificate

This is how I try to fetch the list:

  const res = await fetch('https://nginx:443/api/items', {
    method: 'GET',
  })

or

  const res = await fetch('https://backend.mysite.local:443/api/items', {
    method: 'GET',
  })

I also tried to set my next.config.js like so: (from this Stack Overflow post: Unable to verify the first certificate Next.js)

const webpack = require("webpack");
          
  module.exports = {
    webpack: (config) => {
      config.node = {
        fs: "empty",
      };
  
      process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
      const env = Object.keys(process.env).reduce((acc, curr) => {
        acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
        return acc;
      }, {});
  
      config.plugins.push(new webpack.DefinePlugin(env));
  
      return config;
    },
  }; 

But then I get this error:

ValidationError: Invalid configuration object. Webpack has been
initialized using a configuration object that does not match the API
schema

configuration.node has an unknown property ‘fs’. These properties are
valid:
#9 7.730 object { __dirname?, __filename?, global? }

Source: Docker Questions

LEAVE A COMMENT