Configure datepicker-moment with Brunch

If you have a look at the package.json you’ll find.

  "main": "Gruntfile.js",

https://docs.npmjs.com/files/package.json#main

The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require(“foo”), then your main module’s exports object will be returned.

This should be a module ID relative to the root of your package folder.

For most modules, it makes the most sense to have a main script and often not much else.

Gruntfile.js is a taskrunner configuration file. As far as I can tell that package is not suitable for bundling by Brunch or any other bundler (FYI: Phoenix is moving to Webpack 4).

This problem happens frequently with older JavaScript libraries that are barely being maintained (another example).

Oh I see… pity. Thanks for the help though Do you happen to know a good brunch compatible timepicker by any chance?

Nope. But somebody else may know of one that can be properly required (or imported; which is the fundamental issue).

For some background you may be interested in Modern JavaScript Explained For Dinosaurs (no insult intended, I didn’t pick the title).

Ahah thank you and don’t worry I am not that easy to insult I actually think it is a funny title especially as I have a form of rejection to learning js

Sorry to bother you again but 2 quick questions:

1. Why can’t I use glyphicons in my app? they keep giving me error this is so frustrating…
2. how do you add css files from npm packages? for instance i have fullcalendar and i added “fullcalendar”: [‘dist/fullcalendar.min.css’] to the npm in brunc-config and that works but “eonasdan-bootstrap-datetimepicker”: [‘build/bootstrap-datetimepicker.min.css’], does not even though in the node modules the css file is in the build folder…
   Thanks

EDIT

I managed to import the right css file just still no glypicons for some reason

I didnt test but i think these work for datepicker-moment

app.css
@import "~datepicker-moment/moment-datepicker/datepicker";

app.js
import "datepicker-moment"

Thank you! I’ll give that a go

for font-awesome and glyphicons you need copy cat
npm install --save-dev copycat-brunch

This is for bootstrap sass you can configure if you dont use bootstrap-sass

plugins: {
    copycat: { 
    "fonts": [ "node_modules/bootstrap-sass/assets/fonts/bootstrap"]
              }
}

ok that is odd but thanks ahah

I ran into that - in my case Phoenix distribution didn’t include glyphicons-halflings-regular - i.e. bootstrap is incomplete.

There needs to be a static/fonts folder with:

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2

The app.css file has the bootstrap CSS baked in which references these fonts.

2. “eonasdan-bootstrap-datetimepicker”: [‘build/bootstrap-datetimepicker.min.css’], doesn’t look like a path under node_modules (hence the name of the configuration: npm)

You’d have to look at modifying

stylesheets: {
  joinTo: "css/app.css"
},

instead.

The joinTo supports a variety of pattern matching styles.