Не могу найти, что вызывает ошибку при импорте компонента класса - PullRequest
Новая
       38

Не могу найти, что вызывает ошибку при импорте компонента класса

0 голосов
/ 02 октября 2019

Я получаю сообщение об ошибке: неожиданный токен при импорте класса компонента, находящегося в другом классе компонента. Я новичок в реагировании, веб-упаковке и все еще изучаю хуки обратного вызова javascript nodejs, я читаю и ищу лучшие практики, рассматривая nodejs и реагирую на то, как настроить мою dev-среду на Ubuntu.

Много проб и ошибок, чтобы понятьчто происходит за кулисами. Я могу подключиться к своей странице, если я не добавляю, как только я добавляю импорт, возникает ошибка. 

// main.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from './App.jsx';
ReactDOM.render( <App /> , document.getElementById('root'));    

// App.jsx
import React from 'react';
import {SubmitButton} from './components/SubmitButton';

export default class App extends React.Component {
    render(){
        return(<div><h1>Hi, I am a header!</h1></div>);
    }
}

// SubmitButton.jsx
import React , {Component} from 'react';

export class SubmitButton extends Component{
    constructor() {
        super();
    }
    render() {
        return(<div>Swing</div>);
    }
}

// $npm run start ... webpack.config.js : 
"scripts": {
"start": "webpack-dev-server --display-error-details --config webpack.config.js --hot --mode development",
"build" : "webpack"
}

// ERROR
ERROR in ./src/components/SubmitButton/SubmitButton.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /appdevops/graphCRMcli/src/components/SubmitButton/SubmitButton.jsx: Unexpected token (8:9)
   6 |  }
   7 |  render() {
>  8 |          return(<div>
     |                 ^
   9 |                  <SubmitButton>Swing</SubmitButton>
  10 |                  </div>
  11 |          );
    at Parser.raise 

///package.json file
{
  "name": "MyClient",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --display-error-details --config webpack.config.js --hot --mode development",
    "build" : "webpack" 
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "cross-spawn": "^7.0.0",
    "css-loader": "^3.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.8.1"
  },
  "dependencies": {}
}

// .babelrc
{
     "presets": ["@babel/preset-env", "@babel/preset-react"] 
}


// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// HtmlWebpackPlugin is used to inject our created bundles into this html file so // we need to create it.
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body',
});

module.exports = {
    mode : 'development',
    entry: {
        app: ['./src/main.jsx'],
        vendor: ['react', 'react-dom']
    },
    output: {
        path: '/appdevops/graphCRMcli/dist',
        libraryTarget: 'umd',
        filename: '[name].js'
    },
    devServer: {
    host : '0.0.0.0',
    compress: true,
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
        HtmlWebpackPluginConfig
    ],
 };

1 Ответ

0 голосов
/ 03 октября 2019

Я решил это, настроив webpack.config.js и:

удалив .babelrc

добавив содержимое .babelrc в webpack.config.js 

module: {
  rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/, 
        use: {
          loader: "babel-loader",
           options: {
              presets: ["@babel/preset-env", "@babel/preset-react" ]
              }
           }
      }
  ]
}
...