Разбор JSX в React, но не в зависимости (webpack, babel) - PullRequest
Новая
       0

Разбор JSX в React, но не в зависимости (webpack, babel)

0 голосов
/ 13 февраля 2019

У меня есть приложение React, использующее JSX, которое работает нормально, пока я не импортирую зависимость, которая также использует JSX, после чего я получаю следующее сообщение об ошибке: 

ERROR in ./node_modules/simple-test-react-app/src/Component.js 9:9
Module parse failed: Unexpected token (9:9)
You may need an appropriate loader to handle this file type.
| 
|   render() {
>       return <div>I'm a super simple thing!</div>
|   }
| }
 @ ./src/App.js 4:0-46
 @ multi (webpack)-dev-server/client?http://localhost:3101 ./src/App.js

Интересно то, что JSX анализируетпросто отлично везде, КРОМЕ зависимости.Я подозреваю, что это, вероятно, связано с тем, как настроены webpack и / или babel, но после долгих поисков я потерян как никогда.Также возможно, что мне нужно что-то исправить в зависимости (которая тоже моя).

Вот ссылка на приложение github repo для barebones-приложений, в котором обнаружена проблема.А вот ссылка на зависимость .Для простоты я также включил некоторые фрагменты кода ниже (от родителя, НЕ от зависимости):

App.js (если я удаляю 3-й оператор импорта, это нормально разбирает) 

import React from "react";
import ReactDOM from "react-dom";

//Problem is here. The problem goes away when this is commented out.
import Component from "simple-test-react-app";

ReactDOM.render(<div>Hello world</div>, document.getElementById("app"));

Webpack.config.js 

const path = require("path");
const port = 3101;
const APP_DIR = path.resolve(__dirname, "src");

const config = {
    entry: [
        APP_DIR + "/App.js",
    ],
    output: {
        filename: "app.[contenthash].js",
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
        ],
    },
    resolve: {
        extensions: [
            "*",
            ".js",
        ],
    },
    devServer: {
        compress: true,
        port: port,
    },
};

module.exports = config;

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 13 февраля 2019

Вавилон не обрабатывает вашу зависимость из-за exclude: /node_modules/.Удалите это, и оно должно работать.

...