Develop Reference

How do i tell Webpack to only/always use versions shown in package json?

I am trying to contribute to an npm package (react-draft-wysiwyg) but keep getting (what i think are) Webpack errors.
First i try to click the embed button of draft-js and it errors saying "block is not a BlockNode" - then i follow blogs/posts like this https://github.com/facebook/draft-js/issues/1763
i match peer dependencies and main project pkg json dependencies to draft-js v0.10.4, re-yarn and it says
Element ref was specified as a string (editorContainer) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
So in my project's webpack.config.js i have:
alias: {
react: path.resolve('node_modules/react'),
modules: [path.resolve(__dirname, "app"), "node_modules"],
},
I really think these issues are stemming from the webapp trying to pull in different versions of react from the local yarn link'd one.
How do i tell Webpack to only ever use top-level, over everything else?
Help?

Turn off ESLint rule (in React app, using WebStorm)

I am writing a React app in WebStorm using the standard React setup. I have never previously explicitly set up any linting, so whatever error/warning messages are showing up are from some sort of default configuration. When I run npm start I get the following warning:
Compiled with warnings.
Warning in ./path/to/MyComponent.js
/my/complete/path/to/MyComponent.js
19:49 warning Unexpected whitespace before property bind no-whitespace-before-property
...
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
The last two lines make it explicitly clear that the warnings are from ESLint (as opposed to, say, JSHint or some custom React linting, etc.).
I want to keep ESLint running, i.e. I don't just want to globally disable all linting. However, I want to turn the "no-whitespace-before-property" warning off everywhere, not just on one line or in one file. How do I do that?
My package.json shows the following for npm start (which is what I run when the warnings appear):
"scripts": {
"start": "react-scripts start",
...
}
I am developing in WebStorm. The ESLint preferences panel has the "Enable" checkbox unchecked, so all of the ESLint configuration options in the IDE are grayed-out and presumably irrelevant, so presumably also the configuration and invocation of ESLint are happening elsewhere (e.g. built into React?).
I tried putting the following .eslintrc.json file into my project home directory:
{
"rules": {
"no-whitespace-before-property": "off"
}
}
alone as well as with "extends": "eslint:recommended".
I tried adding the following to my project's package.json file:
{
...
"eslintConfig": {
"rules": {
"no-whitespace-before-property": "off"
}
}
}
I've also tried setting the value to 0 instead of to "off".
It may or may not be relevant that I'm writing a React app, and it may or may not be relevant that I'm developing in WebStorm, but I include those facts just in case.
I've checked around on StackOverflow and can't find an answer.

The note below the errors is not coming from ESLint (error is). So I'm assuming you are using some sort of wrapper, like github.com/facebookincubator/create-react-app Those wrappers do not use .eslintrc file and can't be configured directly. You will have to read through documentation of your wrapper to figure out how to disable this rule.
In general ESLint wrappers like create-react-app, standard, xo, etc. are specifically designed to "just work", and hence remove ability to configure and fine tune styles/rules.

Aurelia: How to use a View/Viewmodel from an npm package?

We are using Aurelia for our application's frontend. As we will have several different projects based on it, I would like to be able to add all of our custom code to some npm packages that could be added by the developers.
This would allow us to create a new empty project, add the dependencies to our reusable code without including it in the project's code base (so it can be updated separately if needed).
For instance, I would like a tools package and a service package. This is of course quite easy.
But I can't figure out how to use a 'ui' package that would contain all our custom reusable components. Is that even possible? How would I require a component in an html template?
If this can't be done, does anyone have an idea of how to cleanly separate the reusable code from the application specific code?
thanks a lot!

of course you can, that's what a lot of the plugins available for aurelia doing.
One way is to register your components as global resources (in your package or plugin) and import them in your client app, CLI example:
// from your plugin
aureliaConfig.globalResources([
'./jqm-loader',
'./jqm-page',
'./jqm-footer',
'./jqm-header'
]);
then import them in your app:
// aurelia.json
{
"name": "my-reusable-widgets",
"path": "../node_modules/my-reusable-widgets",
"main": "index",
"resources": [
"**/*.{css,html}" //to load them all or you can add individual files
]
}
then use your widgets:
<jqm-loader></jqm-loader>
...
if you don't want to use globalResources you can also use require:
<require from="my-reusable-widgets/jqm-header"></require>
<jqm-header></jqm-header>

Using the whitelist option with Babel's external-helpers

I'm trying to use Rollup with Babel's external-helpers. It works, but it's dropping a bunch of babel helpers which I don't even need, for example asyncGenerator.
The docs show a whitelist option but I can't get it to work
rollup.rollup({
entry: 'src/buttonDropdown.es6',
plugins: [
babel({
presets: ['react', ['es2015', { modules: false }], 'stage-2'],
plugins: [['external-helpers', { whitelist: ['asyncGenerator'] }]]
})
]
})
The above has no effect: all Babel helpers are still dropped into my resulting bundle.
What is the correct way of using this feature, and is there a full list of which helpers' names the whitelist array takes?
Or is there some other Rollup plugin I should be using with Rollup to automatically "tree shake" the babel external helpers.

