Загрузка ReactJS в другом приложении возвращает модуль Ошибка разбора модуля в index.js

Question

Я использую довольно новую среду разработки JS ( здесь для подробностей ) и согласно этой документации React довольно легко внедрить в другие JS-фреймворки.

В моем файле index.js, который находится в корне моего каталога, у меня есть следующий код:

import React, { Component } from "react";
import ReactDOM from "react-dom";




function Button() {
  return <button id="btn">Say Hello</button>;
}

ReactDOM.render(
  <Button />,
  document.getElementById('container'),
  function() {
    $('#btn').click(function() {
      alert('Hello!');
    });
  }
);

, и когда я запускаю fly server, я получаю следующую ошибку:

ОШИБКА в ./index.js Ошибка синтаксического анализа модуля: неожиданный токен (8: 9) Вам может потребоваться соответствующий загрузчик для обработки этого типа файла.||функциональная кнопка () {|вернуть Скажи привет;|} |

Вот мой package.json файл:

{
  "name": "fly-example",
  "version": "1.0.0",
  "description": "fly example app",
  "main": "index.js",
  "dependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.11",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  },
  "scripts": {
    "test": "mocha"
  },
  "repository": {
    "type": "git",
    "url": "none"
  },
  "keywords": [
    "fly",
    "app"
  ],

и мой webpack.config:

const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");

module.exports = {
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: { presets: ['env'] }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    publicPath: bundlePath,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname,'public'),
    port: 3000,
    publicPath: "http://localhost:3000/dist"
  },
  plugins: [ new webpack.HotModuleReplacementPlugin() ]
};

.Файл babelrc:

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

Все еще довольно плохо знаком с React, но мне нравится создавать в нем приложения, но я действительно хочу узнать, как интегрировать его в другие платформы JS, чтобы я мог использовать его более широко.

Что-то мне не хватает в файле package.json или webpack.config?Я немного осмотрелся, но ничего не нашел.

Заранее спасибо за помощь!

Answer 1

Попробуйте указать babel-loader в use.loader.См. Ниже:

const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");

module.exports = {
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
        }
        options: { presets: ['env'] }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    publicPath: bundlePath,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname,'public'),
    port: 3000,
    publicPath: "http://localhost:3000/dist"
  },
  plugins: [ new webpack.HotModuleReplacementPlugin() ]
};

Вместо того, чтобы писать конфигурацию веб-пакета самостоятельно, я бы рекомендовал использовать create-react-app, это проще.Также убедитесь, что вы импортируете jquery.

Попробуйте и дайте мне знать, если это работает!