Any idea to resolve: Module not found: Can't resolve 'process'

[MoOx]

Hi everyone!

I just setup next-i18next for a fresh project (all deps are latest versions) and I am facing an issue with getStaticProps.

Any idea what it might be?

Here is my next config (I am using rescript)

const path = require("path");
const bsconfigJson = require("./bsconfig.json");
const packageJson = require("./package.json");
const modulesToTranspile = [
  // rescript & rescript deps
  "rescript",
  ...bsconfigJson["bs-dependencies"],
  ...Object.keys(packageJson.dependencies).filter((dep) =>
    dep.startsWith("react-native")
  ),
];
const withTM = require("next-transpile-modules")(modulesToTranspile);

const { i18n } = require("./next-i18next.config");

const config = {
  i18n,

  env: {
    ENV: process.env.NODE_ENV,
  },
  target: "serverless",

  // rescript
  pageExtensions: ["jsx", "js", "bs.js"],

  webpack: (config, options) => {
    if (!options.isServer) {
      // packages used for SSR only are skipped
      config.resolve.fallback = {
        fs: false,
        path: false,
      };
    }

    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      "react-native$": "react-native-web",
    };
    config.resolve.extensions = [
      ".web.js",
      ".web.jsx",
      ".web.ts",
      ".web.tsx",
      ...config.resolve.extensions,
    ];
    return config;
  },
};

module.exports = withTM(config);

and next-i18next.config

module.exports = {
  i18n: {
    defaultLocale: "fr",
    locales: ["fr"],
  },
};

and the page that I use (generated JS from rescript, that I inspected and looks legit)

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as T from "../T.bs.js";
import * as Curry from "rescript/lib/es6/curry.js";
import * as React from "react";
import * as NextI18next from "next-i18next";
import * as ReactNative from "react-native";
import * as ViewContained from "../components/shareable/ViewContained.bs.js";
import * as WebsiteFooter from "../components/WebsiteFooter.bs.js";
import * as WebsiteHeader from "../components/WebsiteHeader.bs.js";
import * as WebsiteWrapper from "../components/WebsiteWrapper.bs.js";
import * as Font$ReactMultiversal from "react-multiversal/src/Font.bs.js";
import * as Spacer$ReactMultiversal from "react-multiversal/src/Spacer.bs.js";
import * as Predefined$ReactMultiversal from "react-multiversal/src/Predefined.bs.js";
import * as SpacedView$ReactMultiversal from "react-multiversal/src/SpacedView.bs.js";
import * as ServerSideTranslations from "next-i18next/serverSideTranslations";

function PageIndex(Props) {
  var theme = Curry._2(T.useTheme, undefined, undefined);
  var match = NextI18next.useTranslation();
  return React.createElement(
    WebsiteWrapper.make,
    {
      children: null,
    },
    React.createElement(WebsiteHeader.make, {}),
    React.createElement(ReactNative.View, {
      style: [Predefined$ReactMultiversal.styles.flexGrow, theme.styles.back],
      children: React.createElement(ReactNative.ImageBackground, {
        source: {
          uri: "/andy-cheetham-IWnpFDTsJ6s-unsplash.jpg",
        },
        style: {
          height: 500,
        },
        children: React.createElement(ViewContained.make, {
          children: React.createElement(
            SpacedView$ReactMultiversal.make,
            {
              horizontal: /* S */ 4,
              children: null,
            },
            React.createElement(Spacer$ReactMultiversal.make, {
              size: /* XL */ 1,
            }),
            React.createElement(ReactNative.Text, {
              children: Curry._1(match.t, "Index_Baseline"),
              style: [
                Font$ReactMultiversal.ios.title1,
                T.themeDark.styles.text,
              ],
            }),
            React.createElement(Spacer$ReactMultiversal.make, {
              size: /* XL */ 1,
            })
          ),
        }),
      }),
    }),
    React.createElement(WebsiteFooter.make, {})
  );
}

function getStaticProps(param) {
  return ServerSideTranslations.serverSideTranslations(param.locale, [
    "common",
  ]).then(function (serverSideTranslations) {
    return Promise.resolve({
      props: serverSideTranslations,
    });
  });
}

var make = PageIndex;

var $$default = PageIndex;

export { make, $$default, $$default as default, getStaticProps };
/* T Not a pure module */

Any idea on what I setup wrong? Thanks in advance!

[MoOx]

If you are facing issue like this Can't resolve 'SOME NODE MODULE' and/or have to use workaround like web pack config.resolve to "disable" some modules that trigger the issue, you are probably not following the "rule" of writing Node code in pages folder only. In short Node import & code MUST be in pages folder, otherwise not correctly removed for the frontend. In my case, my pages are not written in the page folder and that's what trigger the problem. Moving Node code into pages (must be JS then... :( ) allow Next to remove the Node code properly.