ReactJS.net - How do I use ES6 modules - reactjs.net

I have ReactJS.Net successfully running, including using ES6 syntax.
I am using the default Jsx transformation pipeline, which is using Babel.
Looking at source in the browser I can see that ES6 code has been converted to ES5 by ReactJS.Net
I have been unable to get modules working.
The browser gives me 2 errors:
Uncaught ReferenceError: exports is not defined
Uncaught ReferenceError: require is not defined
How do I use ES6 Modules?
Simplest example:
Lib.js
export function square(x) {
return x * x;
}
UserOfLib.js
import { square } from 'Lib';
console.log(square(11));
Gets transformed to this (looking at browser source):
Lib:
// #hash v3-AD133907ABEC5D32B3768A3AF2301FC9
// Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden.
// Version: 2.0.1 (build 5e9476a)
// Generated at: 08-Nov-15 6:40:26 AM
///////////////////////////////////////////////////////////////////////////////
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.square = square;
function square(x) {
return x * x;
}
UserOfLib:
// #hash v3-812C209AFED25C2B4507E5769B0D899B
// Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden.
// Version: 2.0.1 (build 5e9476a)
// Generated at: 08-Nov-15 6:40:26 AM
///////////////////////////////////////////////////////////////////////////////
var _Lib = require('Lib');
console.log((0, _Lib.square)(11)); // 121

Currently, ReactJS.Net does not handle modules. If you want to use modules, you'll need to use a module bundler such as Webpack or Browserify to compile the modules down to vanilla JavaScript. Implementing support for modules in ReactJS.NET itself is a non-trivial amount of work, since it'd need to deal with dependencies and loading modules in the correct order, and good well-tested solutions like Webpack already exist.

Related

How can I define default imports for Stylus in nuxt.js

I import various helpers (mixins, vars, functions) into my component automatically to ensure they're always available to me and my team.
Currently I use the vue-cli webpack template and to import these helpers I set the stylus import option within the webpack.base.js config as shown below;
stylus: { import: ['~stylus/common.styl'] }
I've not been able to figure out how to do this with nuxt.js, I raised an issue about this and was told to use the build extend method.
This didn't work as I then received errors from webpack itself;
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
So with the changes brought in with v2.2.0 of webpack, how can I apply my stylus options?
Webpack 2 changed the syntax slightly. Instead of having a stylus key in the top level Webpack config, you have an options key under your stylus-loader configuration. So you should use something like:
...
{
loader: 'stylus-loader',
options: {
import: ['~stylus/common.styl']
}
}
...
Here's a solution for an identical issue with a different loader.

Electron build strategy for web

I am building an Electron application.
During the development I find it very productive to use the browser for implementation, debugging and testing.
However, when using any electron specific modules (remote.require, ipc etc), webpack fails to build the js.
What are the best practices for handling such cases?
I have 2 webpack configs, one for web and one for electron where I specify the target=electron, which works fine
It seems that the web version (that does not have this target), complaints for the electron modules
Below is a sample module where I conditionally try to require electron, but webpack tries to include it anyhow for the web
const isElectron = (function(){
return navigator.userAgent.indexOf("Electron") == -1;
})();
export default {
require: (module) => {
if(isElectron){
const electron = require("electron");
return electron.remote.require(module);
}
return require(module);
}
}
I even added
However, when webpack runs I get
ERROR in ./~/electron/index.js
Module not found: Error: Cannot resolve module 'fs'
which disappears if I remove the electron require
Anyone else with such a case?
Regards
AFAIK you don't have access to fs from the renderer, only from main. The way I got around this was to define fsin my main process and use the shared object to make it accessible:
// main
global.sharedObject = {
cwd: __dirname,
appDir: app.getPath('userData')
};
and
// renderer
console.log(electron.remote.getGlobal('sharedObject').cwd);
Depending on your case, you might e.g.:
make use of something like electron-json-storage
define all your paths in main and access them via shared object
use IPC to call fs-related operations.

Display Ember library versions in browser console on app load

For some reason, I am having trouble remembering (or finding) how to turn on an option to display versions of ember, jquery, ember-data, etc. in the console automatically. Used to be very handy.
I am on Ember-CLI 0.2.7.
Ended up doing this in app.js:
import config from './config/environment';
if (config.environment !== 'development') {
Ember.LOG_VERSION = false;
}
// app/app.js
Ember.LOG_VERSION = true;
LOG_VERSION determines whether Ember logs info about version of used libraries. True by default
http://emberjs.com/api/#property_LOG_VERSION

ember-cli including different script tags in development vs production

when using ember-cli I would like to be able to include an external js library which requires an API key and I would like to use a different API key in development vs production.
Essentially I would like to add the following script tag to app/index.html
<script type="text/javascript" src="http://something.com?key=API_KEY"></script>
but I would like API_KEY to be different when I'm running in development as opposed to production.
Thanks for the help!
Have a look at the ember-inject-script addon which makes it easy to include 3rd party scripts in your ember-cli app. To use it, npm-install the addon then use an initializer to load the script. Then set different values for API_KEY in your config/environment.js
npm install --save-dev ember-inject-script
ember generate initializer something-dot-com
Then edit the initializer as follows
import injectScript from 'ember-inject-script';
import config from '../config/environment';
export default {
name: 'something-dot-com',
initialize: function() {
var url = "//something.com?key=" + config.SOMETHING_API_KEY;
injectScript(url);
};
}
And in config/environment.js
ENV.SOMETHING_API_KEY = 'YOUR_DEV_API_KEY';
if (ENV.environment === "production") {
ENV.SOMETHING_API_KEY = 'YOUR_PROD_API_KEY';
}

ember-cli adding dependencies with bower

So - I want to have a play with typeahead in an ember app.
I get a cli app up and running then I run
bower install typeahead.js
I can see that the code has been put into bower_components.
I then add the following to the brocfile:
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
app.import('bower_components/typeahead.js/dist/typeahead.bundle.min.js');
module.exports = app.toTree();
However it doesn't work - I get
Uncaught ReferenceError: Bloodhound is not defined
From reading the docs - installing with bower and adding the lines in the brocfile should be enough to satisfy it? Am I reading it wrong or is this a bug?
I have created a public GIT repo which shows this issue:
https://github.com/wayne-o/ember-cli-bootstrap
All I have done is:
ember new bootstrap-test
bower install bootstrap
And then added:
app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');
to the brockfile...
It hasn't worked...
You didn't share your Brocfile.js, but I've had similar issues when I've added dependencies after the module.exports = app.toTree(); line at the end of that file. The documentation is not terribly clear about this, but module.exports = app.toTree(); should always come last in Brocfile.js. Try moving your app.import() statement above this line and things should work correctly.
Update
Pulling down your repo I noticed a few issues. First is that you need to pass --save-dev to your bower installs for bootstrap and typeahead.js in order for those to be installed when others pull down your repo. That will add a section like this to your bower.json:
"devDependencies": {
"bootstrap": "~3.2.0",
"typeahead.js": "~0.10.5"
}
I also added "Bloodhound": true to the prefdef section of .jshintrc to avoid jshint errors on build:
"predef": {
"document": true,
"window": true,
"-Promise": true,
"Bloodhound": true
},
You can also replace your $ references in index.js with Ember.$ to avoid another jshint error.
Once I did this I was able to run ember serve and have the app load without any Bloodhound issues.

Resources