All geek questions in one place

Response not defined ReferenceError? I am using webpack and webpack-dev-server

this is my jsx :

 var React = require('react');
  var ReactDOM = require('react-dom');
  ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('content')
  )

I build with webpack before build/bundle.js&
I import bundle.jsintoindex.html

index.html

<!DOCTYPE html>
<html>
  <head>
  ┊ <meta charset="utf-8">
  ┊ <meta name="viewport" content="width=device-width">
  ┊ <title></title>
  </head>
  <body>
  ┊ <div id="content"></div>
  ┊ <script src="./build/bundle.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

But when I started webpack-dev-server, Chrome console error:
bundle.js:57 Uncaught ReferenceError: React is not defined
I'm sure I launchednpm install react
enter image description here

how can i fix it? (-_-) ゞ ゛

+4
source share
2 answers

You must add this to your app.jsnot.jsx

var React = require('react');
  var ReactDOM = require('react-dom');
  ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('content')
  )

JSX is a complex language interpreted by React components. So, in app.js for React components there must be React for interpreting jsx !!

+3
source

JSX ES6 .

, React, , , . -

Webpack

npm

npm i babel-loader babel-preset-es2015 babel-preset-react -S

Babel-preset-es2015 babel-preset-react , babel ES6 JSX .

Webpack babel

// Existing Code ....
var config = {
  // Existing Code ....
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      }
    ]
  }
}

loaders , babel-loader. , test..js .jsx /\.jsx?/

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: "inline-sourcemap",
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: [
      new webpack.ProvidePlugin({
        'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
      })
  ] 
};
0

Source: https://habr.com/ru/post/1652785/

More articles:


All Articles