React-rails: asset pipeline - cannot import component: "require is not defined" when using 'import' or 'require'

[ghost]

Steps to reproduce

1. make a rails project
2. include react-rails in it via the asset-pipeline way
3. import Component from './Component'
4. notice ReferenceError: require is not defined

Expected behavior

Tell us what should happen

it should just import the component

Actual behavior

Tell us what happens instead

i get ReferenceError: require is not defined

System configuration

Sprockets or Webpacker version: sprockets (3.7.1) / sprockets-rails (3.2.1, 3.2.0)
React-Rails version: react-rails (2.4.3)
Rect_UJS version: don't know how to find this out
Rails version: Rails 5.0.5
Ruby version: ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin16]

---

1. How can I use react-rails asset pipeline and import components from folders? Currently I just have assets/javascripts/components/<Component.jsx> referenced like <%= react_component("Component") %>, but I'd like to nest them into folders.

2. How do I import JS libraries with import instead of putting the browser versions of libraries into assets/javascripts and referencing them in application.js?

[RiccardoMargiotta]

You can nest components in your folder structure as you like:

/components/
  /home/
    banner.js
    footer.js

<%= react_component "home/banner", {} %>

If you use Webpack, you can import libraries like import request from 'superagent'; and have everything bundled together into application.js.

[BookOfGreg]

Thanks @RiccardoMargiotta , Yep that's the answer to this one. Let me know if it needs to be re-opened.

[sshaw]

If you use Webpack, you can import libraries like import request from 'superagent'

Does this mean one cannot import using Sprockets?

[BookOfGreg]

It's possible to import libraries in Sprockets by making it scan the node_modules folder, it's just MUCH easier with Webpacker.

[JESii]

Actually, the original question that was asked in https://github.com/reactjs/react-rails/issues/882 was never answered: "i get ReferenceError: require is not defined" when the import should just work.

I'm having the same problem using the Asset Pipeline strategy.

Any suggestions on what to look for? Thanks

[BookOfGreg]

If you're using the default asset pipeline then you need to be importing code the sprockets way.
https://guides.rubyonrails.org/asset_pipeline.html#search-paths

For example, these files:

app/assets/javascripts/home.js
lib/assets/javascripts/moovinator.js
vendor/assets/javascripts/slider.js
vendor/assets/somepackage/phonebox.js

would be referenced in a manifest like this:

//= require home
//= require moovinator
//= require slider
//= require phonebox

You can only use Require and Import when using Webpack/Webpacker