next.config.js (function) - unable to load site (localhost) #12749

coderdix · 2020-05-11T22:13:39Z

coderdix
May 11, 2020

I was having the same issue using withPlugins plugin; however, in an attempt to simplifiy things and make modifications to the configuration without plugins I set up the following and am now unable to even load the site. I've read through the documentation but not sure what I'm doing wrong. Any help would be greatly appreciated.

Using version 9.4

`const {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} = require("next/constants");
const withPlugins = require("next-compose-plugins");
const withLess = require("@zeit/next-less");
const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

const themeVariables = lessToJS(
fs.readFileSync(
path.resolve(__dirname, "./styles/antd-custom.less"),
"utf-8",
),
);

module.exports = (phase, { defaultConfig }) => {
const isDev = phase === PHASE_DEVELOPMENT_SERVER;
const isProd =
phase === PHASE_PRODUCTION_BUILD && process.env.STAGING !== "1";
const isStaging =
phase === PHASE_PRODUCTION_BUILD && process.env.STAGING === "1";

console.log(isDev: ${isDev} isProd: ${isProd} isStaging: ${isStaging});

return Object.assign({}, defaultConfig, {
	env: {
		HOST: (() => {
			if (isDev) return "http://localhost:5000";
			if (isProd) return "https://site.com";
			if (isStaging) return "https://staging.site.com";
			return "HOST:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		SERVER: (() => {
			if (isDev) return "http://localhost:1337";
			if (isProd) return "https://api.site.com";
			if (isStaging) return "https://api.staging.site.com";
			return "SERVER:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		BUSINESS: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "user_role_id";
			return "BUSINESS:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		NONPROFIT: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "user_role_id";
			return "NONPROFIT:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		SCHOOL: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "user_role_id";
			return "SCHOOL:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		INDIVIDUAL: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "user_role_id";
			return "INDIVIDUAL:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		PUBLIC: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "user_role_id";
			return "PUBLIC:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		GOOGLE_MAPS: (() => {
			if (isDev || isStaging)
				return "google_maps_key";
			if (isProd) return "";
			return "GOOGLE_MAPS:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		STRIPE_PK: (() => {
			if (isDev || isStaging) return "stripe_test_key";
			if (isProd) return "";
			return "STRIPE_PK:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		STRIPE_SK: (() => {
			if (isDev || isStaging) return "stripe_test_key";
			if (isProd) return "";
			return "STRIPE_SK:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		DEFAULT_IMG: (() => {
			if (isDev || isStaging)
				return "/uploads/t1t-default-profile-img_81598c25ae.png";
			if (isProd) return "";
			return "DEFAULT_IMG:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		MARKER_BUSINESS: (() => {
			if (isDev || isStaging)
				return "/uploads/t1t_nonprofit_marker_sq_51e20ee43e.png";
			if (isProd) return "";
			return "MARKER_BUSINESS:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		MARKER_NONPROFIT: (() => {
			if (isDev || isStaging)
				return "/uploads/t1t-business-marker_6b484375d4.png";
			if (isProd) return "";
			return "MARKER_NONPROFIT:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
	},
	// [PHASE_PRODUCTION_BUILD]: {
//   assetPerfix: "/public"
// },
	async generateBuildId() {
		if (process.env.BUILD_ID) {
			return process.env.BUILD_ID;
		} else {
			return `${new Date().getTime()}`;
		}
	},
	webpack(config, { isServer }) {
		if (isServer) {
			const antStyles = /antd\/.*?\/style.*?/;
			const origExternals = [...config.externals];

			config.externals = [
				(context, request, callback) => {
					if (request.match(antStyles)) return callback();

					if (typeof orginExternals[0] === "function") {
						origExternals[0](context, request, callback);
					} else {
						callback();
					}
				},
				...(typeof origExternals[0] === "function" ? [] : origExternals),
			];

			config.module.rules.unshift({ test: antStyles, use: "null-loader" });
		}

		return config;
	},

});
};
`

jamesmosier · 2020-05-12T00:12:00Z

jamesmosier
May 12, 2020

It looks like a typo is causing the issues: origExternals !== orginExternals

You have const origExternals but then below that if (typeof orginExternals[0] === "function") {

Fixing that allows the app to run!

6 replies

coderdix May 12, 2020
Author

Thanks so much for the help. So, I fixed that and tried to apply the withPlugins because I was getting some errors and now getting:

Warning: Detected next.config.js, no exported configuration found. https://err.sh/zeit/next.js/empty-configuration

Using external babel configuration
Location: ".../t1t/site/frontend/.babelrc"
error - ./node_modules/antd/lib/grid/style/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/antd/lib/grid/style/css.js
isDev: true isProd: false isStaging: false
Server Ready

`const {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} = require("next/constants");
const withPlugins = require("next-compose-plugins");
const withLess = require("@zeit/next-less");
const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, "./styles/antd-custom.less"), "utf-8")
);

module.exports = (phase, { defaultConfig }) => {
const isDev = phase === PHASE_DEVELOPMENT_SERVER;
const isProd =
phase === PHASE_PRODUCTION_BUILD && process.env.STAGING !== "1";
const isStaging =
phase === PHASE_PRODUCTION_BUILD && process.env.STAGING === "1";

console.log(`isDev: ${isDev} isProd: ${isProd} isStaging: ${isStaging}`);

const nextConfig = Object.assign({}, defaultConfig, {
	env: {
		HOST: (() => {
			if (isDev) return "http://localhost:5000";
			if (isProd) return "https://site.com";
			if (isStaging) return "https://staging.site.com";
			return "HOST:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		SERVER: (() => {
			if (isDev) return "http://localhost:1337";
			if (isProd) return "https://api.site.com";
			if (isStaging) return "https://api.staging.site.com";
			return "SERVER:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		BUSINESS: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "user_role_id";
			return "BUSINESS:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		NONPROFIT: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "user_role_id";
			return "NONPROFIT:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		SCHOOL: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "5eb97ba0f289f95a62566e3a";
			return "SCHOOL:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		INDIVIDUAL: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "user_role_id";
			return "INDIVIDUAL:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		PUBLIC: (() => {
			if (isDev) return "user_role_id";
			if (isProd) return "";
			if (isStaging) return "user_role_id";
			return "PUBLIC:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		GOOGLE_MAPS: (() => {
			if (isDev || isStaging)
				return "google_maps_key";
			if (isProd) return "";
			return "GOOGLE_MAPS:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		STRIPE_PK: (() => {
			if (isDev || isStaging) return "stripe_key";
			if (isProd) return "";
			return "STRIPE_PK:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		STRIPE_SK: (() => {
			if (isDev || isStaging) return "stripe_key";
			if (isProd) return "";
			return "STRIPE_SK:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		DEFAULT_IMG: (() => {
			if (isDev || isStaging)
				return "/uploads/t1t-default-profile-img_81598c25ae.png";
			if (isProd) return "";
			return "DEFAULT_IMG:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		MARKER_BUSINESS: (() => {
			if (isDev || isStaging)
				return "/uploads/t1t_nonprofit_marker_sq_51e20ee43e.png";
			if (isProd) return "";
			return "MARKER_BUSINESS:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
		MARKER_NONPROFIT: (() => {
			if (isDev || isStaging)
				return "/uploads/t1t-business-marker_6b484375d4.png";
			if (isProd) return "";
			return "MARKER_NONPROFIT:not (isDev,isProd && !isStaging,isProd && isStaging)";
		})(),
	},
	async generateBuildId() {
		if (process.env.BUILD_ID) {
			return process.env.BUILD_ID;
		} else {
			return `${new Date().getTime()}`;
		}
	},
	webpack(config, { isServer }) {
		if (isServer) {
			const antStyles = /antd\/.*?\/style.*?/;
			const origExternals = [...config.externals];

			config.externals = [
				(context, request, callback) => {
					if (request.match(antStyles)) return callback();

					if (typeof origExternals[0] === "function") {
						origExternals[0](context, request, callback);
					} else {
						callback();
					}
				},
				...(typeof origExternals[0] === "function" ? [] : origExternals),
			];

			config.module.rules.unshift({ test: antStyles, use: "null-loader" });
		}

		return config;
	},
});

return withPlugins(
	[
		[withCss],
		[
			withSass,
			{
				cssModules: false,
				cssLoaderOptions: {
					localIdentName: "[path]__[local]__[hash:base64:5]",
				},
			},
		],
		[withLess, { javascriptEnabled: true, modifyVars: themeVariables }],
	],
	nextConfig
);

};
`

jamesmosier May 12, 2020

So it looks like "Warning: Detected next.config.js, no exported configuration found." is a bug. Currently the code just checks for an exported object but in your case you export a function which is valid (I opened a PR to fix this #12791). This shouldn't effect your app though.

As for your other issue with the CSS, where are you importing ant? Just in the next.config.js or elsewhere? I'm not super familiar with ant, aside from reading over the example

coderdix May 12, 2020
Author

Thanks :-)

Yes, just in the next.config.js file... what's crazy is that when I had the exact same settings (however with string values for the env object properties & just used 2 different next.config.js files for each environment) it was working & importing the styles.

Although the production version did import a few additional ant design css files than the local and create an odd difference in appearance (e.g. in some noticeable background colors and margin differences that were on my local environment)

jamesmosier May 12, 2020

It looks like someone else is having issues combining the next-less and next-compose-plugins library but it likely is unrelated: cyrilwanner/next-compose-plugins#30

But it appears that in your case returning a function from your next.config.js is causing the issue. I'm not seeing any example in the https://github.com/cyrilwanner/next-compose-plugins repo that uses a next.config.js that returns a function (but I could've missed it!). But I instead made your next.config.js export an object and was able to get it to work.

