Webpack не будет разбирать JSX независимо от того, что я пытаюсь

Been на него пару дней ...Webpack не будет разбирать JSX независимо от того, что я пытаюсь

Попытки использовать Webpack сделать ленивую-загрузку Реагировать модули, приложение-оболочку вынесенной первый на сервере, то Маршрутизатор вводится на клиент. Он был сбор штрафа при использовании глотка, но с Webpack, я получаю позорную:

ОШИБКИ в ../server/components/routes/AppRouter.jsx модуля синтаксического анализа не удалось:/веб/сайты/реагирует-ленивый/сервер /components/routes/AppRouter.jsx Неожиданный токен (11: 6) Для управления этим типом файла может потребоваться соответствующий загрузчик.

AppRouter.jsx:

import React from 'react'; 
import { Router, Route, IndexRoute } from 'react-router'; 
import routes from './AppRoute.jsx'; 
import createMemoryHistory from 'history/lib/createMemoryHistory'; 

if (typeof require.ensure !== 'function') require.ensure = (d, c) => c(require) 

export default class AppRouter extends React.Component { 
    render() { 
    return (
     <Router routes={routes} history={createMemoryHistory()} /> // < -- errors here 
    ); 
    } 
}

Мои webpack.config.js:

var path = require('path') 

module.exports = { 
    context: __dirname + "/src", 
    entry: './js/app.es6.js', 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     include: path.resolve(__dirname, 'src/js'), 
     exclude: /(node_modules)/, 
     query: { 
      presets: ["es2015", "stage-0", "react"], 
     } 
     } 
    ] 
    }, 

    output: { 
    path: __dirname + '/build', 
    publicPath: '/build', 
    filename: 'app.js', 
    chunkFilename: '[id].chunk.js', 
    } 
}

Моя структура каталогов:

/
    webpack.config.js 
    .babelrc 
    /src 
     /js 
      app.es6.js 
      .babelrc // <-- also put a .babelrc here in case

Мой package.json:

"devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.14.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "babel-register": "^6.14.0", 
    "webpack": "^1.13.2", 
    ... 
}

Я пробовал:

дублируя файл .babelrc в основной каталог и точка входа каталога, не уверен, что это необходимо.
регистрация столпотворения регистра: в app.es6.js:
```
require('babel-register')({ 
    presets: [ 'es2015', 'stage-0', 'react' ] 
}); 
```
Webpack с стереосистемой и обновите '--config webpack.config.js' аргумента
Если я принизить столпотворение, babel- ядро, и столпотворение-версия загрузчика до 5 * (от 6 *), есть другая ошибка:
```
ERROR in ./js/app.es6.js 
Module build failed: ReferenceError: [BABEL] /web/sites/react-lazy/src/js/app.es6.js: Unknown option: direct.presets 
```

Я довольно новый для React и webpack, я должен сказать. Кто-нибудь знает какие-нибудь другие трюки?

Решение:

WebPack файлы конфигурация 'включить' свойство должно включать в себя все каталоги, которые вы должны пройти через погрузчик

источник

2016-09-05 Ryan Weiss

Вы установили babel-preset-es2015? – Li357

Да, извините, обновлено с package.json –

Это довольно любопытно. Кажется, все правильно, насколько я знаю – Li357

Файл вход использует компоненты, которые расположены здесь:

/web/sites/react-lazy/server/components/

Однако ваша конфигурация include разрешает только файлы ниже /web/sites/react-lazy/src/js/, который должен быть передан загрузчику (include означает: "любые файлы, которые должны быть переданы этому загрузчику должно быть быть в этом каталоге").

Так что либо удалите конфигурацию include, либо создайте массив, который также включает в себя другие местоположения, в которых находятся файлы .jsx.

источник

2016-09-05 07:21:41 robertklep

Ах, джед, наконец, спасибо :-) –

Webpack не будет разбирать JSX независимо от того, что я пытаюсь

ответ

Смежные вопросы