Next.js: node_modules内のトランスパイルモジュールへのサポートを追加します

• これがwebpack()拡張子で実行できないのはなぜですか？
• transpileModules方がいいですね
• 正規表現を受け入れますか？

これがwebpack（）拡張機能で実行できないのはなぜですか？

私はあなたがカスタムwebpack設定を意味することを願っています。 それは実行可能です。 しかし、これは既存のローダーにあります。 それを取得するのは少し難しいです。

transpileModules方がいいですね

素晴らしい。 更新します。

正規表現を受け入れますか？
うん。 もちろん。

おい、

私は自分のウェブサイトを始めているので、Lerna / Next / Styled ...のような新しい技術を試しています。これについては、早い段階でフィードバックを提供させていただきます。

NextJsモジュールでCRAベースのモジュールをインポート/トランスパイルしようとしたが、トランスパイルを実行する方法がわからないという重複した問題を開きました（モジュールをスタンドアロンとして実行可能にしておきたいことに注意してください）

また、同じくLernaをベースにしているBabelが、モジュールを公開する前に各モジュールをトランスパイルしていることにも気づきましたが、 @ arunodaが提案するように、クライアントアプリにトランスパイルを実行させる方がよいようです。

クライアント用に単一のbabel構成を用意し、その構成をすべての分離されたモジュールと共有したいと思います。 Next runnerの外部でモジュールをスタンドアロンとして実行する機能を維持したい場合、これはおそらくそれほど簡単ではありません。

私の現在のテストプロジェクトはここにあります： https ： @arunodaあなたはそれに取り組んでいますか？

@slorberは現在、2.0リリースに焦点を当てており、可能な限り微調整してバグを見つけています。

私はこれに取り組んでいませんが、2.0の直後にこれを行うことができます。

さて、フォークを作ります。 重要なWebサイトを構築しておらず、webpack 1.13がjsnext：main / moduleフィールドを解決するとは思わないため、すでに2.0.0ベータ版に対して実行しています。

私はバンドラーの専門家ではありませんが、package.jsonの「モジュール」フィールドを使用したいと思います。 私の知る限り、「メイン」はすでにトランスパイルされたコードのようです。 しかし、webpackの設定では、transpilationを含めたり除外したりできるため、関連性があるかどうかはわかりません。 3つのフィールドのどれを使用したいのかについての推奨事項はありますか？

@slorber webpackはNPMと同じようにmainしかサポートしていないと思います。 あなたはそれを使うことができます。
next.conf.jsのexclude関数でファイルパスを確認できます

うーん、Next 2.xに対して実際に見たものによると、モジュールは機能しますが（ただし、トランスパイルされていないため、実行時に失敗します）、 jsnext：mainは機能しませんでした（私が覚えている限り）。 しかし、それはサポートさます。

とにかく、 jsnext：mainまたはmoduleはこの問題の解決策ではないようです。したがって、社内モジュールの場合は、変換を有効にするだけでおそらく十分です。

コミュニティは1つのアプローチに同意していませんよね？ たとえば、他のreact-youtubeをそのまま使用しても、問題はありませんでした。 公開する前に多数のモジュールがトランスパイルすると思いますか？

参照： https ：

はい、モジュールが誰/どのように消費されるかわからず、クライアントにライブラリに適切なbabel設定をセットアップさせたくないので、公開する前に常にトランスパイルするのは理にかなっています。 それがRollupが提案していることです。バンドラーがどちらを使用するかを決定できるように、さまざまな方法でトランスパイルされたモジュールを公開することです。

ただし、会社の内部パッケージの場合、トランスパイル設定は複数のプロジェクトで同じである可能性があり（babelプリセットなど）、クライアントバンドラーに会社のすべての依存関係をトランスパイルさせることは理にかなっています。

@slorberに非常に同意します。これは、プロジェクトを分割して可能な限り分離する場合に、内部モジュールにとって非常に便利です。

そして、正規表現をサポートする@rauchg / @arunodaは本当に素晴らしいので、たとえばNPM org名前空間を使用して、会社のすべての内部モジュールをキャッチする1つのエントリを持つことができます。

// next.config.js
module.exports = {
  transpileModules: [
    /^\@my-npm-org\/.*/
  ]
}

美しい提案@philcockfield