Problem
The babel-plugin-external-helpers plugin is not responsible for injecting those dependencies in the final bundle.
The only thing it controls is that how the generated code will access those functions. For example:
classCallCheck(this, Foo);
// or
babelHelpers.classCallCheck(this, Foo);
It is needed so all rollup-plugin-babel needs to do is to inject babelHelpers in every module.
The documentation is misleading, the whitelist options is not on the external-helpers plugin. It's on the completely separate module and command line tool called babel-external-helpers, which is actually responsible for generating babelHelpers.
It's rollup-plugin-babel what is injecting babelHelpers. And does it using a trick to modularize the final code. It calls babel-external-helpers to generate the helpers, and ignores the whitelist parameter. See my issue requesting to expose an option.
This approach is correct, because rollup will tree-shake the unused helper functions. However some of the helpers (like asyncGenerator) are written in a way that is hard to detect if the initialization has any side effects, thus preventing removal during tree-shaking.
Workaround
I forked rollup-plugin-babel and created a PR which exposes the whitelist option of building babelHelpers in the plugin's options. It can be used this way:
require("rollup").rollup({
entry: "./src/main.js",
plugins: [
require("rollup-plugin-babel")({
"presets": [["es2015", { "modules": false }]],
"plugins": ["external-helpers"],
"externalHelpersWhitelist": ['classCallCheck', 'inherits', 'possibleConstructorReturn']
})
]
}).then(bundle => {
var result = bundle.generate({
format: 'iife'
});
require("fs").writeFileSync("./dist/bundle.js", result.code);
}).then(null, err => console.error(err));
Note that I didn't publish distribution version on npm, you will have to clone the git repo and build it using rollup -c.
Solution
In my opinion the right solution would be to somehow detect or tell rollup that those exports are pure, so can be removed by tree shaking. I will start a discussion about it on github after doing some research.

As I have found in this particular issue in the GitHub page.
The Babel member Hzoo suggests that
Right now the intention of the preset is to allow people to use it without customization - if you want to modify it then you'll have to
just define plugins yourself or make your own preset.
But still if you want to exclude a specific plugin from the default preset then here are some steps.
As suggested by Krucher you can create a fork to the undesirable plugin in the following way
First one is by forking technique
"babel": {
"presets": [
"es2015"
],
"disablePlugins": [
"babel-plugin-transform-es2015-modules-commonjs"
]
}
But if two or more people want to include the es2015-with-commonjs then it would be a problem.For that you have to define your own preset or extend the preset of that module.
The second method would involve the tree-shaking as shown in this article done by Dr. Axel Rauschmayer.
According to the article webpack2 is used with the Babel6.
This helps in removal of the unwanted imports that might have been used anywhere in the project in two ways
First, all ES6 module files are combined into a single bundle file. In that file, exports that were not imported anywhere are not exported, anymore.
Second, the bundle is minified, while eliminating dead code. Therefore, entities that are neither exported nor used inside their modules do not appear in the minified bundle. Without the first step, dead code elimination would never remove exports (registering an export keeps it alive).
Other details can be found in the article.
Simple implemetation is referred as here.
The third method involves creating your own preset for the particular module.
Creating aplugin and greating your own preset can be implemented according to the documentation here
Also as an extra tip you should also use babel-plugin-transforn-runtime
If any of your modules have an external dependancy,the bundle as a whole will have the same external dependancy whether or not you actually used it which may have some side-effects.
There are also a lot of issues with tree shaking of rollup.js as seen in this article
Also as shown in the presets documentation
Enabled by default
These plugins have no effect anymore, as a newer babylon version enabled them by default
- async-functions (since babylon 6.9.1)
- exponentiation-operator (since babylon 6.9.1)
- trailing-function-commas (since babylon 6.9.1)**
Also the concept of whitelisting and blacklisting the plugins has benn brilliantly explained by loganfsmyth here in this thread.
you can pass a whitelist option to specify specific transformations to run, or a blacklist to specific transformations to disable.
You cannot blacklist specific plugins, but you may list only the plugins you want, excluding the ones you do not wish to run.
Update :
According to this article here is an important update -
"The --external-helpers option is now a plugin. To avoid repeated inclusion of Babel’s helper functions, you’ll now need to install and apply the babel-plugin-transform-runtime package, and then require the babel-runtime package within your code (yes, even if you’re using the polyfill)."
Hope this may solve your problem
Hope it may help you.

Using Flow for browser apps

I want to use Flow (the static type checker for JavaScript by Facebook) for browser apps. How do you get Flow to follow the other .js files which are being used by a given .js file? In Node.js, the use of the require function makes Flow follow other modules and check for type errors, and I want a similar functionality for browser apps too.
Say I have a Classroom.js file which uses a module Student.js. When I run Flow, it will throw the error identifier Student Unknown global name.

Facebook uses browserify to do this in their Flux Chat example. Browserify inlines the require statements in node-style JavaScript to produce code that can be run in the browser.
Here are the relevant bits of their package.json:
{
"scripts": {
"build": "NODE_ENV=production browserify . | uglifyjs -cm > js/bundle.min.js",
},
"browserify": {
"transform": [
["reactify", { "stripTypes": true }],
"envify"
]
}
}

I have run into this problem myself, just now.
As you have a single, simple dependency (Classroom --> Student, this link contains a workaround that might help in your case. http://flowtype.org/docs/third-party.html
It says, create a new directory, put an "interface file" inside (this is basically a stub. pick any name for the file), and include everything with
flow check --lib /abs/path/to/my/interfacefiledir/ Classroom.js
For more complex scenarios, like secondary dependencies, third-party-libraries (like including jQuery with its full API), I don't have a strategy.
I think the facebook-flow team has put "add more interface files" on their to-do list. http://flowtype.org/docs/coming-soon.html#_