プロジェクトにcreate-react-appを使用しました。次のエラーが表示されます

キャッチされない SyntaxError: 予期しないトークンのエクスポート

エラーはこのコードにあります

babel-preset-es2015 と babel-preset-stage-0 をインストールしてみました。また、package.jsonにbabel dict/objectを次のように含めました

私はまだエラーが発生しています。

新しいフォルダーを作成し、「create-react-app」を実行しました。(これは Windows 10 にありました。)次に、数週間前に「create-react-app」で作成されたコードを実行している別のフォルダーから package.json ファイルをコピーしました。次に、「yarn install」を実行して、古いアプリを複製するために必要なすべての node_modules で新しいアプリを更新しました。コンソール表示に以下に示すようなエラーが多数表示されるのはなぜですか?

注：スタックオーバーフローでは投稿できないため、フォーマットされていない完全な表示を受信したとおりに表示することはできません。だからここに私がフォーマットしたいくつかの行があります。

React cli を使用して、UI ライブラリhttp://react-conventions.herokuapp.com/create-react-appから .scss ファイルを読み込もうとしています。私はすでにsass-loaderもダウンロードしました。npm run ejectloadersconfig.dev

を使用してコンポーネントにインポートしようとしましたが、import Input from 'react-conventions/lib/Input';まだエラーが発生します

コンパイルに失敗しました。

./~/react-conventions/lib/components/Input/style.scss のエラー モジュールの解析に失敗しました: /Users/user/Desktop/App/node_modules/react-conventions/lib/components/Input/style.scss 予期しない文字 ' @' (1:0) このファイル タイプを処理するには、適切なローダーが必要になる場合があります。SyntaxError: 予期しない文字 '@' (1:0) @ ./~/react-conventions/lib/components/Input/Input.js 19:13-36

これはライブラリの問題でしょうか？疑わしいですが、私は何が欠けているのか分かりません。

わかりましたので、実際にアプリをデプロイしたことはありません。create-react-app を使用してアプリを作成しました。準備ができたらnpm run buildビルド フォルダーが作成されますが、コードを github リポジトリにプッシュしようとすると、すべてが最新であると表示されます。

今はビルド フォルダーだけを気にする必要がありますか? ビルド フォルダーのリポジトリを作成して Heroku にデプロイしようとしましたが、うまくいきませんでした。

すべてが最新であると言っている場合、コードを github にアップしてから Heroku にアップする方法がわかりません。ここでいくつかのフィードバックを探しています。これまで実際にデプロイしたことはありません。

ありがとう！

ポート 3000 セットアップで実行されているかなり小さな create-react-app を使用して、ポート 8080 で実行されているバックエンド サーバーにリクエストをプロキシします。ブラウザのアドレス バーhttp://localhost:3000/api/meに入力すると、index.html ページが返されますが、フェッチ API を使用すると/api/meバックエンドで呼び出してみてください。

問題は、Cookie を設定するバックエンドで認証する必要があることですが、ログイン ページにアクセスhttp://localhost:3000/loginできないため、Cookie を取得できません。

create-react-app から取り出した別のプロジェクトでは、構成で webpack-dev-server を実行するための小さなファイルがあります

これは、ブラウザのアドレス バーに入力された場合でもプロキシ リクエストを行います。

create-react-app でそのようなセットアップを作成することは可能ですか?

一部の背景画像が読み込まれないという問題が発生しています。最初の作成した反応アプリにいくつかの大幅な変更を加えました。フォルダー構造は次のようになりました。

注: 一部のファイルとフォルダーを省略しています。さらに必要な場合はお知らせください。

この問題を作成するための手順は次のとおりです。

これにより、開発サーバーが起動し、アプリのブラウザーが開きます。ページ上の一部の要素が画像を表示していないことを除いて、すべてが正常に機能しています。

注: イメージのYeti.pngを読み込むと、これは正常にレンダリングされます。

App.jsx

App.css

Chrome で要素を調べると、画像へのパスが正しいように見えます。インスペクターのスタイルタブで画像へのパスにカーソルを合わせると、画像が表示されます。

インポートする画像のパスは、背景画像のパスと似ていることに注意してください。

tree.pngasをインポートして 2 つの要素を にimport tree from './images/tree.png';変更すると、もちろん画像が読み込まれます。<div><img src={tree} role="presentation" className="trees__tree trees__tree--1" /><img src={tree} role="presentation" className="trees__tree trees__tree--2" />

背景画像を表示するにはどうすればよいですか? アプリにロードされていない他の背景画像があるため、前述の絆創膏は役に立ちません。アプリをイジェクトして構成を台無しにするのが怖いです。

アプリをビルドするときにも同じ問題が発生します。

ソースをもっと見る必要がある場合は、https://github.com/studio174/ispellitsで見ることができますが、問題を切り分けるためにこの例を単純化したことに注意してください。私が抱えている問題は、実際にFooter.jsxはFooter.css

バックグラウンド

AirBnB linting を機能させようとしていたのですが、package.jsonファイルの新規インストールを行うために npm パッケージをアンインストールすることにしました。

私がしたこと

bash コマンドを実行します。

その後、コードベースの標準的なインストール手順に従いました。これは、適切なディレクトリにインストールする NPM のみです。私はそれを正しくやったと確信しています。

予期せぬことが起こった

Webpack セットアップを実行するnpm startと、次のエラーが発生するまで、すべてがうまくいきました。

package.json反応バージョンが関係しているようですが、ファイルを何も変更していないので信じがたいです。

参照用の関連部分は次のとおりです。

これを修正するにはどうすればよいですか?