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
Related
I am creating an angular library, which is internally using the vtk.js library. I tried adding vtk.js as a peer dependency. But on installing my custom package, it is showing a warning to install vtk.js as well.
Is there any way I can make sure that the vtk.js package will also get packed inside my angular package?
You can express dependencies of your library in a 2 ways (actually 3 but devDependencies is pretty self-explained so we omit them)
peerDependencies - you can use this type of dependency if you need to express the following things:
Your library is depends on some specific version of another library
Your library will have a conflicts in case node_module contains few versions of the dependency (because of so called transitive dependency this case is possible)
You wish a developer decide on what version of the dependency to use
As you mentioned peerDependencies is not installed automatically, instead it will warn a consumer of you lib about missing dependency or incompatible version of it
2.dependencies - use dependencies if you do not care about the cases described above. Having vtk.js here guarantee that it will be installed automatically for every consumer of your lib
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.
When I attempt to compile my app, I get the attached error despite the fact that I am not explicitly attempting to import crypto in any of the files I have written myself. It seems that it is imported in a file automatically present in the node_modules folder. Is anyone familiar with the given error?error
The package at "node_modules\reques\lib\helpers.js" attempted to import the Node standard library module "crypto". It failed because the native React runtime does not include the Node standard library. Read more at https://docs.expo.io/introduction/faq/#can-i-use-nodejs-packages-with-expo
You can't use the request package, it included native Node.js libraries that are not supported in React Native. Use another request library that is made for React native.
This is because a dependency in your react-native project is using the crypto library.
One of the dependencies installed is not made for react-native and is made to run on the server. Find out which dependency that is and you can change it to a react-native compatible library to fix the issue.
I've build an UI component using react/ES6 and I need to reuse it for several other projects.
So I thought it could be a nice little npm package.
Turns out the default for npm packages seems to be:
Put ES6 modules under /src
Have a separate /lib where the transpiled files live
On every release transpile those modules to ES5
From my point of view this is some (needless?) overhead. The projects that will use the package will be written using ES6 as well, so there is no need to transpile the dependency.
Is there any way to bundle ES6 modules in an npm package and skip the transpile process - and accept the fact that projects need to use ES6 in order to to add this dependency?
Edit to clarify
#D-reaper right, fair enough. My problem is the importing side. I've build a package that includes Project.jsx. When attempting to import it I get the following error message:
ERROR in ./node_modules/foo/Project.jsx
Module parse failed: /../node_modules/foo/Project.jsx Unexpected token (14:11)
You may need an appropriate loader to handle this file type.
So my guess is, that webpack/babel can't handle the import of ES6 modules correctly, since they expect npm packages to include ES5 - is that a correct assumption? Can I work around that?
I will use https://github.com/insin/nwb to put my react components into npm packages.
why don't you try Bit as to share your components. You can use bit's compilers or your owns if you have custom use case. You can read a little more https://codeburst.io/start-using-bit-to-build-react-apps-like-lego-7e14920f8de2
I'm a newbie to Meteor.js and working on a project where I'm also using Redux so I added the kyutaekang:redux package. The problem is that I don't know how to import Redux to use it. I tried:
import { createStore } from 'redux';,
but when I start the app I get
[Error: Unable to fetch "redux". Only file URLs of the form file:/// allowed running in Node.].
Meteor does not yet support the ES2015 import out of the box (might be available in 1.3.0). Therefore, you will need a modern module bundler, as also described in the package's Readme file:
This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.
You can take a look at this excellent example by Adam Brodzinski to get you started.
Edit:
After taking a closer look at the package, it does not seem to contain any code.
Nonetheless, my recommendation about Adam's repo (or his other repo, pointed in the comments) still remains as a nice, clean implementation.