[nextjs] React: SyntaxError: Unexpected token 'export'...

[Pfurr]

i'm trying to work with BackToTop but i have this error: export { default } from './Zoom';

Steps: node packages installed: "@material-ui/core": "^4.9.11", "styled-components": "^5.1.0", "components-extra": "^2.6.1",

// app.js import import { BackToTop, StyledProvider } from 'components-extra';

// comp return

[alexandre-lelain]

Hello,

Thank you for using components-extra 😃

It's hard to give you a precise diagnostic given the information you're providing, but here are two tracks that could explain the error:

SyntaxError: Unexpected token 'export'

This error means you may need a transpiler (like babel). components-extra comes with both esm (es6+) and cjs (es5) builds. When you are using it as follow: import { BackToTop, StyledProvider } from 'components-extra';, you're telling node to use the esm version. Since node-lts doesn't come yet with es6 exports/imports, you may need to add babel to your project.

export { default } from './Zoom';

components-extra does not have this line in its codebase, so there is a chance this error comes from your project.

I hope this helps. If it does not, I'll be glad to help you further if you can provide additional information like a codesandbox, the framework you are using (if any) or a repro project :)

[Pfurr]

i'm working with next js. If you want, can you explain me a working example with Botton to Top here: https://codesandbox.io/s/react-comp-extra-vy6iv?file=/src/App.js

[alexandre-lelain]

I have updated your codesandbox with a working BackToTop example. Don't hesitate to tell me if you need additional explainations.

However please note that your codesandbox is using react-scripts, which automatically transpile the es6 sources to es5.

I'm not too familiar with nextjs, but if it's a transpiling issue that you have on your project, you might want to take a look at https://nextjs.org/docs/advanced-features/customizing-babel-config.

[Pfurr]

ok, can you share url codesandbox? if it work you can add this info in your repo, explaining that it work with a extra babel setting?

[alexandre-lelain]

Yes sorry, here is the link: https://codesandbox.io/s/react-comp-extra-bzunc

I have made a guide page: https://components-extra.netlify.com/guides/bundling to give context about the setup needed to use components-extra - I will add a section about transpiling with babel for esm builds.

[alexandre-lelain]

However please note that most modern frameworks & project templates (create-react-app for example) include the transpilation by default, so you don't have to do anything on your side to make components-extra work.

[Pfurr]

https://components-extra.netlify.com/guides/bundling

ok, i don't use c.r.a, but i understand your explain! ;) thank you for your support!

[alexandre-lelain]

You're very welcome. I hope this will help you use components-extra on your project.

If there are extra steps to do to make it work in nextjs, please don't hesitate to open a PR or an issue to add some documentation about this, you will be most welcome! If you're running into another issues concerning this library, don't hesitate to open another issue as well, I'll try my best to help you as I can.

[Pfurr]

i add you my testing code with next js: https://codesandbox.io/s/comp-extra-testing-f3t6i?file=/pages/index.js

Ps. I think it is a issue on m.ui core! but i don't know 🤷🏻‍♂️

[alexandre-lelain]

Alright, I never used nextjs so I had to dig a little into mui, nextjs & styled-components docs and I think I managed to have your project working: https://codesandbox.io/s/comp-extra-testing-npzn7

To use styled-components & es6 modules along with nextjs, there are several steps required:

• transpile the es6 node_modules you are using with https://www.npmjs.com/package/next-transpile-modules
• inject styled-components styles into the document's head. See https://styled-components.com/docs/advanced#nextjs.
• add a babelrc config for styled-components

You will find the example in the codesandbox I linked above. I will add a section about these steps in the documentation with the next release 👍

Have fun using components-extra :)

[Pfurr]

i found a new issue 😤: Warning: Prop className did not match. Server: "MuiSvgIcon-root undefined makeStyles-icon-168" Client: "MuiSvgIcon-root undefined makeStyles-icon-22".

i set new babel config:

{
  "env": {
    "development": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    },
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    }
  },
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}

and i add this code in root app:

 useEffect(() => {
    // Remove the server-side injected CSS 
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

but don't working!

[alexandre-lelain]

Hello,

Good catch, this is a bug from the component BackToTop. I will provide a fix asap. Thanks ! 😄

[alexandre-lelain]

Hello @pherm ,

The undefined className in the BackToTop icon was fixed in v2.6.2.

However the whole className string mis-match between server & client stylesheets is a problem inherent to using mui & styled-components along with nextjs. There is nothing I can do regarding this in components-extra, but I suggest to read the following ressources:

• https://medium.com/javascript-in-plain-english/ssr-with-next-js-styled-components-and-material-ui-b1e88ac11dfa
• https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js

Hope that helps. I'm working on the v3 these days, but I shall add examples for the different frameworks in the future. This will be a lot easier to do when the v3 is released.

Since the original problem mentionned in this issue was solved and not coming from components-extra, I will close this issue. Thank you for using this library :)

[Pfurr]

another className issue: Warning: Prop className did not match. Server: "MuiCardMedia-root sc-fzoOEf eTvkLg" Client: "MuiCardMedia-root sc-fznMAR fCAwoH".

i fixed className in next js, and back to top work fine.