Importing local files in next.config
The issue
Hi, The issue we are facing is wanting to create a dynamic next config. This works fine when we do not import any files but when trying to import a constant file in the next.config.mjs, things break.
We are on next version 12.1 in order to use the MJS variant of the config file.
The constant file is a simple JS file with some values to determine the locales that we need to use for the different brands we support. These are used on multiple places, that is why we do not wan't to hardcode these values in here too.
import { locales } from './src/constants/locales'; // It breaks on this importconst currentPlatform = process.env.NEXT_PUBLIC_PLATFORM;module.exports = () => ({ i18n: { localeDetection: false, ...locales[currentPlatform], }, images: { domains: [ // Our domains ], }, async rewrites() { return [ // Our rewrites ]; }, webpack: (config, { defaultLoaders }) => { config.module.rules.push( // Our config ); return config; },});
The error message
This is the error that is thrown when we try to start the dev server, suggesting the import path is wrong. (it is not.)
error - Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-errorError [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/*****/Development/****/********/src/constants/locales' imported from /Users/******/Development/******/******/next.config.mjsDid you mean to import ../src/constants/locales.js? at finalizeResolution (internal/modules/esm/resolve.js:276:11) at moduleResolve (internal/modules/esm/resolve.js:699:10) at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11) at Loader.resolve (internal/modules/esm/loader.js:86:40) at Loader.getModuleJob (internal/modules/esm/loader.js:230:28) at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40) at link (internal/modules/esm/module_job.js:55:36) { code: 'ERR_MODULE_NOT_FOUND'}
- = Censored pathnames
Any tips, tricks or extra info is welcome!
Thanks in advance.