Next.js: How to use .babelrc in combination with next.config.js?

[lightninglu10]

Hey guys, when I try to implement a custom .babelrc with next.config.js, I get a build error and it looks like its ignoring React Components (JSX).

.babelrc:

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["transform-define", "./env-config.js"]
  ],
}

next.config.js:

// next.config.js

const webpack = require("webpack")
const withCSS = require('@zeit/next-css')

// Update these to match your package scope name.
const internalNodeModulesRegExp = /src(?!\/(?!.*js))/
const externalNodeModulesRegExp = /node_modules(?!\/@zeit(?!.*node_modules))/

module.exports = withCSS({
  useFileSystemPublicRoutes: false,
  webpack: (config, { dev, isServer, defaultLoaders }) => {
    config.resolve.symlinks = false
    config.externals = config.externals.map(external => {
      if (typeof external !== "function") return external
      return (ctx, req, cb) => (internalNodeModulesRegExp.test(req) ? cb() : external(ctx, req, cb))
    })
    config.module.rules.push({
      test: [
        /\.gif$/,
        /\.jpe?g$/,
        /\.png$/,
        /\.svg$/,
      ],

      use: {
        loader: 'file-loader',
        options: {}  
      }
    });
    console.log(defaultLoaders);
    config.module.rules.push({
      test: /\.+(js|jsx)$/,
      use: defaultLoaders.babel,
      include: [internalNodeModulesRegExp],
    })
    return config
  },
  webpackDevMiddleware: config => {
    const ignored = [config.watchOptions.ignored[0], externalNodeModulesRegExp]
    config.watchOptions.ignored = ignored
    config.stats = {
      warnings: false,
    };
    return config
  },
  distDir: 'next_build'
});

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior

BabelLoaderError: SyntaxError: Unexpected token (10:4)

   8 | const NavList = ({activeLinkClass, horizontal, items, title, showIcon, styles, ssr}) => {
   9 |   return (
> 10 |     <nav className={css(baseStyles.nav, styles.container)}>
     |     ^
  11 |       {title && (
  12 |         <h1 className={css(baseStyles.title, styles.title)}>{title}</h1>
  13 |       )}

    at transpile (/Users/patricklu/Q5/lunyr/Lunyr-Frontend/server/node_modules/babel-loader/lib/index.js:65:13)
    at /Users/patricklu/Q5/lunyr/Lunyr-Frontend/server/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/Users/patricklu/Q5/lunyr/Lunyr-Frontend/server/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:419:13)
 @ ../src/containers/components/base/index.js 17:0-47
 @ ./pages/ReaderPage.js
 @ multi ./pages/ReaderPage.js

Your Environment

| Tech | Version |
|---------|---------|
| next | v5.0.0 |
| node | v8.1.2 |
| OS | macOs |
| browser | Chrome |

[timneutkens]

We can't investigate issues without a full reproduction. Please provide a repository.

[lightninglu10]

For anyone else stumbling upon this, I found a fix. Don't use a .babelrc and instead pack everything into the next.config.js

I added this here right before pushing the loaders:

defaultLoaders.babel.options.plugins.push(["transform-define", "./env-config.js"])
config.module.rules.push({
  test: /\.+(js|jsx)$/,
  use: defaultLoaders.babel,
  include: [internalNodeModulesRegExp],
})

[gpolyn]

FYI - I wanted to evaluate this issue (among others) so I merged together a few official Next.js examples that use both .babelrc and next.config and it seemed to work: https://github.com/gpolyn/nextjs-polyfill