I may be overlooking something in your config, but couldn't you instead of checking what phase something is to then set your env, could you check process.env.NODE_ENV === 'development' or process.env.NODE_ENV === 'production' and then set your environment variables accordingly? Additionally you wouldn't have access to defaultConfig so that might be a deal breaker as well.

I came up with this as the config (using the with-ant-design-less example as my test repo):

const withPlugins = require("next-compose-plugins");
const withLess = require("@zeit/next-less");
const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf-8")
);

const isDev = process.env.NODE_ENV === "development";
const isProd =
  process.env.NODE_ENV === "production" && process.env.STAGING !== "1";
const isStaging =
  process.env.NODE_ENV === "production" && process.env.STAGING === "1";

const nextConfig = {
  env: {
    HOST: (() => {
      if (isDev) return "http://localhost:5000";
      if (isProd) return "https://site.com";
      if (isStaging) return "https://staging.site.com";
      return "HOST:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    SERVER: (() => {
      if (isDev) return "http://localhost:1337";
      if (isProd) return "https://api.site.com";
      if (isStaging) return "https://api.staging.site.com";
      return "SERVER:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    BUSINESS: (() => {
      if (isDev) return "user_role_id";
      if (isProd) return "";
      if (isStaging) return "user_role_id";
      return "BUSINESS:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    NONPROFIT: (() => {
      if (isDev) return "user_role_id";
      if (isProd) return "";
      if (isStaging) return "user_role_id";
      return "NONPROFIT:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    SCHOOL: (() => {
      if (isDev) return "user_role_id";
      if (isProd) return "";
      if (isStaging) return "5eb97ba0f289f95a62566e3a";
      return "SCHOOL:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    INDIVIDUAL: (() => {
      if (isDev) return "user_role_id";
      if (isProd) return "";
      if (isStaging) return "user_role_id";
      return "INDIVIDUAL:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    PUBLIC: (() => {
      if (isDev) return "user_role_id";
      if (isProd) return "";
      if (isStaging) return "user_role_id";
      return "PUBLIC:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    GOOGLE_MAPS: (() => {
      if (isDev || isStaging) return "google_maps_key";
      if (isProd) return "";
      return "GOOGLE_MAPS:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    STRIPE_PK: (() => {
      if (isDev || isStaging) return "stripe_key";
      if (isProd) return "";
      return "STRIPE_PK:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    STRIPE_SK: (() => {
      if (isDev || isStaging) return "stripe_key";
      if (isProd) return "";
      return "STRIPE_SK:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    DEFAULT_IMG: (() => {
      if (isDev || isStaging)
        return "/uploads/t1t-default-profile-img_81598c25ae.png";
      if (isProd) return "";
      return "DEFAULT_IMG:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    MARKER_BUSINESS: (() => {
      if (isDev || isStaging)
        return "/uploads/t1t_nonprofit_marker_sq_51e20ee43e.png";
      if (isProd) return "";
      return "MARKER_BUSINESS:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
    MARKER_NONPROFIT: (() => {
      if (isDev || isStaging)
        return "/uploads/t1t-business-marker_6b484375d4.png";
      if (isProd) return "";
      return "MARKER_NONPROFIT:not (isDev,isProd && !isStaging,isProd && isStaging)";
    })(),
  },
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables, // make your antd custom effective
  },
  async generateBuildId() {
    if (process.env.BUILD_ID) {
      return process.env.BUILD_ID;
    } else {
      return `${new Date().getTime()}`;
    }
  },
  webpack(config, { isServer }) {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];

      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();

          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals),
      ];

      config.module.rules.unshift({ test: antStyles, use: "null-loader" });
    }

    return config;
  },
};

module.exports = withPlugins(
  [
    [withCss],
    [
      withSass,
      {
        cssModules: false,
        cssLoaderOptions: {
          localIdentName: "[path]__[local]__[hash:base64:5]",
        },
      },
    ],
    [withLess],
  ],
  nextConfig
);

coderdix May 12, 2020
Author

Thanks! this works and I learned a bit through the experience. I might need to do a search through the discussions || make a new one - but now the only issue I face is I'm getting a 404 error with my production version on a remote unbuntu 18 host... however, locally it works

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

next.config.js (function) - unable to load site (localhost) #12749

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 6 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

next.config.js (function) - unable to load site (localhost) #12749

Uh oh!

coderdix May 11, 2020

Replies: 1 comment · 6 replies

Uh oh!

Uh oh!

jamesmosier May 12, 2020

Uh oh!

coderdix May 12, 2020 Author

Uh oh!

jamesmosier May 12, 2020

Uh oh!

coderdix May 12, 2020 Author

Uh oh!

Uh oh!

jamesmosier May 12, 2020

Uh oh!

coderdix May 12, 2020 Author

coderdix
May 11, 2020

Replies: 1 comment 6 replies

jamesmosier
May 12, 2020

coderdix May 12, 2020
Author

coderdix May 12, 2020
Author

coderdix May 12, 2020
Author