search

reactstrap / reactstrap

Simple React Bootstrap 5 components
https://reactstrap.github.io
MIT License
10.58k stars 1.3k forks source link

Strange React Compiler Behavior: node_modules\reactstrap\src\Alert.js: Unexpected token UPDATED #1334

Closed Tsyklop closed 5 years ago

Tsyklop commented 5 years ago

Issue description

What is happening?

I do the project on ReactJS. Put the reactstrap module for elements from bootstrap4.

I have reactstrap tabs. So it works. I wanted to transfer content for tabs into separate components. And here an error occurred during compilation Why?

What should be happening?

Expecting normal compilation and behavior.

Expected code:

<TabContent activeTab={this.state.activeTab}>
     <SignInTab/>
     <SignUpTab/>
     <TermsTab/>
</TabContent>

Steps to reproduce issue

Error message in console

./node_modules/reactstrap/src/Alert.js
SyntaxError: E:\IDEA\application\node_modules\reactstrap\src\Alert.js: Unexpected token (72:4)

  70 | 
  71 |   return (
> 72 |     <Fade {...attributes} {...alertTransition} tag={Tag} className={classes} in={isOpen} role="alert" innerRef={innerRef}>
     |     ^
  73 |       {toggle ?
  74 |         <button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle}>
  75 |           <span aria-hidden="true">&times;</span>

Code

package.json

{
  "name": "front-end-react-v1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "ajv": "^6.6.2",
    "ajv-keywords": "^3.2.0",
    "classnames": "^2.2.3",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-native": "^0.57.8",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-native": "^4.3.0",
    "react-scripts": "^2.1.1",
    "reactstrap": "^6.5.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  }
}

 import React, {Component} from 'react';
import {
    Button,
    Col,
    Container,
    Form,
    Input,
    InputGroup, InputGroupAddon, InputGroupText,
    Label,
    Nav,
    NavItem,
    NavLink,
    Row,
    TabContent,
    TabPane
} from "reactstrap";
import {Link} from "react-router-dom";
import classNames from 'classnames';
import Logo from "../../components/common/Logo";

import '../../style/page/auth/style.css';
import '../../style/page/auth/media.css';
import '../../style/page/auth/custom.css';

class LoginPage extends Component {

    constructor(props) {
        super(props);

        this.state = {
            activeTab: 'signInTab'
        };

        this.toggle = this.toggle.bind(this);
        this.openTermsTab = this.openTermsTab.bind(this);
    }

    componentDidMount() {
        document.title = "Авторизация";
    }

    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab
            });
        }
    }

    openTermsTab(e) {
        e.preventDefault();
        this.toggle('termsTab');
    }

    render() {
        return (
            <main className="align-middle">
                <Container>
                    <Row className="h-100 justify-content-center">
                        <Col xs={"12"} sm={"12"} md={"8"} lg={"6"} xl={"6"}>
                            <div className="entry-box-wrapper">
                                <div className="entry-box modal-content">
                                    <div className="modal-body">

                                        <Nav pills justified>

                                            <NavItem>
                                                <NavLink
                                                    className={classNames({ active: this.state.activeTab === 'signInTab' })}
                                                    onClick={() => { this.toggle('signInTab'); }}>
                                                    Авторизация
                                                </NavLink>
                                            </NavItem>

                                            <NavItem>
                                                <NavLink
                                                    className={classNames({ active: this.state.activeTab === 'signUpTab' })}
                                                    onClick={() => {this.toggle('signUpTab')}}>
                                                    Регистрация
                                                </NavLink>
                                            </NavItem>

                                            <NavItem>
                                                <NavLink
                                                    className={classNames({ active: this.state.activeTab === 'termsTab' })}
                                                    onClick={this.openTermsTab}>
                                                    Правила сервиса
                                                </NavLink>
                                            </NavItem>

                                        </Nav>

                                        <Logo className={"d-block mx-auto mt-4"} />

                                        <TabContent activeTab={this.state.activeTab}>

                                            <TabPane tabId={"signInTab"}>
                                                <hr/>
                                                <Form id="signInForm" >

                                                    <div className="form-group input-group">

                                                        <InputGroup>
                                                            <InputGroupAddon addonType="prepend">
                                                                <InputGroupText>
                                                                    <i className="fas fa-envelope"/>
                                                                </InputGroupText>
                                                            </InputGroupAddon>
                                                            <Input type="email" name="email" placeholder="Email" />
                                                        </InputGroup>

                                                    </div>

                                                    <div className="form-group input-group">

                                                        <InputGroup>
                                                            <InputGroupAddon addonType="prepend">
                                                                <InputGroupText>
                                                                    <i className="fas fa-unlock-alt"/>
                                                                </InputGroupText>
                                                            </InputGroupAddon>
                                                            <Input type="password" name="password" placeholder="Пароль" />
                                                        </InputGroup>

                                                    </div>

                                                    <Row>

                                                        <Col widths={["6"]}>
                                                            <div className="custom-control custom-checkbox">
                                                                <Input
                                                                    type={"checkbox"}
                                                                    name={"rememberMe"}
                                                                    id={"singInTabRememberMe"}
                                                                    className={"custom-control-input"}/>
                                                                <Label
                                                                    for={"singInTabRememberMe"}
                                                                    className={"custom-control-label"}>
                                                                    запомнить меня
                                                                </Label>
                                                            </div>
                                                        </Col>

                                                        <Col widths={["6"]} className="text-center pl-0 pr-0">
                                                            <Link to="/admin/forgot" className="brand-link">
                                                                Не помню пароль
                                                            </Link>
                                                        </Col>

                                                    </Row>

                                                    <Button color="" className={"float-right brand-nav-btn left-filling"}>
                                                        <i><img src={process.env.PUBLIC_URL + '/img/login2.png'} alt=""/></i>
                                                        <span>
                                                            Вход
                                                        </span>
                                                    </Button>

                                                </Form>
                                            </TabPane>

                                            <TabPane tabId={"signUpTab"}>
                                                <hr/>
                                                <Form>

                                                    <div className="form-group input-group">

                                                        <InputGroup>
                                                            <InputGroupAddon addonType="prepend">
                                                                <InputGroupText>
                                                                    <i className="fas fa-envelope"/>
                                                                </InputGroupText>
                                                            </InputGroupAddon>
                                                            <Input type="email" placeholder="Email" />
                                                        </InputGroup>

                                                    </div>

                                                    <div className="form-group input-group">

                                                        <InputGroup>
                                                            <InputGroupAddon addonType="prepend">
                                                                <InputGroupText>
                                                                    <i className="fas fa-unlock-alt"/>
                                                                </InputGroupText>
                                                            </InputGroupAddon>
                                                            <Input type="password" placeholder="Пароль" />
                                                        </InputGroup>

                                                    </div>

                                                    <div className="form-group input-group">

                                                        <InputGroup>
                                                            <InputGroupAddon addonType="prepend">
                                                                <InputGroupText>
                                                                    <i className="fas fa-unlock-alt"/>
                                                                </InputGroupText>
                                                            </InputGroupAddon>
                                                            <Input type="password" placeholder="Повторите пароль" />
                                                        </InputGroup>

                                                    </div>

                                                    <div className="custom-control custom-checkbox ">

                                                        <Input
                                                            type={"checkbox"}
                                                            name={"example1"}
                                                            id={"chBxTermsArgee"}
                                                            className={"custom-control-input"}/>

                                                        <Label
                                                            for={"chBxTermsArgee"}
                                                            className={"custom-control-label"}>

                                                            согласен с

                                                            <a href={"#"} className="brand-link" id="serviceTermsLink"
                                                               onClick={this.openTermsTab}>
                                                                 правилами сервиса
                                                            </a>

                                                        </Label>

                                                    </div>

                                                    <Button color="" className={"float-right brand-nav-btn left-filling"}>
                                                        <i><img src={process.env.PUBLIC_URL + '/img/login2.png'} alt=""/></i>
                                                        <span>
                                                            Отправить
                                                        </span>
                                                    </Button>

                                                </Form>

                                            </TabPane>

                                            <TabPane id="termsTab" tabId={"termsTab"}>
                                                <hr/>
                                                <div className="service-terms">
                                                    <h3>Правила предоставления услуги</h3>
                                                    <p>
                                                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                                        Ipsa, cumque
                                                        necessitatibus impedit delectus ratione harum nisi nemo
                                                        minus eaque,
                                                        exercitationem consequuntur. Repellat tempore molestias
                                                        dicta. Recusandae
                                                        quam rem ducimus temporibus!
                                                        Doloribus quibusdam ullam atque possimus sequi libero
                                                        inventore natus amet
                                                        facilis, minima dolore molestias accusantium nam omnis,
                                                        delectus totam fuga
                                                        quae nemo asperiores laboriosam veritatis! Ipsam aperiam
                                                        ipsa nulla vitae?
                                                        Temporibus nulla rem aspernatur eum quidem minima
                                                        voluptatum corporis libero
                                                        explicabo. Impedit distinctio deleniti labore
                                                        exercitationem quae
                                                        repudiandae consequatur? Ullam eveniet quo
                                                        exercitationem! Sint ab, nihil
                                                        placeat ea omnis libero!
                                                        Lorem ipsum, dolor sit amet consectetur adipisicing
                                                        elit. Cum, voluptatum
                                                        perspiciatis molestias reiciendis blanditiis pariatur in
                                                        sunt velit? Labore
                                                        assumenda repellendus sint molestiae debitis esse itaque
                                                        totam distinctio
                                                        perferendis reiciendis?
                                                    </p>
                                                </div>

                                            </TabPane>

                                        </TabContent>

                                    </div>

                                </div>

                            </div>

                        </Col>
                    </Row>
                </Container>
            </main>
        );
    }
}

