881: Support next.config.mjs (#890)

Reviewed-on: https://git.vdb.to/cerc-io/stack-orchestrator/pulls/890

Author: Thomas E Lackey

stack_orchestrator/data/container-build/cerc-nextjs-base/scripts/build-app.sh

@@ -5,8 +5,11 @@ if [ -n "$CERC_SCRIPT_DEBUG" ]; then
 fi
 
 CERC_MIN_NEXTVER=13.4.2
+CERC_DEFAULT_WEBPACK_VER="5.93.0"
 
 CERC_NEXT_VERSION="${CERC_NEXT_VERSION:-keep}"
+CERC_WEBPACK_VERSION="${CERC_WEBPACK_VERSION:-keep}"
+
 CERC_BUILD_TOOL="${CERC_BUILD_TOOL}"
 if [ -z "$CERC_BUILD_TOOL" ]; then
   if [ -f "pnpm-lock.yaml" ]; then
@@ -25,39 +28,65 @@ WORK_DIR="${1:-/app}"
 
 cd "${WORK_DIR}" || exit 1
 
+if [ -f "next.config.mjs" ]; then
+  NEXT_CONFIG_JS="next.config.mjs"
+  IMPORT_OR_REQUIRE="import"
+else
+  NEXT_CONFIG_JS="next.config.js"
+  IMPORT_OR_REQUIRE="require"
+fi
+
 # If this file doesn't exist at all, we'll get errors below.
-if [ ! -f "next.config.js" ]; then
-  touch next.config.js
+if [ ! -f "${NEXT_CONFIG_JS}" ]; then
+  touch ${NEXT_CONFIG_JS}
 fi
 
 if [ ! -f "next.config.dist" ]; then
-  cp next.config.js next.config.dist
+  cp $NEXT_CONFIG_JS next.config.dist
 fi
 
 which js-beautify >/dev/null
 if [ $? -ne 0 ]; then
   npm i -g js-beautify
 fi
 
-js-beautify next.config.dist > next.config.js
-echo "" >> next.config.js
+# js-beautify formats NEXTJS_CONFIG_FILE (ie next.config.js / next.config.mjs) so we can reliably transformable later
+js-beautify next.config.dist > ${NEXT_CONFIG_JS}
+echo "" >> ${NEXT_CONFIG_JS}
 
-WEBPACK_REQ_LINE=$(grep -n "require([\'\"]webpack[\'\"])" next.config.js | cut -d':' -f1)
-if [ -z "$WEBPACK_REQ_LINE" ]; then
-  cat > next.config.js.0 <<EOF
+if [ "${IMPORT_OR_REQUIRE}" == "require" ]; then
+  WEBPACK_REQ_LINE=$(grep -n "require([\'\"]webpack[\'\"])" ${NEXT_CONFIG_JS} | cut -d':' -f1)
+  if [ -z "$WEBPACK_REQ_LINE" ]; then
+    cat > ${NEXT_CONFIG_JS}.0 <<EOF
     const webpack = require('webpack');
 EOF
+  fi
+else
+  WEBPACK_IMPORT_LINE=$(grep -n "^import .*[\'\"]webpack[\'\"];?$" ${NEXT_CONFIG_JS} | cut -d':' -f1)
+  if [ -z "$WEBPACK_IMPORT_LINE" ]; then
+    cat > ${NEXT_CONFIG_JS}.0 <<EOF
+    import webpack from 'webpack';
+EOF
+  fi
+  CREATE_REQUIRE_LINE=$(grep -n "require = createRequire" ${NEXT_CONFIG_JS} | cut -d':' -f1)
+  if [ -z "$CREATE_REQUIRE_LINE" ]; then
+    cat >> ${NEXT_CONFIG_JS}.0 <<EOF
+    import { createRequire } from "module";
+    const require = createRequire(import.meta.url);
+EOF
+  fi
 fi
 
-cat > next.config.js.1 <<EOF
+cat > ${NEXT_CONFIG_JS}.1 <<EOF
 let envMap;
 try {
   // .env-list.json provides us a list of identifiers which should be replaced at runtime.
   envMap = require('./.env-list.json').reduce((a, v) => {
     a[v] = \`"CERC_RUNTIME_ENV_\${v.split(/\./).pop()}"\`;
     return a;
   }, {});
-} catch {
+} catch (e) {
+  console.error(e);
   // If .env-list.json cannot be loaded, we are probably running in dev mode, so use process.env instead.
   envMap = Object.keys(process.env).reduce((a, v) => {
     if (v.startsWith('CERC_')) {
@@ -66,23 +95,24 @@ try {
     return a;
   }, {});
 }
+console.log(envMap);
 EOF
 
-CONFIG_LINES=$(wc -l next.config.js | awk '{ print $1 }')
-ENV_LINE=$(grep -n 'env:' next.config.js | cut -d':' -f1)
-WEBPACK_CONF_LINE=$(egrep -n 'webpack:\s+\([^,]+,' next.config.js | cut -d':' -f1)
+CONFIG_LINES=$(wc -l ${NEXT_CONFIG_JS} | awk '{ print $1 }')
+ENV_LINE=$(grep -n 'env:' ${NEXT_CONFIG_JS} | cut -d':' -f1)
+WEBPACK_CONF_LINE=$(egrep -n 'webpack:\s+\([^,]+,' ${NEXT_CONFIG_JS} | cut -d':' -f1)
 NEXT_SECTION_ADJUSTMENT=0
 
 if [ -n "$WEBPACK_CONF_LINE" ]; then
-  WEBPACK_CONF_VAR=$(egrep -n 'webpack:\s+\([^,]+,' next.config.js | cut -d',' -f1 | cut -d'(' -f2)
-  head -$(( ${WEBPACK_CONF_LINE} )) next.config.js > next.config.js.2
-  cat > next.config.js.3 <<EOF
+  WEBPACK_CONF_VAR=$(egrep -n 'webpack:\s+\([^,]+,' ${NEXT_CONFIG_JS} | cut -d',' -f1 | cut -d'(' -f2)
+  head -$(( ${WEBPACK_CONF_LINE} )) ${NEXT_CONFIG_JS} > ${NEXT_CONFIG_JS}.2
+  cat > ${NEXT_CONFIG_JS}.3 <<EOF
       $WEBPACK_CONF_VAR.plugins.push(new webpack.DefinePlugin(envMap));
 EOF
   NEXT_SECTION_LINE=$((WEBPACK_CONF_LINE))
 elif [ -n "$ENV_LINE" ]; then
-  head -$(( ${ENV_LINE} - 1 )) next.config.js > next.config.js.2
-  cat > next.config.js.3 <<EOF
+  head -$(( ${ENV_LINE} - 1 )) ${NEXT_CONFIG_JS} > ${NEXT_CONFIG_JS}.2
+  cat > ${NEXT_CONFIG_JS}.3 <<EOF
     webpack: (config) => {
       config.plugins.push(new webpack.DefinePlugin(envMap));
       return config;
@@ -91,15 +121,24 @@ EOF
   NEXT_SECTION_ADJUSTMENT=1
   NEXT_SECTION_LINE=$ENV_LINE
 else
-  echo "WARNING: Cannot find location to insert environment variable map in next.config.js" 1>&2
-  rm -f next.config.js.*
+  echo "WARNING: Cannot find location to insert environment variable map in ${NEXT_CONFIG_JS}" 1>&2
+  rm -f ${NEXT_CONFIG_JS}.*
   NEXT_SECTION_LINE=0
 fi
 
-tail -$(( ${CONFIG_LINES} - ${NEXT_SECTION_LINE} + ${NEXT_SECTION_ADJUSTMENT} )) next.config.js > next.config.js.5
+tail -$(( ${CONFIG_LINES} - ${NEXT_SECTION_LINE} + ${NEXT_SECTION_ADJUSTMENT} )) ${NEXT_CONFIG_JS} > ${NEXT_CONFIG_JS}.4
 
-cat next.config.js.* | sed 's/^ *//g' | js-beautify | grep -v 'process\.\env\.' | js-beautify > next.config.js
-rm next.config.js.*
+rm -f ${NEXT_CONFIG_JS}
+for ((i=0; i <=5; i++)); do
+  if [ -f "${NEXT_CONFIG_JS}.${i}" ]; then
+    if [ $i -le 2 ] ; then
+      cat ${NEXT_CONFIG_JS}.${i} >> ${NEXT_CONFIG_JS}
+    else
+      cat ${NEXT_CONFIG_JS}.${i} | sed 's/^ *//g' | js-beautify | grep -v 'process\.\env\.' | js-beautify >> ${NEXT_CONFIG_JS}
+    fi
+  fi
+done
+rm ${NEXT_CONFIG_JS}.*
 
 "${SCRIPT_DIR}/find-env.sh" "$(pwd)" > .env-list.json
 
@@ -115,6 +154,19 @@ if [ "$CERC_NEXT_VERSION" != "keep" ] && [ "$CUR_NEXT_VERSION" != "$CERC_NEXT_VE
   mv package.json.$$ package.json
 fi
 
+CUR_WEBPACK_VERSION="`jq -r '.dependencies.webpack' package.json`"
+if [ -z "$CUR_WEBPACK_VERSION" ]; then
+  CUR_WEBPACK_VERSION="`jq -r '.devDependencies.webpack' package.json`"
+fi
+if [ "${CERC_WEBPACK_VERSION}" != "keep" ] || [ "${CUR_WEBPACK_VERSION}" == "null" ]; then
+  if [ -z "$CERC_WEBPACK_VERSION" ] || [ "$CERC_WEBPACK_VERSION" == "keep" ]; then
+    CERC_WEBPACK_VERSION="${CERC_DEFAULT_WEBPACK_VER}"
+  fi
+  echo "Webpack is required for env variable substitution.  Adding to webpack@$CERC_WEBPACK_VERSION to dependencies..." 1>&2
+  cat package.json | jq ".dependencies.webpack = \"$CERC_WEBPACK_VERSION\"" > package.json.$$
+  mv package.json.$$ package.json
+fi
+
 time $CERC_BUILD_TOOL install || exit 1
 
 CUR_NEXT_VERSION=`jq -r '.version' node_modules/next/package.json`

stack_orchestrator/data/container-build/cerc-nextjs-base/scripts/find-env.sh

@@ -20,9 +20,11 @@ for d in $(find . -maxdepth 1 -type d | grep -v '\./\.' | grep '/' | cut -d'/' -
   done
 done
 
-NEXT_CONF="next.config.js next.config.dist"
+NEXT_CONF="next.config.mjs next.config.js next.config.dist"
 for f in $NEXT_CONF; do
-    cat "$f" | tr -s '[:blank:]' '\n' | tr -s '[{},()]' '\n' | egrep -o 'process.env.[A-Za-z0-9_]+' >> $TMPF
+    if [ -f "$f" ]; then
+        cat "$f" | tr -s '[:blank:]' '\n' | tr -s '[{},()]' '\n' | egrep -o 'process.env.[A-Za-z0-9_]+' >> $TMPF
+    fi
 done
 
 cat $TMPF | sort -u | jq  --raw-input .  | jq --slurp .