ねえ、多分それはいくつかのプリセットを提供する価値があるかもしれません。 ほとんどのツール（Lerna / npmリンク...）はシンボリックリンクに依存しているように見えるので、次のような単純なものを使用しないのはなぜですか。

`` `javascript
module.exports = {
transpileModules：["シンボリックリンク"]
}
「」

next.jsを本格的に使用し、その周りにモジュールの豊富なライブラリを構築すればするほど、この機能はより重要になります。 これは、内部モジュールのbabelコンパイル手順を複製する実際のPITAになりつつあります。

🚀🤖

私は今日これに取り組んでいます:)

@philcockfieldこれを試してみてください： https ：

ありがとう@arunoda

したがって、PRでコメントされているように、これがシンボリックリンクをサポートしていない場合、npm linkまたはLernaでは機能しないため、機能は少し制限されますが、トランスパイルされていないnpmモジュールに対してのみ機能します（右？他には表示されません） /node_modules内でモジュールをコミットしない限りのユースケース）

シンボリックリンクをサポートしないのはなぜですか？ サポートするのは難しいですか？

また、アプリでブランチをテストしたかったのですが、それを行うための最良の方法がわかりません。 ブランチを簡単にテストでき、テスターに​​とってそれほど苦痛ではない既知の手順はありますか？ 私は次のようなものを試しました：

• npm install https://github.com/arunoda/next.js.git#add -706：githubリポジトリの次の/ binフォルダーが空であるため、失敗します
• / node_modules内のフォークのgitクローン：あまり成功していません（ただし、特定のLerna設定が原因である可能性があります）

現在フォークをテストする最良の方法は何ですか？

next.config.js ： module.exports = { webpack: (configでこれを行うことを検討している場合、 config.module.rulesにはいくつかのことがあります。これらのルールのいずれかを変更する必要があるように見えますか、それとも追加する必要がありますか？ ：

  { loader: 'babel-loader',
    include: '/Users/me/gh/guide/node_modules/next/dist/pages',
    options: 
     { babelrc: false,
       cacheDirectory: true,
       sourceMaps: 'both',
       plugins: [Object] } },
  { test: /\.js(\?[^?]*)?$/,
    loader: 'babel-loader',
    include: 
     [ '/Users/me/gh/guide',
       '/Users/me/gh/guide/node_modules/next/dist/pages' ],
    exclude: [Function: exclude],
    query: 
     { babelrc: true,
       cacheDirectory: true,
       sourceMaps: 'both',
       presets: [] } } ]

提案されたより単純な構文を楽しみにしています。

私の無知のために申し訳ありませんが、この問題の解決策がわかりませんか？ es6をコードベースにインポートしたいので、ツリーシェイクが必要です。

これに関するPRはありますか？

@andrewmclaganこの問題はまだ未解決であり、関連するPRがあり、おそらくすべてを満足させることはできません（LernaJSユーザーなど）

これの状況はどうですか？ node_modulesからインポートされたファイルをトランスパイルするためにnextのwebpackを作成する他の方法はありますか？

@slorber私はPRを見ていきます。 ユースケースに貢献します。

私はある種の同様の問題に直面しています。 get-urlsパッケージを使用しようとしています。 作品はdev見つかりますが、コンパイルすると。 uglifyからエラーが発生しました

...
{ Error: commons.js from UglifyJs
...

これに対する回避策はありますか？

アルノダはここでいつかそれに取り組むでしょう。 彼は以前＃749でやったことがあります

この機能が実装されるのを楽しみにしています。 @philcockfieldが述べたように、Next.jsの変換に依存するモジュールのライブラリを構築することは一般的なシナリオであり、プロジェクト間でコンポーネントを共有できるのは素晴らしいことです。

これは、木の揺れに必要なだけではありません。 styled-jsxようなbabelプラグインにも使用できます。 したがって、babelプラグインを使用するモジュール（ライブラリなど）がある場合、最善の解決策は、ES6ソースコードを含めて、アプリがnode_modulesからそれをトランスパイルできるようにすることです。 もちろん、nextにはすでにデフォルトでstyled-jsxれています。

これが私がしたことです

// next.config.js
exports.webpack = config => (config.module.rules = config.module.rules.map(({exclude, ...rest}) => ({
  exclude: Object.prototype.toString.call(exclude) === '[object Function]' ? (str => !/mycomponents/.test(str) && exclude(str)) : exclude,
  ...rest
})), config);

基本的に、各excludeをカスタム関数に置き換えました。
何が間違っているのかわかりませんが、うまく機能させることはできません。
node_modules/mycomponentsのコンテンツもNext.jsによってトランスパイルされる必要があります

空の配列ですべての除外を完全にオーバーライドしても機能しません

exports.webpack = config => (config.module.rules = config.module.rules.map(({exclude, ...rest}) => ({
  exclude: [],
  ...rest
})), config);

私を助けてください ：）
ありがとう

やあみんな（ @thealjey ）私は今まで何ヶ月もjsnext:mainパワードモジュールをトランスパイルしてきました。

• 次のリゾルバを使用します。
  https://github.com/damianobarbati/react-app/blob/master/config/webpack.config.js#L66
  https://github.com/damianobarbati/react-app/blob/master/config/webpack.config.js#L203
  基本的には、 jsnext:mainがpackage.jsonにある場合は、指定されたエントリポイントをトランスパイルします。それ以外の場合は、 mainものをインポートします。
• 以下は、npmにリンクされたモジュールを使用するときに役立ちます。
  https://github.com/damianobarbati/react-app/blob/master/config/webpack.config.js#L168

next.jsは使用していませんが、お役に立てば幸いです。

@damianobarbatiいいえ、残念ながらそうではありません
難しいことではないものをトランスパイルするためにwebpackを直接構成しますが、Next.jsのコンテキストでこれを機能させるのに苦労しています

ねえ、誰もが解決策を見つけましたか？

プロジェクトにインポートする必要があるローカルES6リンクノードモジュールがありますが、webpackブードゥーを正しく取得できません！

より良い方法があると確信していますが、ビルド時にすべてをbabelで実行します。

next build && babel .next/*.js --out-dir . --presets=es2015,react

これは死にましたか？ カスタムモジュールをトランスパイルする方法を探していますが、まだ不可能なようです。

@mattfeltenそれはv5のロードマップにあります👍

誰かがこれの回避策の例を持っていますか？

@timneutkensこれのタイムラインはありますか？ それはしばしば不可能な質問であることを理解してください、しかし私たちは今のところ仕事中のスタックを決定しようとしています、そしてこれは私たちにとってかなり大きなブロッカーです！ :)

回避策の提案も有効です。

@thealjeyは、これが古いコメントであることを認識していますが、オーバーライドする必要があるinclude指定されているため、ソリューションが機能しなかった可能性があります。

更新：この戦略を検討しましたが、next.jsの内部構成内のさまざまなモジュールディレクトリのすべてのさまざまなローダーを考えると、それは正気ではありません。 これはファーストクラスである必要があります。

@chrisui私の（一時的な）解決策は、次のように構成されたbabel-plugin-module-resolverを使用すること"plugins": [["module-resolver", {"root": ["./"]}]] -
それは決して完璧な解決策ではありませんが、他のすべてが失敗したので、今のところは機能します
そのおかげで、インポートのたびにたくさんの../を書く必要はありません。
これは実際には一部の人にとってはより良い解決策かもしれませんが、確かに再利用性には役立ちません

@thealjey例を挙げて
私はこれを無駄にしようとするプロジェクトのセットアップを持っています...
https://github.com/jamesgorrie/nappy

私たちの生活がとても楽になるので、喜んでPRを取得してみますが、次のようないくつかの質問があります： next.jsは特定のモジュールのトランスパイルをサポートする必要がありますか、それともトランスパイラー次第ですが、 next.jsは、モジュールの解決に厳密に従います。 next.js初心者として、誰に尋ねるか、どこから始めればよいかわからない。

v5のロードマップにあります👍

@timneutkensこれはv5になりましたか？

知りたい。

マージされた場所を見てください。 これは8日前にマージされました。 5.0.0は2日前にリリースされました。 これがマージされるカナリアブランチから...

これをどのように実装できるかについての例はありますか？ 上記のように、このように動作するはずですか？

module.exports = {
    transpileModules: ['my-npm-module']
}

またはそれは異なって見えますか？

https://github.com/zeit/next.js/pull/3732

よくわかりません。 @timneutkens上記のリンクは、まだ開いているPRへのリンクです。 これはまだv5にマージされていませんか？

編集：気にしないでください、これは例を強調するための単なるPRです。

これは例です。マージせずに例を使用できます。 transpileModulesは、後で取り組むものです。

一般的な経験則として：問題が開いている場合、それはリリースされません。

@brianyinglingこの例を暫定ソリューションのプラグインに変えました（v5のみ）。
より堅牢で公式なソリューションが導入されるまで、現時点では機能しています。

https://www.npmjs.com/package/@weco/next -plugin-transpile-modules

アプリケーションコードベースの単一モジュールについて、この例を見てみたいと思います。

たとえば、サーバー側とクライアント側の両方を使用するモジュールがあります。 モジュールを独自の個別のモジュールに分解してyarn linkするか、webpackルールをハッキングすることによって、上記の例を機能させることができませんでした。

簡単な再現は次のとおりです： https ：

// pages/index.js
import { foo } from '../lib/test'
export default () => <div>hello {String(typeof foo)}</div>

// lib/test.js
async function foo () {}
module.exports = { foo }

@timneutkensによると、これは共有モジュールでasync/awaitを使用しているためです。 私の解決策は、async / awaitを削除し、すべてを.then()スタイルのコールバックに変更することかもしれないと思います。

OK、私は自分に合った修正を見つけました。

まず、 https： //github.com/zeit/next.js/issues/3018#issuecomment -380879576に従って、 config.resolve.symlinks = false設定をnext.config.js構成に追加しました

// next.config.js
webpack: (config, { dev }) => {
  config.resolve.symlinks = false
  return config
}

次に、共有ライブラリ（CommonJSエクスポートとasync / awaitキーワードを使用する.jsファイル）をsharedというアプリケーションのサブディレクトリに配置します。

// shared/index.js
async function foo () {}
module.exports = { foo }

// shared/package.json
{
  "name": "@myapp/shared",
  "version": "1.0.0",
  "main": "index.js",
  "license": "UNLICENSED",
  "private": true,
  "dependencies": { ... }
}

そして最後に、メインアプリケーションで誰かがyarn installしたときに、すべてをリンクするpostinstallスクリプトを追加しました。

// package.json
{
  ...
  "scripts": {
    "postinstall": "cd shared ; yarn -s unlink ; yarn link && yarn && cd .. && yarn link @myapp/shared",
   ...

これで、Mochaテストがサーバー側で合格し、カスタムKoaサーバーが正常に起動し、NextJSページにクレイジーなCannot assign to read only property 'exports' of object '#<Object>'がなくなりました。

NextJs 5.1.0にアップグレードするときに、これと同じ問題が発生しました。 次のノードモジュールの1つまたは2つは、IE11でファットアロー関数をトランスパイルせず、エラーをスローしていませんでした。 私は以前、個々のpolyfillsを設定をしてきていたし、最後に私はこれらのモジュールファイルをターゲットに選んだbabel-polyfill私の中にnext.config.jsこれで：

module.exports = {
  webpack: (config, { dev }) => {
    const polyfill = new Promise((resolve, reject) => {
      const originalEntry = config.entry

      originalEntry().then(entries => {
        if (entries['main.js']) {
          entries['main.js'].unshift('./client/polyfills.js')
          entries['main.js'].unshift('babel-polyfill')
        }
        config.entry = entries

        resolve()
      })
    })

    config.module.rules.push(
     {
        test: path.resolve('./node_modules/next/node_modules/'),
        loader: 'babel-loader',
        options: {
          babelrc: false,
          cacheDirectory: false,
          presets: ['es2015']  
        }
      }
    )

    return polyfill.then(() => { return config })
  }
}

これが誰かを助けることを願っています。

ESMは魅力のように機能します。

index.jsにカスタムNext.jsサーバーがある場合、このコマンドを実行してサーバーを起動すると、esmが完全に起動し、Lernaに対称化されたプロジェクトパッケージのESモジュールが解決されます。

node -r esm index.js

@curranかっこいい、babel-nodeを置き換えることはできますか？

@curran私は

@blackbingわかりません。

@thealjeyそれはなぜですか？

誰かが迅速で簡単な解決策を探している場合に備えて、これが私がしたことです。 スタンドアロンノードスクリプトを介したバックエンドとNextJSを介したクライアントの両方で実行するコードを使用して、サブディレクトリshared/を作成しました。 独自のpackage.jsonあり、その名前を@myproject/sharedとして宣言します。

次に、メイン（親）プロジェクトで、次のようにインストール後のスクリプトをpackage.jsonに追加しました： cd shared && yarn -s unlink >/dev/null 2>&1 ; yarn -s link && yarn -s && yarn link @myproject/shared —次にyarnを少なくとも1回実行し、インポートをimport { whatever } from '@myproject/shared/somefile'変更します

このように、共有コードはクレイジーな変換手順なしで機能します。さらに、 yarn linkは更新を行うたびに、 yarn / npmを再実行する必要はありません。シンボリックリンク。

TypeScriptを使用している場合、 @weco/next-plugin-transpile-modulesは機能しないはずです。 NextのwithTypescriptを処理するフォークを作成しました： https ：

TypeScriptにもサーバー側のコードが必要な場合でも、適切に処理する方法を理解する必要があります。

これに関するニュースはありますか？

@bogdansoare私はhttps://github.com/KeitIG/next-plugin-transpile-modulesを使用してい

そして、次の要点で、私によるさらに別のもの。 TypeScriptと、すべてのパッケージではなく、 @scope特定のパッケージを処理します。 https://gist.github.com/trusktr/44400d0d016c506629b4f914799dc9cd

esmとlernaを使用する簡単な実例をまとめました。

https://github.com/curran/nextjs-esm-example

/ cc @jdalton

個人的にこれを次のnext.config.js ：

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

    return config
  }
}

IE11との互換性を実現するために必要だったnode_modulesすべてをバブリングします...

トランスパイルされていないnpmパッケージをプロジェクトに追加するのに苦労して、これに対する解決策もありがたいです。 今のところベンダー/にダウンロードする必要がありました:(
本当に忌々しい

@ bel0v next-plugin-transpile-modulesすでにこれを達成できるはずだと思います。 この問題はおそらく解決されるはずです。 cc / @timneutkens

それでも別の解決策を調査したいと思います。

最近、ジェイミーはnode_modulesのコンパイルの問題について非常に詳細なスレッドを書きました： https ：//twitter.com/jamiebuilds/status/1080840492525350912

私はジェイミーのスレッドを読みましたが、ヘンリー・チューとバベルのこの状況と解決策についての見解も共有したいと思います。
https://babeljs.io/blog/2018/06/26/on-sumption-and-publishing-es2015+-packages

（ティムに同意しない、私が共有したいと思っただけで、多くの賛否両論。ティムが代替ソリューションを調査するのに役立つかもしれません）

ええ、私たちは過去半年間、ヘンリーを含むこの問題について多くの人々と話し合ってきました😄

node_modulesのトランスパイルに関する懸念にもかかわらず、独自のパッケージをモノレポでトランスパイルしたいということは非常に一般的な要件であり、これらの懸念は当てはまりません。

@dcalhoun試しましたが、残念ながら予期しないトークンエラーが発生します。 このプラグインには、関連している可能性のある未解決のNext7の問題があります。

@ bel0v

FAQを読む必要があります;）この問題の解決策があります： //github.com/martpie/next-plugin-transpile-modules#i -have-trouble-making-it-work-with-nextjs-7

私は複数のプロジェクトでこのプラグインを使用してきました、そしてそれは仕事をうまくやり遂げます。 Next 7の問題は奇妙です。これがNextからのものか、Babelからのものかはわかりません。とにかく、ここで問題を開きました： https ：

@martpieええ私はそれを試したと思います..とにかくもう一度試してみます

@martpie一貫したbabel.config.jsとyarnワークスペースでnext7の使用を開始しましたが、簡単な例を設定できるかどうかがわかります。

ここで基本的な例をフォークしました
https://github.com/bel0v/learnnextjs-demo
その中で、私は変換されていない依存関係（wired-elements）をインストールし、ビルドエラーUnhandled Rejection (SyntaxError): Unexpected token {を受け取り、提案された方法で修正しようとしました。
私はそれが機能するためにいくつかの追加のbabelプラグインが必要かもしれないと思っています..🤔

再度FAQの@ bel0vに、Lernaセットアップが機能しない理由についての説明があります（TL、DR;おそらく使用しているのは間違っています）

@martpieああ、

https://twitter.com/jamiebuildsが一時停止されているようですので、スレッドを読み取ることができなくなりました。 ＃3018この問題に関連して閉鎖されたので、検討されている代替アプローチは何であるか疑問に思いますか？
これらは、これらのユースケースatmのnext.jsの最先端/ベストプラクティスを表していますか？
https://github.com/curran/nextjs-esm-example
https://github.com/wellcometrust/next-plugin-transpile-modules
https://github.com/martpie/next-transpile-modules
https://github.com/zeit/next.js/tree/canary/examples/with-yarn-workspaces

したがって、私のようにIE11をサポートする必要のあるプロジェクトに取り組んでいる場合は、実際にはすべてのコードをnode_modules/内にトランスパイルする必要があります。 Next.js 7.xでは、次の設定を使用していましたが、これはうまく機能しました。

残念ながら、Next.js 8.xでは、デフォルトのエクスポートがなかったためにモジュールが他のモジュールをインポートできなかったというエラーが発生して動作を停止しました。 次に、Next.js 8.xの以下の構成を思いつきました。これは、 node_modules/のコードを@babel/preset-envでのみ変換し、他のプラグインは変換しません。

これは、 package.json browserlistプロパティを設定することで組み合わされます。

  "browserslist": "defaults, IE >= 11, EDGE >= 14, Safari >= 11, Chrome >= 41, Firefox >= 52",

次の7.x

next.config.js

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

    return config
  },
}

Next.js 8.x

next.config.js

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-syntax-dynamic-import'],
        },
      },
    })

    return config
  },
}

残念ながら、このセットアップで@babel/plugin-transform-runtimeを使用する方法はまだわかりません。そのため、コード内でかなりの数のヘルパーが吐き出される可能性があります😞うまくいけば、gzipがそれを処理します😆😅

Next.jsがnode_modules/を正しくトランスパイルして、あなたが持っているbrowserlist動作するオプションを提供できれば素晴らしいと思います。 企業ユーザーがいるような大規模なサイトは、古いブラウザを適切にサポートするためにこれに依存しているようです。

next-transpile-modules （@ jamesgorrieのすばらしい仕事に基づく）のメンテナーとして、私はここでこの問題に直面している人を喜んで助けます。

私はこのプラグインを使って1年以上プロのプロジェクトに取り組んできましたが、これまでのところうまく機能しています。

Next.jsからのネイティブサポートはもちろん素晴らしいものであり、この機能をnextパッケージに統合するお手伝いをさせていただきます。 ティムが試したいアイデアをいくつか持っていたのは知っていますが、とにかく。

乾杯！

@martpie私はあなたのプロジェクトをすぐに調べましたが、_all_モジュールをトランスパイルする簡単な方法を見つけられませんでした。それは可能ですか？ ☺️

また、 options.defaultLoaders.babelを選択し、それをバベルローダーとして使用しているようです。 Next.js 8.xでこれを行うと、その後、一部のモジュールがCJSモジュールとして正しく認識されず、他のライブラリがそれらをインポートできないという問題がありました。例：

./pages/_glamor.js
Attempted import error: 'css' is not exported from 'glamor'.

./components/project-selector.js
Attempted import error: 'react-select/lib/Async' does not contain a default export (imported as 'AsyncSelect').

./node_modules/react-select/dist/react-select.esm.js
Attempted import error: 'react-input-autosize' does not contain a default export (imported as 'AutosizeInput').

./pages/signup/full.js
Attempted import error: 'react-select/lib/Creatable' does not contain a default export (imported as 'CreatableSelect').

./components/markdown-editor.js
Attempted import error: 'react-simplemde-editor' does not contain a default export (imported as 'SimpleMDEEditor').

./components/pagination.js
Attempted import error: 'react-js-pagination' does not contain a default export (imported as 'UpstreamPagination').

./node_modules/react-google-recaptcha/lib/es/recaptcha-wrapper.js
Attempted import error: 'react-async-script' does not contain a default export (imported as 'makeAsyncScriptLoader').

./pages/_glamor.js
Attempted import error: 'rehydrate' is not exported from 'glamor'.

そのため、 node_modules/カスタムbabel構成を提供するように切り替えました。これは、 preset-envを使用してコードをトランスパイルするだけで、Next.js固有の変換をスキップします。 このアプローチについてどう思いますか？

乾杯🍻

@LinusUたぶんtranspileModules: ['(.*?)']を試して、それが機能するかどうか教えてください。

ただし、将来のメジャーリリースでは機能しない可能性があるため、注意してください。

より一般的には、 node_modulesフォルダー全体をトランスパイルすることはお勧めしません（「強くお勧めしません」と読んでください）。コンパイルには永遠に時間がかかり、パッケージはES3互換コード（IE11互換）を提供する必要があります。

必要なモジュールだけをトランスパイルしてください！ （ lodash-es 、ローカルモジュールなど...）

パッケージはES3互換のコードを提供する必要があります（つまりIE11互換）。

これは私が見た現実ではありません、そして私は実際に同意しません。 モジュールの作成者は、私がターゲットにしているブラウザーを正確に知ることはできません。古いコードを出荷すると、最新のブラウザーをターゲットにしているユーザーにペナルティーを科す可能性があります。

コンパイルには永遠にかかります

起動時は少し遅いですが、その後はキャッシュされているようで、特定のページに変更を加えると、ほぼ瞬時にリロードされます。

必要なモジュールだけをトランスパイルしてください！

これには、IE11と互換性のあるパッケージと互換性のないパッケージを正確に把握し、依存関係（一時的な依存関係も含む）が変更されたときにこの情報を最新の状態に保つ必要があります。 これがどのように現実的かわかりません🤔

重要なことは、package.json module提供されるESMエントリポイントは、通常、ツリーシェイク用のES6インポート/エクスポートを備えたES5であるということです。 したがって、特に明記されていない限り、これはバンドラー（Webpack）の仕事であり、トランスパイラー（Babel）の仕事ではありません。 多くの手入れの行き届いたパッケージには、すでにESMエントリポイントがあります。たとえば、OPによって言及されたReduxのredux/esです。

next.config.js ： module.exports = { webpack: (configでこれを行うことを検討している場合、 config.module.rulesにはいくつかのことがあります。これらのルールのいずれかを変更する必要があるように見えますか、それとも追加する必要がありますか？ ：

  { loader: 'babel-loader',
    include: '/Users/me/gh/guide/node_modules/next/dist/pages',
    options: 
     { babelrc: false,
       cacheDirectory: true,
       sourceMaps: 'both',
       plugins: [Object] } },
  { test: /\.js(\?[^?]*)?$/,
    loader: 'babel-loader',
    include: 
     [ '/Users/me/gh/guide',
       '/Users/me/gh/guide/node_modules/next/dist/pages' ],
    exclude: [Function: exclude],
    query: 
     { babelrc: true,
       cacheDirectory: true,
       sourceMaps: 'both',
       presets: [] } } ]

提案されたより単純な構文を楽しみにしています。

私にとっては問題なく動作します

{
    test: /\.js(\?[^?]*)?$/,
    loader: 'babel-loader',
    include: [
        path.resolve(__dirname, './node_modules/next/dist/pages'),
    ],
    query: {
        cacheDirectory: true,
        sourceMaps: 'both',
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-proposal-object-rest-spread']
    }
},

私はLernaモノレポジトリを使用してこの問題に遭遇し、原因が何であるかについて頭を悩ませていました。 エラーはwebpackから発生しているため、ローダーがないこと以外に詳細がわかりません。これは役に立ちません。 ありがたいことに、私はこのgithubの問題を見つけました！

この問題を検索し、Lernaを使用している他の人のために、ここに解決策を残しておきます。

ソースをdistディレクトリに変換する共有パッケージの事前公開スクリプトを作成し、リンク時にdistディレクトリを指すようにLernaに指示します。

// package.json
"main": "dist",
"scripts": {
  // I'm using the react-app preset because it's easy
  "prepublish": "babel --presets react-app --plugins @babel/plugin-transform-modules-commonjs src --out-dir dist"
},
// This instructs Lerna to use dist when symlinking
"publishConfig": {
  "directory": "dist"
}

これで、 lerna bootstrapを実行すると、prepublishスクリプトが実行され、Nextが使用できるようにソースがトランスパイルされます。

lernaを使用している場合は、 next-transpile-modulesを使用してシンボリックリンクを作成してトランスパイルすることができlerna使用する方法は、ドキュメントの下部に記載されています。

NextJsアプリ間でコードを共有することを検索している人のために、モノリポジトリ全体で複数のNextJsアプリ間でReactコンポーネントとユーティリティを共有しようとしたときに@LinusUのソリューションが機能したことを報告し

// next.config.js
const aliasPathsToResolve = [
    { name: 'components', path: path.resolve(__dirname, './components') },
    { name: 'Common', path: path.resolve(__dirname, '../../common/react/') },
]
module.exports = () => {
    return  {
        webpack(config, { defaultLoaders }) {
            config.module.rules.push({
            test: /\.(js|jsx)$/,
            include: [path.resolve(__dirname, '../../common/react/')],
            use: [defaultLoaders.babel],
        })

            /** Resolve aliases */
        aliasPathsToResolve.forEach((module) => {
            config.resolve.alias[module.name] = module.path
        })
        }
    }
}

この投稿の時点では、最新バージョンのNextJを使用しています。

@ Lwdthe1私はあなたのコードを試しましたが、最初にこのエラーが発生しました：

TypeError: Cannot read property 'then' of undefined
    at getBaseWebpackConfig (/c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/build/webpack-config.js:85:25)
    at async Promise.all (index 0)
    at async HotReloader.start (/c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/server/hot-reloader.js:14:1675)
    at async DevServer.prepare (/c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/server/next-dev-server.js:7:223)
    at async /c2/wiz-frontend/packages/pipeline-view/node_modules/next/dist/cli/next-dev.js:22:359

いくつかの調整を行い、これで終わりました：

const path = require("path");

const libPath = "../components/src"
const aliasPathsToResolve = [
  { name: "Common", path: path.resolve(__dirname, libPath) }
];

module.exports = {
  webpack: (config, { defaultLoaders }) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: [path.resolve(__dirname, libPath)],
      use: [defaultLoaders.babel]
    });

    /** Resolve aliases */
    aliasPathsToResolve.forEach(module => {
      config.resolve.alias[module.name] = module.path;
    });
    return config
  }
};

しかし、別のエラーが発生しました：

export { default as NavBar } from "./NavBar/NavBar"
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1055:16)
    at Module._compile (internal/modules/cjs/loader.js:1103:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
....

これは＃2850と＃883で以前に直面したようです。

したがって、唯一の解決策は次のように思われます： //github.com/martpie/next-transpile-modules#but -i-really-need-to-make-it-work-with-lerna

聞いたところによると、Next.jsがこの問題の解決をどのように計画しているかがRFCで間もなく発表されますが、誰かが今すぐ修正する必要がある場合は、 https：//github.com/からnpmにソリューションを公開しましたzeit / next.js / pull / 10098 ：

    "next": "npm:@sheerun/[email protected]",

そしてnext.config.jsに続いて：

  babelIncludeRegexes: [/turf/],

（私の場合、すべてのturfファイルをbabelでプリコンパイルする必要がありました）

この問題は進展していますか？

next.js 9.2.0を使用していますが、 babelIncludeRegexesオプションが機能しません

この問題は進展していますか？

next-transpile-modulesはこの問題を正確に解決することを目的としていますが、試してみましたか？

こんにちは@martpie 、

すでに私の問題.babelrcファイルの編集を解決します。 私はこの問題を参照し

THX

@martpie next-transpile-modulesいますが、それでも、アプリケーションをビルドしようとしているときに、以下のエラーが発生します。 共有コードベースでmonorepoを使用しています。 '@ myapp / shared / components /componentname.js'のような共有からコンポーネントにアクセスしようとしています。 nextjs 9.xとカスタムnext.config.jsます。

エラー
`
モジュールの解析に失敗しました：予期しないトークン（12：4）
このファイルタイプを処理するには、適切なローダーが必要になる場合があります。現在、このファイルを処理するように構成されているローダーはありません。 https://webpack.js.org/concepts#loadersを参照してください
| const Spinner = props => {
| const renderDefaultSpinner =（spinnerClass、{... others}）=>（
>>

raghav1086 2020年02月14日