export default LoginPage;
Tsyklop commented 5 years ago

who can help? what wrong?

Tsyklop commented 5 years ago

In browser i get this error:

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\IDEA\mobils-chat-front-end-react-v1\node_modules\reactstrap\src\Container.js: Unexpected token (32:4)

  30 | 
  31 |   return (
> 32 |     <Tag {...attributes} className={classes} />
     |     ^
  33 |   );
  34 | };
  35 | 
    at Parser.raise (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:3939:15)
    at Parser.unexpected (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:5248:16)
    at Parser.parseExprAtom (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:6328:20)
    at Parser.parseExprSubscripts (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:5924:21)
    at Parser.parseMaybeUnary (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:5903:21)
    at Parser.parseExprOps (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:5812:21)
    at Parser.parseMaybeConditional (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:5784:21)
    at Parser.parseMaybeAssign (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:5731:21)
    at Parser.parseParenAndDistinguishExpression (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:6482:28)
    at Parser.parseExprAtom (E:\IDEA\mobils-chat-front-end-react-v1\node_modules\@babel\parser\lib\index.js:6284:21)
    at Object../node_modules/reactstrap/src/Container.js (http://localhost:3000/static/js/1.chunk.js:47522:7)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../node_modules/reactstrap/src/index.js (http://localhost:3000/static/js/1.chunk.js:48181:68)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/components/admin/panel/AddSite.js (http://localhost:3000/static/js/main.chunk.js:296:72)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/page/admin/PanelPage.js (http://localhost:3000/static/js/main.chunk.js:3540:90)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/config/Config.js (http://localhost:3000/static/js/main.chunk.js:2112:79)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/module/AdminModule.js (http://localhost:3000/static/js/main.chunk.js:2202:72)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/app/App.js (http://localhost:3000/static/js/main.chunk.js:193:77)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:2170:66)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Object.0 (http://localhost:3000/static/js/main.chunk.js:5056:18)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
    at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
    at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
    at http://localhost:3000/static/js/main.chunk.js:1:57
yorickreum commented 5 years ago

Any news here? I'm getting the same error.

Tsyklop commented 5 years ago

Any news here? I'm getting the same error.

https://stackoverflow.com/questions/53900426/strange-react-compiler-behavior

kheengz commented 5 years ago

That the error occurs in ./node_modules/reactstrap/src/Alert.js means that a component is imported from reactstrap/src/... instead of reactstrap (the latter points at reactstrap/dist/...).

The problem with importing from reactstrap/src is that it contains code that needs to be transpiled. It shouldn't be imported without a good reason because projects are usually configured to not transpile modules from node_modules, this would result in overhead and potential problems. In an application generated by create-react-app, this cannot be changed without modifying Webpack configuration.

Incorrect imports like reactstrap/src/... are often added by IDE auto-imports.

In case there's

import Alert from 'reactstrap/src/Alert.js';

import, it should be changed to

import { Alert } from 'reactstrap';