最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - NextJs Next.config.mjs import local constant file - Stack Overflow

programmeradmin4浏览0评论

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 import

const 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 
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/*****/Development/****/********/src/constants/locales' imported from /Users/******/Development/******/******/next.config.mjs
Did 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 wele!

Thanks in advance.

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 import

const 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/docs/messages/next-config-error
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/*****/Development/****/********/src/constants/locales' imported from /Users/******/Development/******/******/next.config.mjs
Did 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 wele!

Thanks in advance.

Share Improve this question asked Dec 16, 2021 at 15:15 Wesley JanseWesley Janse 1,8142 gold badges8 silver badges15 bronze badges 3
  • can you show the file name and export syntax of /src/constants/locales ? (I probably can't help, but it would be informative to others as well, I guess.) – kca Commented Dec 17, 2021 at 17:09
  • "Did you mean to import ../src/constants/locales.js?" - Are you certain the relative path to the locale.js file is correct? The error message seems to indicate otherwise. – juliomalves Commented Jan 23, 2022 at 11:32
  • 1 @ItayTur Nope, I have just duplicated the content in the next config file. Since it was something that won't be updated much it's not that much of an issue. – Wesley Janse Commented Nov 9, 2022 at 14:21
Add a ment  | 

3 Answers 3

Reset to default 1

I had the same issue using nextjs v13.x and I was able to successfully import my:

import { var1, var2 } from './src/constants.js

with a standard js module written in the constants file.

const var1 = 'hello'; const var2 = 'world'; module.exports = { var1, var2 };

Perhaps you are using .vercelignore and not include the file/folder. I made the same mistake, in my case I not included !/lingui.config.js.

> Build error occurred
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/vercel/path0/lingui.config.js' imported from /vercel/path0/next.config.mjs
    at new NodeError (internal/errors.js:322:7)
    at moduleResolve (internal/modules/esm/resolve.js:731:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
    at link (internal/modules/esm/module_job.js:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}

To fix, I add the missing file:

/*

!/public
!/src
!/lingui.config.js # <-- my mistake
!/next-env.d.ts
!/next.config.mjs
!/package.json
!/postcss.config.js
!/tailwind.config.cjs
!/tsconfig.json
!/yarn.lock

Try updating your filename to ./src/constants/locales.mjs

And then from your next.config.js, add the extension to your import path:

import { locales } from './src/constants/locales.mjs';

(I don't have the official docs handy for why. Will update here I find those again)

发布评论

评论列表(0)

  1. 暂无评论