• ..

JavaScript

    lodash-es を使う

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

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

    直す

    これには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;
      }
    }