React-calendar: Syntax error on a NextJS project

[diegohferraz]

Hi everyone, I am trying to use the react-calendar on a project with the following setup:

• React 16.8.6
• Next JS 9.0.5

When I try to go to a page with the calendar component, I am getting the following error on my console:

/Users/projetos/app/src/node_modules/react-calendar/dist/Calendar.css:1
.react-calendar {
^

SyntaxError: Unexpected token .
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/projetos/app/src/node_modules/react-calendar/dist/entry.js:48:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.react-calendar (/Users/projetos/app/src/.next/server/static/development/pages/checkout.js:7650:18)

This error happens when I am doing a server navigation, when I do a client navigation the plugins works nicely. I don't know if it is an error on my setup or on the react-calendar, but in this project we have other plugins working with no problem. So I think it is a bug with the react-calendar plugin.

[tomadimitrie]

+1

[omarbakeer]

you just need to add the module name to transpileModules inside the next.config.js

[diegohferraz]

you just need to add the module name to transpileModules inside the next.config.js

I will try doing this, I tell you if this works,
Thanks for the help

[vessper]

Hi, maybe this will help: I just installed react_calendar in a razzle project following this post:
https://github.com/jaredpalmer/razzle/issues/689

Adding just this config helped for now:

config.externals = target === 'node' ? [
      nodeExternals({
        whitelist: [
          dev ? 'webpack/hot/poll?300' : null,
          /\.(eot|woff|woff2|ttf|otf)$/,
          /\.(svg|png|jpg|jpeg|gif|ico)$/,
          /\.(mp4|mp3|ogg|swf|webp)$/,
          /\.(css|scss|sass|sss|less)$/,
          /^react-calendar/
        ].filter(Boolean),
      }),
    ] : [];

[wojtekmaj]

Similar problem was raised in #108

Remember you can always import React-Calendar without the styles, and use them manually (or write our own!) in whatever way you'd like, including styled-components. This usually helps with the issues caused by CSS shipped out of the box :)

[Gapur]

I had the same problem with Nextjs and fixed via https://github.com/wellcometrust/next-plugin-transpile-modules. This plugin transpiles untranspiled modules from node_modules.

// next.config.js
const withTM = require('@weco/next-plugin-transpile-modules');

module.exports = withTM({
  transpileModules: ['react-calendar']
});

I hope it was useful.