lodash-es を使う

今はnext@8.0.3が最新です。デフォルト設定そのままだと以下のようになってしまいます。

export {default as add} from './add.js'
SyntaxError: Unexpected token export

{#追記 2019-08}

以下の方法はlodash-esを commoonjs に変換して使う方法です。これでは使う意味がないのでやめましょう。代わりにlodashを使いlodash/chunkのような形で取り込む方法が一番*.jsサイズを節約できます。

{/追記}

直す

これにはnext-transpile-modulesを使います。next.config.jsを以下のようにすると直るはずです。

const withTM = require('next-transpile-modules');
 
module.exports = withTM({
  transpileModules: ['lodash-es'],
});

没案

ちなみに以下のような設定はどちらも駄目でした。。

lodash-es にも next 設定の babel をかます

NextJS の Webpack はnode_modules以下をトランスパイルの対象にしていないようで以下のようにしてみましたが駄目でした。

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules\/lodash-es/,
      use: [
        options.defaultLoaders.babel
      ],
    });

    return config;
  }
}

自分で設定

babel-loader, @babel/core, @babel/plugin-transform-modules-commonjs辺りを入れて自分で設定を追加してみましたがこちらも駄目でした。

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules\/lodash-es/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-transform-modules-commonjs']
          }
        },
      ],
    });

    return config;
  }
}