Importing node_modules

[Skill-Zozo]

Hi,

Can we add a section in the readme on how to import modules? It was not obvious to me and was rescued by @gauravtiwari's comments on here rails/webpacker#446 and #413. I think it could benefit future first timers to know how to import node modules. I certainly believe it is worth mentioning in the readme that the default babel configuration does not allow one to import npm modules

[BookOfGreg]

Hi @Skill-Zozo ,
Could you post an example of what you would like to see? I feel the rails/webpacker already serves as a pretty good introduction to these types of issue, but I'd be happy if there was a better way of directing people to that location.

[Skill-Zozo]

I was trying to add this slider (https://github.com/react-component/slider) to my project. After installing it, through yarn add rc-slider, I then struggled to import it. I couldn't find any docs on rails/webpack to help me out. But anyway, I had to change the default babel configuration (.babelrc) to

{
  "presets": [
    ["env"],
    "react",
    "es2017"
  ],
  "plugins": [
    "syntax-jsx",
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

And then after importing the css file (associated with the slider I am importing), I had to include
<%= stylesheet_pack_tag 'pack_name' %> in my views file

[eveningkid]

That's odd @Skill-Zozo.

Usually, you simply need to import it as any other module: import package from 'package';

Did you correctly import the application pack into your layout?
<%= javascript_pack_tag 'application' %>

Is your parent component located inside the folder mentioned in app/packs/application.js's require.context call?

[Skill-Zozo]

Yes and yes.

To test if I didn't do something wrong, I cloned @BookOfGreg's react-rails example (https://github.com/BookOfGreg/react-rails-example-app).
I imported the package into https://github.com/BookOfGreg/react-rails-example-app/blob/master/app/javascript/components/Post.js
To no avail

[eveningkid]

I believe you should try to follow only the indications from reactjs/react-rails getting started section.

The issue could come from @BookOfGreg's webpacker configuration.

Then after you set up everything, simply yarn add any module and import it directly into your js files.

[AirWick219]

I am running into the same issue. I followed the getting started section but wasn't able to import modules from node_modules

[Skill-Zozo]

The issue is webpacker's default babel config. This default config does not allow for node_modules to be imported and the culprit being this particular configuration

{
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
}

[BookOfGreg]

Going to close this to cleanup open discussions.