webpack: Dynamic expressions for import() are broken

@matowang

Webpack will collects all the dependencies, then check the import statement, parse the params to a reg statement, like this:

import('./app'+path+'/util') => /^\.\/app.*\/util$/

Webpack look for modules that meet the criteria based on reg. So if the param is a variable, Webpack will use the wrong reg statement to look for modules, in other words, will look for modules globally.

You can examine the reg in Dev Tools.

There also seem to be problems resolving index in some cases and not others.

import('./child-dir') // knows that i want child-dir/index.js
import('../../child-dir') // doesn't know how to find index.js
import('../../child-dir/index.js') // works fine

@navono I meant that something like this works

const path = "assets/image1.png";
import("../" + path);

but this doesn’t work

const path = "../assets/image1.png";
import(path);

I thought this was what you meant. Does the outside file reference need to be written in the import statement? My app only works when I use import(“…/” + path);

import() can resolve certain kinds of dynamic expressions.

Your import() example is, from the point of view of the import() analyzer, just import(randomFunctionCall(randomArguments)). webpack doesn’t know that the function you are calling is pure and does nothing but return a string.

Also, import('' + anything) will work by bundling literally everything webpack can find, as it has no idea if anything starts with a . or .. or whatever else.

Also it might be outside the scope of this issue to explain the API to me, but I don’t understand at all how this works. The error message suggests that webpack evaluates the function call to a valid string, pointing to the correct module path.

// Uncaught (in promise) Error: Cannot find module './somePath/index

So at best the error is very misleading

@Kovensky are the abilities/limitations of that import API documented? How does one know what it understands and what it doesn’t? For example, how do you know this:

Also, import(‘’ + anything) will work by bundling literally everything webpack can find, as it has no idea if anything starts with a . or … or whatever else

I’m having a similar problem using create-react-app version 16.4.1

Trying to create an AsyncRoute component to make it easier for code splitting and came across an issue where a variable string passed to import reports an error of Unhandled Rejection (Error): Cannot find module './../Site/Site.js'., though the same path resolves correctly as a normal static import.

Heres example code:

const AsyncComponent = (imp, namedExport='default')=>{
    return class AsyncComp extends React.Component{
        state = {}

        componentDidMount(){
            imp().then(comp=>{
                this.setState({component:comp})
            })
        }

        render(){
            return (this.state.component && this.state.component[namedExport]) || null;
        }
    }
}
class AsyncRoute extends React.Component{
    render(){
        return <Route path={this.props.path} exact={this.props.exact} component={AsyncComponent(()=>import(''+this.props.componentPath))}/>
    } 
}

Is this a bug or expected behaviour?

@outofthisworld you must specify the relative path in import. For example the file layout:

I have demo repo to represent this. I hope this helps.

@navono thanks for solving my problem! I was just randomly browsing and saw your comment. Why does the relative path have to be in strings?

@outofthisworld you must specify the relative path in import. For example the file layout:

I have demo repo to represent this. I hope this helps.