Doesn't work with "multiple files" import

Describe the bug This code causes the “handle-import” babel plugin to break:

import(
  /* webpackInclude: /\.docs\.js$/, webpackChunkName: "whatever-[request]" */
  `__cwd/${path}`,
)

To Reproduce

1. Include the snippet above in a code.
2. Receive Module build failed: TypeError: Cannot read property '0' of undefined error from node_modules\next\dist\server\build\babel\plugins\handle-import.js:35:30

Expected behavior I’d expect Next.js to be able to handle this kind of import usage, as it’s supported by webpack. The old way to do the same, namely require.context, is not breaking like this (though it’s breaking in other ways, as I’ll bescribe in “additional context”).

System information

• OS: Windows 10
• Version of Next.js: 6.0.3

Additional context Related issue: https://github.com/zeit/next.js/issues/2690

This problem is directly caused by the “handle-import” plugin expecting the first argument to be a string literal (which has the value property). Since in my case it’s a template literal, it doesn’t have a value, only expressions and quasis.

---

For a while now I’ve been trying to create a wrapper around Next.js that’s able to work with dynamically imported files (a tool for documentation which includes all *.docs.js files in the project).

First of all, I can’t use pages/ - I want documentation files to be close to the scripts they document. I want the original structure of the source to be reflected by the structure of documentation, so replicating the directory structure in two places (original and pages) seems like an unmaintainable idea.

That’s how I arrived at a solution that uses import-all.macro. The problem with that is, it’s powered by babel. So when, as a user, I’m adding a new documentation file, I’ll need to stop the tool, purge the cache (since all imports are inlined in a file), and restart the tool. I’m losing the file-listening capabilities of webpack-dev-server, and I need to go around the limitations of babel caching.

That’s how I arrived at a solution that uses require.context. It almost works! I can’t get the SSR story correctly though - while the server renders the appropriate script, the chunk doesn’t seem to be ready when dynamic is rendering the component. Actually, the chunk doesn’t seem to be generated at all! That’s why I switched to import, to try and see if I could get the chunk-creating machine going at least with the other way of importing. As it is now, I’ve spent several days on this, I’m spinning in place, and I’m determined to fix the problem.

[timneutkens]

@fatfisz yep that’s what I’m working on, works great so far 👍

[timneutkens]

Will be fixed with #4639