Dynamic imports using preval module path

[CrockAgile]

The next/dynamic import is failing in handle-import.js due to a preprocessed module name evaluating to undefined. Boiled down version of code:

// index.js
const preval_modulename = preval`
    module.exports = './hello-' + 'world';
`;

console.log(preval_modulename); // prints './hello-world'
const DynamicComponent = dynamic(import(preval_modulename)); // reduces to import(undefined)

// .babelrc
{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        "preval"
    ]
}

• I have searched the issues of this repository and believe that this is not a duplicate.

Previous issues such as #2690 are similar, however I believe that the extra wrinkle of attempting to use preval warrants this as a new issue.

Expected Behavior

According to the babel docs plugins should operate prior to presets. For this reason, I expected the preval plugin to build a static string at build time which the import handler plugin can parse and register chunks as usual.

Current Behavior

Instead, the import call evaluates the preval expression as undefined, which causes the dynamic import to fail. Interestingly, a console.log of the preval value does produce the correct value, not undefined. I expect this is due to a nuance of Babel's AST and the interaction between the plugins which I do not understand.

Cannot read property '0' of undefined at getModulePath (.../node_modules/next/dist/server/build/babel/plugins/handle-import.js:34:30)

Steps to Reproduce (for bugs)

1. Install preval babel plugin
2. Pass result of any preval expression to import()

Context

I am building a gallery of components, with a directory of components:

.
├── gallery
|   ├── first-component.js
|   ├── another-component.js
|   ├── yet-another-component.js
|   ├── more-component.js
|   ├── yet-more-component.js
|   // continue indefinitely

Because the gallery will be added to indefinitely, I wish for each to be dynamically loaded independently without manually adding them as separate dynamic imports:

const First = dynamic(import('../gallery/first-component'));
const Another = dynamic(import('../gallery/another-component'));
const YetAnother = dynamic(import('../gallery/yet-another-component'));
const More = dynamic(import('../gallery/more-component'));
const YetMore = dynamic(import('../gallery/yet-more-component'));
// continue indefinitely

// is manual and error prone vs
const DirectoryBundle = dynamic({
  modules: props => {
    const components = preval`getDirectoryComponents()`;

    return components
  },
  render: (props, components) =>
    // ...
})

The Webpack docs discuss requiring with an expression however I have been unsuccessful in my attempts to hybridize this with next/dynamic.

Your Environment

Tech	Version
next	3.2.2
node	8.5.0
OS	Linux 4.10.0-33-generic
browser	Chrome 61.0.3163.91 (Official Build) (64-bit)

[ksmithut]

It sounds like the import is attempting to be evaluated before babel gets run, which might be a webpack thing? I'm unsure as to how webpack evaluates dynamic imports, but static imports definitely get run before any javascript is evaluated. I assumed that dynamic imports would run alongside the JavaScript, but I don't know the spec, and I don't know how webpack runs it, but perhaps that would be a good place to start looking.

[timneutkens]

Webpack now handles all module logic, also on the server.

[sea129]

@CrockAgile how did you solve this?