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

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?

[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

[BookOfGreg]

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