Browserify Rails 错误 - ParseError: 'import' 和 'export' 可能只与 'sourceType: module' 一起出现 [英] Browserify Rails Error - ParseError: 'import' and 'export' may appear only with 'sourceType: module'

问题描述

最近我想在我的 rails 应用程序中集成 NPM 包.我遇到了这个问题:

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

以下是我在 application.js 中的内容:

//= 需要 jquery//= 需要 jquery_ujs//= 需要涡轮链接//= 需要反应//= 需要 react_ujs//= 需要组件//= 需要反应选择//= 需要 react-dom//= 需要类名//= require_tree .$(function(){ $(document).foundation(); });

这是我尝试导入包的地方

var React = require('react');var ReactDOM = require('react-dom');var FileBase64 = require('react-file-base64');var MembersNew = React.createClass({使成为(){返回(<div><h5>账户详情</h5><小时/><p>在下面填写您的会员帐户详细信息</p><b>会员 ID:</b><div className="row"><div className="中 6 列"><标签>用户名*<input ref="name" type="text"/><标签>名字*<input ref="name" type="text"/><标签>姓氏*<input ref="name" type="text"/><标签>电子邮件地址*<input ref="name" type="text"/>

我把我的 gemfile 弄乱了，如下所示.也许这就是出现问题的原因:

source 'https://rubygems.org'git_source(:github) 做 |repo_name|repo_name = "#{repo_name}/#{repo_name}" 除非 repo_name.include?("/")"https://github.com/#{repo_name}.git"结尾gem 'rails-assets-react-select','~>1.0.0.rc.3'，来源:'https://rails-assets.org'gem 'rails-assets-react-dom'，来源:'https://rails-assets.org'gem 'rails-assets-classnames'，来源:'https://rails-assets.org'# Bundle edge Rails 代替: gem 'rails', github: 'rails/rails'gem 'rails', '~>5.0.2'# 使用 postgresql 作为 Active Record 的数据库宝石 'pg', '~>0.18'# 使用 Puma 作为应用服务器宝石'美洲狮'，'~>3.0'# 对样式表使用 SCSSgem 'sass-rails', '~>5.0'# 使用 Uglifier 作为 JavaScript 资源的压缩器gem 'uglifier', '>= 1.3.0'# 将 CoffeeScript 用于 .coffee 资产和视图gem '咖啡轨'，'~>4.2'# 有关更多支持的运行时，请参阅 https://github.com/rails/execjs#readme# gem 'therubyracer', 平台: :ruby宝石反应轨道"# 使用 jquery 作为 JavaScript 库宝石'jquery-rails'# Turbolinks 可以更快地浏览您的 Web 应用程序.阅读更多:https://github.com/turbolinks/turbolinksgem 'turbolinks', '~>5'# 轻松构建 JSON API.阅读更多:https://github.com/rails/jbuildergem 'jbuilder', '~>2.5'# 使用 Redis 适配器在生产中运行 Action Cable# gem 'redis', '~>3.0'# 使用 ActiveModel has_secure_password# gem 'bcrypt', '~>3.1.7'宝石响应者"宝石基础导轨"# 使用 Capistrano 进行部署# gem 'capistrano-rails', group::developmentgem 'browserify-rails'

有人可以帮我解决这个错误吗?

解决方案

我认为您可能遇到的问题是您尝试安装和使用的 npm 模块是 ES6 JS 模块.从您的错误日志中，我猜您正在使用 Browserify 加载您的 JS 模块.开箱即用的 IIRC Browserify 仅支持 Common JS 模块，这意味着您必须通过 Babel 或 Babelify(babel 的浏览器转换)之类的工具运行您的 JS 以将该 ES6 模块转换为具有 module.exports 的 ES5 模块 语法.

Recently i want to integrated NPM package in my rails application. I getting this problem :

I search in this forum if someone have same problem like me. Yes, i saw similar question being posted here but they're having different error.

Below is what i have in my 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(); });

Here's where i try to imported the package

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>

I have mess up my gemfile for like below. Maybe this is why the problem occur :

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'

someone can help me to solve this error ?

解决方案

I think the issue you might be having is that the npm module that you are trying to install and use is an ES6 JS module. From your error log, I guess you are using Browserify to load your JS modules. IIRC Browserify out of the box only supports Common JS modules, which means you’ll have to run your JS through a tool like Babel or Babelify (babel’s browserify transform) to transform that ES6 module into an ES5 module with module.exports syntax.

这篇关于Browserify Rails 错误 - ParseError: 'import' 和 'export' 可能只与 'sourceType: module' 一起出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！