Browserify Rails Error - ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Question

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 ?

Answer 1

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.