今は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;
}
}