React Hot Loaderは機能しているようですが、更新されません。[babel-preset-env]

PeterKogo

Webpack、React、Babel、React HotLoaderの最新バージョンを利用する最小限のプロジェクトをセットアップしようとしました。ここで説明したのと同じ問題がありますただし、唯一の違いは、の代わりに上記のものだけで babel-preset-envなく使用babel-preset-es2015していることです。したがって、修正は適用されません。

つまり、すべてが機能し、React Hot Loaderは変更を検出しますが、コンポーネントは再レンダリングされず、変更はWebサイトに適用されません。

完全なプロジェクトはここにあります。あなたが変更することで動作を再現することができます(糸インストール/糸スタートは、それが始める必要があります)testString/components/App.js、ファイルを保存します。

私は何が間違っているのですか?

webpack.config.js

var webpack = require('webpack')

module.exports = {
    entry: [
      'react-hot-loader/patch',
      './src/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    },
    module: {
        rules: [
            {
              test: /\.js$/,
              exclude: /(node_modules)/,
              use: {
                loader: 'babel-loader',
              }
            }
          ]
    },
    devServer: {
      contentBase: './dist',
      hot: true
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
      ]

}

.babelrc

{
    "presets": [
      "react",
      [ "env", {
        "targets": {
          "browsers": "> 10%"
        }
      }]
    ],
    "plugins": ["react-hot-loader/babel"]
  }

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from '../components/App'

const render = Component => {
    ReactDOM.render(
      <AppContainer>
        <Component />
      </AppContainer>,
      document.getElementById('app'),
    )
  }

render(App)

if (module.hot) {
const NextApp = require('../components/App').default
module.hot.accept('../components/App', () => { render(NextApp) })
}

package.json

{
  "name": "minimal-react",
  "version": "0.1.0",
  "description": "minimal react",
  "main": "index.js",
  "repository": "https://github.com/PeterKey/minimal-react.git",
  "dependencies": {
    "path": "^0.12.7",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "react-hot-loader": "^3.1.3"
  },
  "scripts": {
    "start": "webpack-dev-server --progress --colors --config ./webpack.config.js"
  }
}
PeterKogo

さて、「es2015」プリセットの場合と同じ方法で、「env」プリセットの{"modules":false}プロパティを設定するだけでよいことに気付きました。

.babelrc

{
"presets": [
  "react",
  [ "env", {
    "modules": false,
    "targets": {
      "browsers": "> 10%"
    }
  }]
],
"plugins": ["react-hot-loader/babel"]

}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Rollup + @babel/preset-env + @babel/polyfill

分類Dev

babel-preset-envがjsxを認識していません

分類Dev

react-hot-loaderは正しくチェックしていますが、更新されていません

分類Dev

babel-preset-es2015とbabel-preset-envの違いは何ですか?

分類Dev

babel-preset-envがwebpack-dev-serverv2.2.0-rc.0で機能しない

分類Dev

babel-preset-envがサポートするプラグイン(javascript機能)はどれですか?

分類Dev

babel-preset-env のパーク機能を動作させない

分類Dev

PATHからモジュール「babel-preset-env」が見つかりません「@babel / env」のことですか?

分類Dev

React-hot-loaderはReact-router-domでは機能しません

分類Dev

babelとbabel-preset-reactおよびbabel-preset-es2015でwebpackを使用する

分類Dev

Jestでbabel-preset-envを使用する方法

分類Dev

babel-preset-envを指定したgulp-babelはbrowserslistを無視します

分類Dev

@ babel / preset-envでnode.jsファイルを実行できません

分類Dev

react-hot-loader v3 と webpack-hot-middleware のエラー開発が定義されていません

分類Dev

babel-preset-envを使用してpromisetranspilationを無効にしますか?

分類Dev

@ babel / envと@ babel / preset-envの間のbabelプリセット設定と混同される

分類Dev

「@babel / preset-env」と「@babel / preset-typescript」を使用したセットアップで「@babel / plugin-proposal-optional-chaining」が必要なのはなぜですか

分類Dev

Error: Couldn't find preset "react" when installed using npm install --global babel-preset-react but works without global flag

分類Dev

babel-preset-reactがJSXを解析しないのはなぜですか?

分類Dev

The babel preset @babel/preset-react doesn't like my javascript function that returns a JS.X element

分類Dev

browserifyは、babel-preset-react、babel-preset-es2015、およびbabel-preset-stage-3を使用しているにもかかわらず、jsxの解析に失敗します

分類Dev

「react-hot-loader / babel」は私のビルドを壊します-なぜそれが必要なのですか?

分類Dev

react-hot-loaderとwebpackが機能しない

分類Dev

Nuxt.jsモジュールが見つかりません '@ babel / preset-env / lib / utils'

分類Dev

babel vs babel-core vs babel-loader vs babel-preset-2015 vs babel-preset-react vs babel-polyfill

分類Dev

React-native.envファイルが正しく機能していません

分類Dev

React-hot-loader 3、React-router 4、およびWebpack-hot-middlewareを使用したReact Hot Reload

分類Dev

React-hot-loader: `hot`はあなたが提供した` module`の `name`を見つけることができませんでした

分類Dev

JavaScript-babel-preset-envがIE11の矢印関数をトランスパイルしない

Related 関連記事

  1. 1

    Rollup + @babel/preset-env + @babel/polyfill

  2. 2

    babel-preset-envがjsxを認識していません

  3. 3

    react-hot-loaderは正しくチェックしていますが、更新されていません

  4. 4

    babel-preset-es2015とbabel-preset-envの違いは何ですか?

  5. 5

    babel-preset-envがwebpack-dev-serverv2.2.0-rc.0で機能しない

  6. 6

    babel-preset-envがサポートするプラグイン(javascript機能)はどれですか?

  7. 7

    babel-preset-env のパーク機能を動作させない

  8. 8

    PATHからモジュール「babel-preset-env」が見つかりません「@babel / env」のことですか?

  9. 9

    React-hot-loaderはReact-router-domでは機能しません

  10. 10

    babelとbabel-preset-reactおよびbabel-preset-es2015でwebpackを使用する

  11. 11

    Jestでbabel-preset-envを使用する方法

  12. 12

    babel-preset-envを指定したgulp-babelはbrowserslistを無視します

  13. 13

    @ babel / preset-envでnode.jsファイルを実行できません

  14. 14

    react-hot-loader v3 と webpack-hot-middleware のエラー開発が定義されていません

  15. 15

    babel-preset-envを使用してpromisetranspilationを無効にしますか?

  16. 16

    @ babel / envと@ babel / preset-envの間のbabelプリセット設定と混同される

  17. 17

    「@babel / preset-env」と「@babel / preset-typescript」を使用したセットアップで「@babel / plugin-proposal-optional-chaining」が必要なのはなぜですか

  18. 18

    Error: Couldn't find preset "react" when installed using npm install --global babel-preset-react but works without global flag

  19. 19

    babel-preset-reactがJSXを解析しないのはなぜですか?

  20. 20

    The babel preset @babel/preset-react doesn't like my javascript function that returns a JS.X element

  21. 21

    browserifyは、babel-preset-react、babel-preset-es2015、およびbabel-preset-stage-3を使用しているにもかかわらず、jsxの解析に失敗します

  22. 22

    「react-hot-loader / babel」は私のビルドを壊します-なぜそれが必要なのですか?

  23. 23

    react-hot-loaderとwebpackが機能しない

  24. 24

    Nuxt.jsモジュールが見つかりません '@ babel / preset-env / lib / utils'

  25. 25

    babel vs babel-core vs babel-loader vs babel-preset-2015 vs babel-preset-react vs babel-polyfill

  26. 26

    React-native.envファイルが正しく機能していません

  27. 27

    React-hot-loader 3、React-router 4、およびWebpack-hot-middlewareを使用したReact Hot Reload

  28. 28

    React-hot-loader: `hot`はあなたが提供した` module`の `name`を見つけることができませんでした

  29. 29

    JavaScript-babel-preset-envがIE11の矢印関数をトランスパイルしない

ホットタグ

アーカイブ