Pakiet Web Pack nie działa po wprowadzeniu React

Podążyłem za głównym tutorialem na temat pakietu internetowego i uruchomiłem serwer. Kiedy zmieniam pliki, aktualizacja zostanie zapisana, wszystko jest w porządku. Jednak wtedy wprowadziłem React i wszystko poszło nie tak.Pakiet Web Pack nie działa po wprowadzeniu React

Po pierwsze, ja dostaję ten błąd w przeglądarce:

Unexpected token < 
You may need an appropriate loader to handle this file type.

ten jest skierowany do linii 4 w moim entry.js pliku:

var CommentBox = React.createClass({ 
    render: function() { 
    return (
     <div className="commentBox"> 
      Hello, world! I am a CommentBox. 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(
    <CommentBox />, 
    document.getElementById('content') 
);

to index.html

<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 

    <div id ="content"></div> 
<script type="text/javascript" src="bundle.js" charset="utf-8"></script> 
</body> 
</html>

webpack.config.js:

module.exports = { 
    entry: "./entry.js", 
    output: { 
    path: __dirname, 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'jsx-loader?insertPragma=React.DOM&harmony' 
     } 
    ] 
    }, 
    externals: { 
    'react': 'React' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    } 
};

Jeśli zmienię plik entry.js po prostu zawierać:

document.write(require("./content.js"));

Produkuje co obecnie mam w pliku content.js:

module.exports = "this is working";

Tak więc jest to coś zrobić z reagują/jsx itp. Ktoś ma jakieś rozwiązania? Widziałem inne osoby w Internecie z tym problemem, ale podane rozwiązania nie sprawdziły się do tej pory.

Źródło

2015-11-23 The Hurricane

Jaką wersję reagowania i babel używasz? Obaj mieli zmiany, które zrywają większość starych samouczków. Podaj link do samouczka. – Yannick

Prawdopodobnie chcesz babel-loader zamiast jsx-loader https://github.com/babel/babel-loader – wgcrouch

WebPACK i jsx-loader

webpack.config.js

module.exports = { 
    entry: './app.js', 
    output: { 
    path: __dirname, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js/, 
     loader: 'jsx-loader' 
    }] 
    } 
}

app.js

var React = require('react'); 

var App = React.createClass({ 
    render: function() { 
    return <h1>Hello World</h1> 
    } 
}) 

React.render(<App/>, document.getElementById('app'))

i proste index.html plik z <div>

Możliwa chcesz użyć reakcji ze składnią ES6 (React WebPack i Babel) tak: Mam nadzieję my post będzie przydatna dla Ciebie.

Aktualizacja:

Jak FakeRainBrigand powiedział jsx-loader jest depricated, że byłoby dobrze, jeśli spróbuje użyć Babel ładowarka zamiast jsx-loader

Dzięki

Źródło

2015-11-23 13:00:29

jsx-loader jest przestarzały – FakeRainBrigand

@FakeRainBrigand Nie słyszałem o tym, możliwe, ponieważ go nie używałem . Próbowałem odpowiedzieć na pytanie. W każdym razie dzięki. uaktualnię moją odpowiedź –

jak FakeRainBrigand powiedział, że jsx-loader jest przestarzałe, jeśli chcesz przekonwertować es6 lub jsx, prawdopodobnie będziesz chciał użyć babel-loader.A ponieważ Babel 6 został wydany teraz trzeba będzie jawnie zadeklarować których transformacja wykonać poprzez ustawienie "Presets" w pliku .babelrc jak ten:

$ npm install --save-dev babel-loader

$ npm install --save-dev babel-preset-es2015

$ npm install --save-dev babel-preset-react

{ 
    "presets": ["es2015","react"] 
}

webpack.config.js

module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style!css" }, 
     { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['es2015'] 
      } 
     }, 
     { 
      test: /\.jsx$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['react'] 
      } 
     },    
    ] 
},

Źródło

2015-11-24 12:36:06

Pakiet Web Pack nie działa po wprowadzeniu React

Odpowiedz

Powiązane problemy