陣營模塊導入/導出分析錯誤：第1行：非法進口報關（一飲而盡）

Question

的package.json

"devDependencies": { 
    "babel-plugin-transform-react-jsx": "^6.23.0", 
    "babel-preset-es2015": "^6.24.0", 
    "babelify": "^7.3.0", 
    "browser-sync": "^2.11.1", 
    "gulp": "^3.9.1", 
    "gulp-babel": "^6.1.2", 
    "gulp-plumber": "^1.1.0", 
    "react-paginate": "^4.3.1", 
    "react-router": "^2.8.1" 
    "browser-sync": "^2.11.2", 
    "chart.js": "^2.1.6", 
    "colors": "^1.1.2", 
    "event-stream": "^3.3.2", 
    "gulp": "^3.9.1", 
    "gulp-browserify": "^0.5.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-less": "^3.0.5", 
    "gulp-less-sourcemap": "^1.4.3", 
    "gulp-plumber": "^1.1.0", 
    "gulp-react": "^3.1.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-sourcemaps": "^1.6.0", 
    "gulp-uglify": "^1.5.3", 
    "gulp-util": "^3.0.7", 
    "lodash": "^4.13.1", 
    "path": "^0.12.7", 
    "react": "^15.1.0", 
    "react-dom": "^15.1.0", 
    "reactify": "^1.1.1" 
    } 

gulpfile.js

var gulp = require('gulp'); 
var less = require('gulp-less'); 
var path = require('path'); 
var rename = require("gulp-rename"); 
var eventStream = require('event-stream'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var sourcemaps = require('gulp-sourcemaps'); 
var plumber = require('gulp-plumber'); 
var gutil = require('gulp-util'); 
var less = require('gulp-less-sourcemap'); 
var babel = require('gulp-babel'); 
var babelify = require("babelify"); 
var browserify = require('gulp-browserify'); 
var browserSync = require('browser-sync').create(); 


gulp.task('themeSelector', function() { 

    return gulp.src(['./js/theme-selector/**/*.js', '!./js/**/*.min.*']) 
    .pipe(plumber(onError)) 
    .pipe(babel({ 
     presets: ['es2015'], 
     plugins: ['transform-react-jsx'], 
    })) 
    .pipe(browserify({ 
     transform: ['babelify', 'reactify'], 
     debug: true 
    })) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(gulp.dest('./js/theme-selector/')); 
}); 

文件：
JS /主題 - 選擇器/ app.js

import React, { Component } from 'react'; 
    import { render } from 'react-dom'; 
    import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router'; 
    import Loader from './components/loader'; 

    class Main extends Component {...} 

js/theme-selec tor/components/loader.js

import React, { Component } from 'react'; 


class Loader extends Component { 
    render() { 
    return (
     <div class="loader-wrap" id="page-settings-loader"> 
      I'm a loader 
     </div> 
    ) 
    } 
}; 

export default Loader; 

如果我將加載程序組件移動到app.js中，那麼文件編譯時不會出錯。如果我import React from 'react';而不是import React, { Component } from 'react';我沒有收到任何錯誤，但是我在JSX的第一行收到了一個意外的令牌。

很明顯，我沒有通過babel/browserify正確地管理其他組件。

Answer 1

除非是在你的後一個錯字，但你要導入裝載不當

應該

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router'; 
import Loader from './component/loader'; 

    class Main extends Component {...} 

既然你說的文件是JS /主題選擇/ 組件 /裝載機的.js

和不JS /主題選擇器/ 部件 /loader.js

Answer 2

我不知道爲什麼andI'd有興趣知道，但加入了.babelrc文件具有以下固定我的問題：

{ 
    "plugins": ["transform-react-jsx"], 
    "presets": ['es2015', 'react'] 
}