Question

我正在使用Reactstrap和Webpack构建应用程序。我正在努力与Webpack和React。我想运行我的react-dev服务器但是我在终端中遇到了这个错误：

ericpark-macbookpro3:mvp ericpark$ npm run react-dev

    > github-fetcher-fullstack-v2@1.0.0 react-dev /Users/ericpark/Desktop/mvp
    > webpack -d --watch


    Webpack is watching the files…

    Hash: d1e3cad44a718dd4af71
    Version: webpack 2.7.0
    Time: 64ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  3.35 kB       0  [emitted]  main
       [0] ./react-client/src/index.jsx 298 bytes {0} [built] [failed] [1 error]

    ERROR in ./react-client/src/index.jsx
    Module parse failed: /Users/ericpark/Desktop/mvp/react-client/src/index.jsx Unexpected token (61:6)
    You may need an appropriate loader to handle this file type.
    |   render() {
    |     return (
    |       <div className="App">
    |         <Navbar></Navbar>
    |         <Container>

看起来我错过了一个装载机。这是我的webpack.config.js

var path = require('path');
var SRC_DIR = path.join(__dirname, '/react-client/src');
var DIST_DIR = path.join(__dirname, '/react-client/dist');

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  module : {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ],
    loaders : [
      {
        test : /\.jsx?/,
        include : SRC_DIR,
        loader : 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['env', 'react', 'es2015', 'stage-0']
       }
      }
    ]
  }
};

这是我的起始文件index.jsx：

import React, { Component } from 'react';
import Navbar from './components/Navbar.jsx';
import Login from './components/Login.jsx';
import SignUp from './components/SignUp.jsx';
import Search from './components/Search.jsx';
import ProductList from './components/ProductList.jsx';
import FavoriteList from './components/FavoriteList.jsx';
import { Route, Switch } from 'react-router-dom';
import {Container} from 'reactstrap';

import axios from 'axios';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      query : '',
      products : [
        {
          name: 'Samsung - Galaxy J3 with 16GB Memory Cell Phone - Silver (AT&T)',
          url: 'https://api.bestbuy.com/click/-/5887123/pdp',
          price: 179.99,
          image: 'https://img.bbystatic.com/BestBuy_US/images/products/5887/5887123_sd.jpg',
          description: 'Android 7.0 Nougat4G LTE5" HD touch screenBluetooth'
        },
        {
          name: 'Samsung - Book Cover for Samsung Galaxy Tab S2 8 - Black',
          url: 'https://api.bestbuy.com/click/-/4346001/pdp',
          price: 59.99,
          image: 'https://img.bbystatic.com/BestBuy_US/images/products/4346/4346001_sd.jpg',
          description: 'Compatible with Samsung Galaxy Tab S2 8; polyurethane material; auto on/off function; 3 viewing angles'
        },
        {
          name: 'Samsung - Case for Samsung Galaxy S8 - Blue/clear',
          url: 'https://api.bestbuy.com/click/-/5851701/pdp',
          price: 19.99,
          image: 'https://img.bbystatic.com/BestBuy_US/images/products/5851/5851701_sb.jpg',
          description: 'Compatible with Samsung Galaxy S8'
        }
      ],
      favorites : []
    }
  }

  handleQuery (event) {
    event.preventDefault;
    this.setState({
      query : event.target.value
    });
    console.log(event.target.value);
    //POST request for searching products
    // axios.post('/search', {query : this.state.query}).then(function(response){
    //   this.setState = {products : response};
    // })
  }

  render() {
    return (
      <div className="App">
        <Navbar></Navbar>
        <Container>
          <Switch>
            <Route path='/login' component={Login}/>
            <Route path='/signup' component={SignUp}/>
            <Route path='/' render = {(props) =>
              <div>
                <Search handleQuery = {this.handleQuery.bind(this)}></Search>
                <ProductList products = {this.state.products}></ProductList>
              </div>

              }/>
            <Route path='/favorites' render = {(props) =>
              <FavoriteList favorites = {this.state.favorites}></FavoriteList>
              }/>
          </Switch>
        </Container>
      </div>
    );
  }
}

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

非常感谢任何帮助

的package.json

{
  "name": "github-fetcher-fullstack-v2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "react-dev": "webpack -d --watch",
    "server-dev": "nodemon server/index.js"
  },
  "author": "Beth Johnson",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.23.0",
    "css-loader": "^0.28.11",
    "react-hot-loader": "^4.1.2",
    "webpack": "^2.7.0"
  },
  "dependencies": {
    "angular": "^1.6.3",
    "body-parser": "^1.17.2",
    "bootstrap": "^4.1.0",
    "express": "^4.15.0",
    "jquery": "^3.1.1",
    "mongoose": "^4.8.6",
    "mysql": "^2.13.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "reactstrap": "^5.0.0"
  }
}

Answer 1

您可以通过更新配置轻松修复以处理 .js和.jsx 文件：

 module: {
          loaders: [
            {
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              loader: "babel-loader"
            }
          ]
        }

您可以将以下代码段添加到webpack配置对象。

resolve: { extensions: [".jsx", ".js"] }

Answer 2

似乎Webpack配置有一个小问题，jsx文件与适当的加载器不匹配。

尝试test: /\.jsx?$/,，看看它是否有效。

Answer 3

根据您的情况，您可能需要使用我推荐此配置的js文件。

module:{ rules:[{ loader: 'babel-loader', test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', test: /\.jsx?$/, exclude: /node_modules/, }, { test: /\.s?css$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }] }

该配置包括您可能需要的任何文件的所有加载程序，例如：js jsx css scss

缺少Loader，Webpack和React

3 个答案: