Fixing “SyntaxError: Unexpected token ”export”” with NextJS

I ran into an error when trying to use reactgrid with NextJS. The error was

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:992:16)
    at Module._compile (internal/modules/cjs/loader.js:1040:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at eval (webpack-internal:///@silevis/reactgrid:1:18)
    at Object.@silevis/reactgrid (/Users/[redacted]/.next/server/pages/index.js:126:1)
    at __webpack_require__ (/Users/[redacted]/.next/server/pages/index.js:23:31)

This is a not-uncommon error when using some packages with NextJS, and can be fixed by using next-transpile-modules as documented

If you don’t have a next.config.js you just create one in your application root dir, and (using reactgrid as an example) you can do this:

// pass the modules you would like to see transpiled
const withTM = require('next-transpile-modules')(['@silevis/reactgrid']); 
module.exports = withTM();

If using a different module you’d replace '@silevis/reactgrid' with whatever your module is called (the string is the same as you use to import the module)