Dynamic import inside getInitialProps and template literals

[gbreux]

Bug report

Describe the bug

When i tried to use the new serverless feature (v8.0.0-canary.3) on AWS, I thought it was related to AWS itself (see #4496 (comment)). But I may have found an unrelated issue that can be reproduce locally.

  static async getInitialProps(props = {}) {
    const { ctx = {}, Component = {} } = props;

    // This will work
    //const i18n = await import(`../locale/en.json`);

    // This won't
    const lang = 'en';
    const i18n = await import(`../locale/${lang}.json`);

    if (Component.getInitialProps) {
      var pageProps = await Component.getInitialProps(ctx);
    }
    return { i18n, pageProps };
  }

When you try to use ${lang} inside the import() function, the server will break with this error TypeError: undefined is not a function and may be related to an undefined .map() function: Promise.all([].slice(1).map(undefined))

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. clone https://github.com/guillaumebreux/nextjs-dynamic-import
2. npm i
3. npm run build && node test.js
4. go to localhost:3000
5. You can make it work by uncommenting pages/_app.js:8 and commenting pages/_app.js:11

Expected behavior

literal template should be parsed properly before importing the file (?)
Also, everything works fine locally with the next command.

System information

• Version of Next.js: v8.0.0-canary.3

Please let me know if I can help you further or if I'm completely missing something 😄

[timneutkens]

Basically we have to inline all dynamic imports into the bundle for rendering. I'd like to start by pointing out using dynamic requires/import is generally a bad idea as it'll bundle way more than you expect / want to. Besides that feel free to investigate fixing this, as this is not going to be a blocker for the v8 release. The affected plugin is https://github.com/zeit/next.js/blob/canary/packages/next/build/webpack/plugins/serverless-plugin.ts

[gbreux]

Well this bug wasn't related to the issue I had with AWS after all. It's been 2 days now and tried everything I could think of but I still didn't manage to make it work with an api gateway event object.

So.. I'll wait for someone to find a solution and keep deploying my 40mb app on s3 at every deploy 😬

ps: for this particular ticket, i'll take a look but I found a more suitable solution to get my translation file: a simple fetch(). You were right about dynamic requires/import beeing a bad idea :D

[emko4]

I have similar issue after upgrade from version 7.0.2 to 8.0.3. I'm using dynamic require for languages from react-intl package, where languages are defined in config.

_.each(config.get('languages'), (language) => {
    const localeData = require(`react-intl/locale-data/${language}`);

    addLocaleData(localeData);
});

If NextJS 8 doesn't support this, do you have some advice how to make it work? 🤔 Or is there another better solution?

[solidsnail]

import path from "path";
static async getInitialProps(props = {}) {
const lang = "en";
const i18n = eval(`require('${path.resolve(`../locale/${lang}.json`)}')`);

[Timer]

Confirmed this works fine with Next.js 9 with the provided repository! Thanks 🙏

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.