Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Async/await with import fails on navigation between pages #2042

Closed
bitsofparag opened this issue May 22, 2017 · 3 comments
Closed

Async/await with import fails on navigation between pages #2042

bitsofparag opened this issue May 22, 2017 · 3 comments

Comments

@bitsofparag
Copy link

bitsofparag commented May 22, 2017

Using next@beta

Steps to reproduce:

  1. Create a Index.js page with a link to a Component.js page

  2. Create a Component.js page

  3. Add the following code in Component.js:

    const Component = ({ name, SelectedComponent }) => <div>{name}<SelectedComponent /></div>;
    
    Component.getInitialProps = async (context) => {
       const name = context.query.name;
       const SelectedComponent = await import(`../lib/components/${name}`);
       
       return { name, component: SelectedComponent };
    };
    
    export default Component;
    
  4. Run in dev mode (next)

  5. Navigate from Index page to the Component page

Expected behaviour:

Page navigates from / to /component with the dynamically loaded Component rendered (once it is available after the await call)

Error seen:

Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (http://localhost:3000/_next/-/manifest.js:694:30)
    at fn (http://localhost:3000/_next/-/manifest.js:115:20)
    at SameLoopPromise.cb (http://localhost:3000/_next/-/page/component:653:48)
    at SameLoopPromise.runIfNeeded (http://localhost:3000/_next/-/commons.js:41260:12)
    at SameLoopPromise.then (http://localhost:3000/_next/-/commons.js:41190:12)

Additional info:

I tried installing some additional Babel plugins to enable async/await with import as instructed here but no luck. The resulting .babelrc config file looks like this:

{
  "presets": [
    "next/babel",
    "stage-0",
    "es2017"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-async-to-generator",
    "transform-regenerator",
    "transform-runtime",
    ["wrap-in-js", {
      "extensions": ["css$"]
    }]
  ]
}

Please guide if I have missed something.

@ruohki
Copy link

ruohki commented May 22, 2017

Have you tried using node 7.10? async await works like charm for me

@arunoda
Copy link
Contributor

arunoda commented May 23, 2017

You can't do this: await import(../lib/components/${name})
the import module needs to be static. Using variables inside is not possible.
Please re-open if the issue persists even after that.

@arunoda arunoda closed this as completed May 23, 2017
@arunoda
Copy link
Contributor

arunoda commented May 23, 2017

Related: #2037

@lock lock bot locked as resolved and limited conversation to collaborators May 11, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants