SyntaxError: JSON5: invalid character 'm' at 3:1

Question

Babel is giving me the following error:

../../node_modules/next/dist/pages/_error.js
SyntaxError: JSON5: invalid character 'm' at 3:1

My .babelrc and babel.config.cjs:

/* eslint-disable no-template-curly-in-string */

module.exports = {
  presets: [['next/babel']],
  plugins: [
    [
      'babel-plugin-transform-imports',
      {
        lodash: {
          transform: 'lodash/${member}',
          preventFullImport: true,
        },
        '@mui/material': {
          transform: '@mui/material/${member}',
          preventFullImport: true,
        },
        '@mui/icons-material': {
          transform: '@mui/icons-material/${member}',
          preventFullImport: true,
        },
        '@mui/lab': {
          transform: '@mui/lab/${member}',
          preventFullImport: true,
        },
<snip>

Answer 1

Per the babel Config Files documentation:

.babelrc is an alias for .babelrc.json

and

babel.config.json and .babelrc.json are parsed as JSON5 and should contain an object...

The error message you are getting confirms this: Babel is parsing the file as JSON5 and beginning on line 3 column 1 the content is not valid JSON5. If you remove the module.exports = from that line, the error will be fixed.

(I cannot tell whether you have other errors in you .babelrc since you didn't not present the entire file. Once you fix the above line you'll find out.)

On the other hand, your file babel.config.cjs is expected to be valid Javascript, you would need to retain the module.exports = . Or you could rename it to babel.config.json and use the same format as your .babelrc.

You may also want to rename your .babelrc to .babelrc.json to make its format explicit in its name.