I first tested using the commonjs module that I installed like this:
npm install the-module;
I then created main.js which looked something like this:
var module = require('the-module');
module.doStuff();
Then compiled main.js with webpack into bundle.js, loaded it in the browser, and it did stuff.
Now I want to use the-module inside an angular 4 service. How should I import it?
I also found this article on how to create an angular 2 component library. Curious whether this set of steps is required for all commonjs modules that will be imported by Angular or whether there is a more direct approach?
Related Concepts
Ended up writing this article:
using-vanilla-npm-javascript-modules-with-typescript
Related
I'm working on an emberjs application that uses several other custom ember addons, one of which we're adding is a new dependency on mathjs (https://mathjs.org/) to do some expression parsing. It isn't clear though what is the correct way to keep the configuration of that dependency on mathjs with only the addon that uses it. Is there a "right" way to do this in ember?
What we ended up doing was just installing the mathjs package into our main app's node_modules, then exposing the library in the browser by doing an app.import('node_modules/mathjs/dist/math.min.js') in our ember-cli-build.js file. This is obviously non-ideal because it means that any app using the custom addon must also do this extra setup to expose this dependency of the addon.
FWIW, we initially tried to just install the mathjs dependency into the addon's node_modules, then we imported it in the component of the addon where it's used. But then the browser said that the mathjs module couldn't be imported from the addon.
You should let ember-auto-import manage this for you. For this:
add math.js to your dependencies of your addon (not devDependencies).
use import syntax to import it in your addon.
For the import syntax you need to be aware that some modules only have a default export which is a object exporting properties while others have individual exports. So its either
import { pi, atan2 } from 'mathjs' or import mathjs from 'mathjs'.
your host app should then have your addon in devDependencies.
Only use app.import syntax if you use something that does not support modules at all.
I'm trying to create a library with webpack. My main goal is mostly to publish the ES6 module files so that my client applications and import and tree shake the library. (It is meant to be a library of icons, so that users can just bundle the ones they use in their app).
I have the library building the umd module to dist and I've set the module field in the package.json to the src directory file that is exporting all of my icons.
Each icon is a React component. I've imported React and PropTypes to create each one and set them to be externals in the webpack config, however I don't think that matters in this use case because...
I made a test application that npm linked my library and imported one of my icon components from my module. It's definitely going to the source files but my webpack here in my application cannot resolve react and prop-types in those modules. It complains for each in every component.
e.g:
Module not found: Error: Can't resolve 'react' in '/code/svg-icons/src/components'
# ../svg-icons/src/components/AlertIcon.js
# ../svg-icons/src/index.js
# ./src/index.js
I suppose this makes sense, as the AlertIcon module from my library doesn't have a node_module directory to find react.
How do I have other applications provide react, prop-types, and whatever else I want to import in my library's source modules?
For your svg-icons package, you only need to run it through Babel, to transpile it to ES5, that's it.
Your application that depends on svg-icons is the one that will be built with webpack, and it will take care of bundling the imported icons into your app bundle.
There is a great FREE course on the subject by Kent C. Dodds on egghead.io. It will clear everything on the subject for you.
I am using Reactjs.NET within an MVC 5 project,
We have been able to combine Webpack with reactjs.net, but currently we are running into issues using external modules, for example (material-ui) within our react components directory. Since reactJs.NET doesn't support import we are trying to include those in the JSX components using the require statement, however we are getting a Script threw an exception: 'require' is undefined
any idea how we can include some of the modules that we have in our webpack bundle inside our jsx component?
this issue sounds like exactly what you're experiencing.
assuming you've gone through this page then maybe the problem is related to having npm installed webpack 2 which uses a different config. check out webpack's migration guide for info on that.
I'm pretty new to some of this stuff and I feel like I must just be missing something simple. I have a very basic Ember.js app that I created with the CLI tool flowing the guide. The code is at https://github.com/nfriedly/particle-webhook-manager
It has a couple of routes and components, and a single third-party dependency, particle-api-js. I installed it twice, via bower and npm, and I'm importing it in one of my components like so:
import particle from 'particle-api-js';
I start up my server with ember serve and it builds successfully. I then open my browser to http://localhost:4200/login where I load the component and it gives me the following error in my console:
Error: Could not find module `particle-api-js` imported from `particle-webhook-manager/components/login-form`
So, my main question is: what am I doing wrong here/how do I make it work?
My secondary question is: why did it "build" successfully and then throw a runtime error for the missing module - shouldn't it have found that in the build stage?
You should not use bower anymore. Use ember browserify to import things installed with npm.
You can import bower modules in your ember-cli-build.js with app.import('bower_components/...js').
You can not import them directly, but you can create a vendor shim to provide this for you. Checkout the ember-cli documentation for this.
I want to use the Perf stuff. It seems that if I do:
var React = require('react/addons');
in my own modules then libraries (react-bootstrap, react-router etc.) end up using another copy of plain react and things break. I am using browserify.
Is there a fix or another way to do this?
Requiring react and react/addons will give you the same object. react/addons requires the same module that react does (lib/React), and react/addons even mutates that object so that anyone requiring react will get the addons as well.
If you end up with multiple versions of React in your bundle, it's because the libraries you use have react as a dependency instead of a peer dependency. You should use npm dedupe to avoid that. But react-router has react as a peer dependency, so react-router will get the same react module instance as your module (with the addons). Don't know about the other packages you use that depend on React though.
It turns out the problem was with my gulpfile. Tx for the comments about looking for a browserify shim that lead me to the solution:
My browserify task (from React JS workflow, part 2) builds separate vendors.js (libs) and main.js (my app) bundles during development using browserify.external(..) to exclude the libs from main.js. I just had to add "react/addons" as an external lib along with "react".
The issue is explained here:
https://github.com/substack/node-browserify/issues/1161