Browserify Rails錯誤 - ParseError：'導入'和'導出'可能只出現'sourceType：模塊'

Question

最近我想集成NPM包在我的rails應用程序。我得到這個問題：

我在這個論壇上搜索，如果有人有同樣的問題，像我一樣。是的，我看到類似的問題在這裏發佈，但他們有不同的錯誤。

下面是我在我的application.js：

//= require jquery 
 
//= require jquery_ujs 
 
//= require turbolinks 
 
//= require react 
 
//= require react_ujs 
 
//= require components 
 
//= require react-select 
 
//= require react-dom 
 
//= require classnames 
 
//= require_tree . 
 
$(function(){ $(document).foundation(); });

這裏就是我嘗試導入的包

var React = require('react'); 
 
var ReactDOM = require('react-dom'); 
 
var FileBase64 = require('react-file-base64'); 
 
var MembersNew = React.createClass(
 
{ 
 
\t render() 
 
\t { 
 
\t \t return(
 
\t \t \t <div> 
 
\t \t \t <h5>ACCOUNT DETAILS</h5> 
 
\t \t \t <hr/> 
 
\t \t \t <p>Fill in your member account details below</p> 
 
\t \t \t <b>Membership ID : </b> 
 
\t \t \t <div className="row"> 
 
\t \t \t <div className="medium-6 columns"> 
 
\t \t \t \t <label>Username* 
 
\t     <input ref="name" type="text"/> 
 
\t    </label> 
 
\t    <label>First Name* 
 
\t     <input ref="name" type="text"/> 
 
\t    </label> 
 
\t    <label>Last Name* 
 
\t     <input ref="name" type="text"/> 
 
\t    </label> 
 
\t    <label>Email Address* 
 
\t     <input ref="name" type="text"/> 
 
\t    </label> 
 
      </div>

我已經搞亂了我的gemfile，如下所示。也許這就是爲什麼這個問題會發生：

source 'https://rubygems.org' 
 

 
git_source(:github) do |repo_name| 
 
    repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") 
 
    "https://github.com/#{repo_name}.git" 
 
end 
 

 
gem 'rails-assets-react-select','~> 1.0.0.rc.3', source: 'https://rails-assets.org' 
 
gem 'rails-assets-react-dom', source: 'https://rails-assets.org' 
 
gem 'rails-assets-classnames', source: 'https://rails-assets.org' 
 
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
 
gem 'rails', '~> 5.0.2' 
 
# Use postgresql as the database for Active Record 
 
gem 'pg', '~> 0.18' 
 
# Use Puma as the app server 
 
gem 'puma', '~> 3.0' 
 
# Use SCSS for stylesheets 
 
gem 'sass-rails', '~> 5.0' 
 
# Use Uglifier as compressor for JavaScript assets 
 
gem 'uglifier', '>= 1.3.0' 
 
# Use CoffeeScript for .coffee assets and views 
 
gem 'coffee-rails', '~> 4.2' 
 
# See https://github.com/rails/execjs#readme for more supported runtimes 
 
# gem 'therubyracer', platforms: :ruby 
 

 
gem 'react-rails' 
 
# Use jquery as the JavaScript library 
 
gem 'jquery-rails' 
 
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 
 
gem 'turbolinks', '~> 5' 
 
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 
 
gem 'jbuilder', '~> 2.5' 
 
# Use Redis adapter to run Action Cable in production 
 
# gem 'redis', '~> 3.0' 
 
# Use ActiveModel has_secure_password 
 
# gem 'bcrypt', '~> 3.1.7' 
 
gem 'responders' 
 
gem 'foundation-rails' 
 
# Use Capistrano for deployment 
 
# gem 'capistrano-rails', group: :development 
 
gem 'browserify-rails'

有人可以幫我解決這個問題？

Answer 1

我認爲你可能遇到的問題是，你試圖安裝和使用的npm模塊是一個ES6 JS模塊。從你的錯誤日誌中，我猜你正在使用Browserify來加載你的JS模塊。開箱即用的IIRC Browserify僅支持Common JS模塊，這意味着您必須通過Babel或Babelify（babel的browserify變換）等工具來運行JS，才能將該ES6模塊轉換爲符合module.exports語法的ES5模塊。