Browserify Rails 错误 - ParseError: 'import' 和 'export' 可能只出现在 'sourceType: module' 中

Question

最近我想在我的 Rails 应用程序中集成 NPM 包。我遇到了这个问题：

如果有人和我有同样的问题，我会在这个论坛中搜索。是的，我看到这里发布了类似的问题，但他们有不同的错误。

以下是我的 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(
{
	render()
	{
		return(
			<div>
			<h5>ACCOUNT DETAILS</h5>
			<hr/>
			<p>Fill in your member account details below</p>
			<b>Membership ID : </b>
			<div className="row">
			<div className="medium-6 columns">
				 <label>Username*
	                <input ref="name" type="text"/>
	             </label>
	             <label>First Name*
	                <input ref="name" type="text"/>
	             </label>
	             <label>Last Name*
	                <input ref="name" type="text"/>
	             </label>
	             <label>Email Address*
	                <input ref="name" type="text"/>
	             </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 模块。