I'm implementing a Hot Module Replacement with Webpack in my project, which uses Node(v4.4.4)/Hapi(v8.0.0) as a server. The way I thought I could get it working was by using a plugin in my server file, which is shown below:
`var compiler = new require('webpack')(webpackConfig.default);
var assets = { noInfo: false, publicPath: webpackConfig.default.output.publicPath };
var hot = { reload: true, noInfo: true };`
server.register({
register: require('hapi-webpack-plugin'),
options: {
compiler, assets, hot
}
},function(error) {
if (error) {
return console.error(error);
}
server.start(function() {
if (process.env.CONFIG_WINSTON === 'on') {
logger.info('Hapi', server.version, server.info.uri);
} else {
console.log('Hapi', server.version, server.info.uri);
}
});
});`
In my webpack.config.js, I'm using my entry like this:
entry: [
'webpack-hot-middleware/client?http://localhost:8080&reload=true',
'./webpack_common/src/scripts/main.js',
],
I have also added this plugin in my webpack.config.js:
new webpack.HotModuleReplacementPlugin(),
And finally I have already installed the packages:
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^2.4.4",
"webpack-hot-middleware": "^2.17.1",
"hapi-webpack-plugin": "^2.0.0",
With all this setup, I could get my HMR working fine with Sass, which means, it is rebuilding and updating my browser. However, when I change any javascript, I see log messages saying everything went well (the bundle was rebuilt),
`
[HMR] bundle rebuilding client.js?4b20:207
[HMR] bundle rebuilt in 11952ms process-update.js:27
[HMR] Checking for updates on the server... process-update.js:100
[HMR] Updated modules:
A list of updated modules comes here...
[HMR] App is up to date.`
but I don't see any updates in my browser. If I manually refresh my browser, than the updates display fine. I tested with Chrome, Firefox and Safari, but none of them seems to work. I have searched through many other questions in foruns, but with no luck. Anyone has any clue on what I may need to do?
I don't get moment.js or other external libraries like tinymce working in my amber application.
These are the steps I did so far:
run bower install moment --save
added a moment.and.json in my applications root directory containing the correct path in bower_components:
{"paths": {"moment": "moment"}}
added "moment" to deploy.js
run grunt devel
My first problem is that from inside the js console momentjs seems to be not loaded, even if the file shows up in network traffic.
After that how do I use moment.js from inside Amber?
How do I need to wrap it?
I read how-to-add-a-non-amber-library-with-bower-for-example-processing and all the other explanations but still have problems grabbing the exact process.
All the documentation I read was inconclusive to me. Isn't there a simple explanation on how to do it?
The amd file has to look like this:
{
"paths": {
"moment": "moment"
},
"shim": {
"moment": {
"exports": "moment"
}
},
"config": {
"moment": {
"noGlobal": false
}
}
}
As it seems it has to be required like this to work properly: window.moment = require('moment');
Hello I am using yo ko a knockout yeoman generator in my application. The application has been scaffold with requirejs and gulp, but I am having trouble adding ForerunnerDB to the require.config for distribution,
here is the require.config.js:
//require.js looks for the following global when initializing
var require = {
baseUrl: ".",
paths: {
"bootstrap": "bower_modules/components-bootstrap/js/bootstrap.min",
"crossroads": "bower_modules/crossroads/dist/crossroads.min",
"hasher": "bower_modules/hasher/dist/js/hasher.min",
"jquery": "bower_modules/jquery/dist/jquery",
"knockout": "bower_modules/knockout/dist/knockout",
"knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections",
"signals": "bower_modules/js-signals/dist/signals.min",
"text": "bower_modules/requirejs-text/text",
'forerunner': 'bower_modules/forerunnerdb/js/dist/fdb-all.min'
},
shim: {
"bootstrap": { deps: ["jquery"] }
}
};
I am using the gulpfile.js with gulp:serve:dist but I am getting
[Error: Error: ENOENT: no such file or directory, open 'c:...\temp\core.js'
In module tree: app/startup forerunner at Error (native)
But everything is working when I use gulp serve:src.
I already tried to add core.js dependencies in the shim, but can not make it work. There is always a file missing .
here is the github repo
For some reason requirejs gets upset in this configuration so the way to solve it is to add ForerunnerDB to your index.html as a separate script, remove all the dependency references to ForerunnerDB in your require.config.js and then modify your gulp default task to concatenate the scripts.js file that gets generated with the fdb-all.min.js file in ForerunnerDB's js/dists folder.
I have updated the github repo with the changes you have to make as described above. You can see them here: https://github.com/jeanPokou/project_beta/commits/master
When you tried with the shim are you sure you wrote it the right way ?
var require = {
baseUrl: ".",
paths: {
"corejs": "bower_modules/...",
'forerunner': 'bower_modules/forerunnerdb/js/dist/fdb-all.min'
},
shim: {
"corejs": { deps: ["forerunner"] }
}
};
The problem:
I cant get React.js to function at all in a requirejs and brunch situation.
I get a mismatched definition error with the react.js library, and react does not show up in the windows object.I am unsure as to what to do, and was hoping some one here had guidance in how resolve this issue. Perhaps I am using this combination of technology incorrectly, maybe it is not possible? Any insight into what I may be doing wrong or suggestions to resolve this problem would be greatly appreciated!
Btw, If I remove the bower reference to react.js, and remove all react.js information from the application, it all works correctly.
See my below edit for some additional comments and findings!
Actual error:
Error: Mismatched anonymous define() module: function (){var
define,module,exports;return (function e(t,n,r){function
s(o,u){if(!n[o]){if(!t[o]){var a=typeof
require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return
i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw
f.code="MODULE_NOT_FOUND",f}var
l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var
n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return
n[o].exports}var i=typeof require=="function"&&require;for(var
o=0;odereq,module,exports){*
The Project file structure is as follows:
Projectname
|-app
|-assets
|-index.html
|-components
|-appinit.js
|-styles
|-bower_components
|-react
|-requirejs
|-node_modules
|-public
|-bower.json
|-brunch.config
The brunch.config file, I believe is pretty standard, here are the contents:
exports.config = {
"modules": {
"definition" : "amd",
"wrapper" : "amd"
},
"files": {
"stylesheets": {
"defaultExtension": "css",
"joinTo": {
"css/app.css": /^app\/styles/,
"css/vendor.css": /^(bower_components|vendor)/
}
},
"javascripts": {
"joinTo": {
"js/app.js": /^app/,
"js/vendor.js": /^(bower_components|vendor)[\\/]/,
"test/js/test.js": /^test(\/|\\)(?!vendor)/,
"test/js/test-vendor.js": /^test(\/|\\)(?=vendor)/
},
"order": {
"before": [
'bower_components/requirejs/require.js'
]
}
}
}
};
Here are the contents for the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Application Test</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/css/app.css">
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
<script>
require.config({
"paths": {
"react": "bower_components/react/react-with-addons"
},
"shim": {
"react": {
exports: "React"
}
},
waitSeconds: 10
});
require(["components/appinit"], function (appInit) {
appInit.init();
});
</script>
</head>
<body style="height:100%; width:100%;">
<div id="main-content" style="margin-left: 100px; margin-top: 22px;">
My Main Content Goes Here.
</div>
</body>
</html>
and the contents of the appinit.js file:
define(function() {
var mainModule;
return mainModule = {
init: function () {
console.log("This is a test.");
return mainModule;
}
};
});
The bower.json file contains the following:
{
"name": “brunchreactrequirejstest",
"version": "1.0.0",
"homepage": "",
"authors": [
“person x"
],
"description": “description",
"main": "public/js/app.js",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"requirejs": "~2.1.15",
"react": "~0.12.2"
}
}
EDIT
So I believe I am getting closer to getting this resolved. I just found out that brunch only adds the definition wrappers around non-vendor javascript. So, react.js is being compiled to the vendor.js file without any definition name, so require.js throws the exception of react.js being anonymous. So, perhaps I need to have brunch run r.js on the vendor file during the compilation process? Does this sound correct? How do I go about doing that in brunch?
The React project does not provide an AMD interface out of the box, and as you noted in your edit this is not something Brunch will do for you on vendor files.
Your options appear to be either converting your project to use CommonJS module patterns or use an AMD adapter such as https://github.com/philix/jsx-requirejs-plugin.
Possible Solution:
So I have react now functioning in a requirejs(AMD) environment. There is one problem that I see with my approach, and that is that I believe some libraries that work with react expect react to be exposed as a global object.I believe I can probably shim this into the requirejs export.config() by creating a requirejs definition that manually places react into the browser window scope(more on this later.)
Following are the changes I have made that have allowed react to work in an AMD/RequireJS environment:
The (new) brunch.config file:
exports.config = {
"modules": {
"definition" : "amd",
"wrapper" : "amd"
},
"files": {
"stylesheets": {
"defaultExtension": "css",
"joinTo": {
"css/app.css": /^app\/styles/,
"css/vendor.css": /^(bower_components|vendor)/
}
},
"javascripts": {
"joinTo": {
"js/app.js": /^app/,
"js/vendor.js": /^(bower_components|vendor)[\\/](?!react\/)/,
"test/js/test.js": /^test(\/|\\)(?!vendor)/,
"test/js/test-vendor.js": /^test(\/|\\)(?=vendor)/
},
"order": {
"before": [
'bower_components/requirejs/require.js'
]
}
}
},
"plugins":{
"react": {
"harmony": "yes"
}
}
};
The (new) index.html 'head' now only consists of this:
<link rel="stylesheet" href="/css/app.css">
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
<script>
require(["components/appinit"], function (appInit) {
appInit.init();
});
</script>
The build.js file: So this file i created is executed by node.js when I call 'npm start' on the project, which you will see in the package.json file further below:
({
baseUrl: ".",
optimize: "none",
paths: {
react: "bower_components/react/react-with-addons"
},
name: "react",
out: "vendor/react-built.js"
})
basically, it assigns the bower path to the react path, and the name grabs the bower path so that it knows the location of the file that r.js will optimize. The require.js optimized file is then thrown into the vendor folder as react-built.js. If you recall from above, in my new brunch config file, I exclude the bower-react javascript library from being compiled into the final vendor.js file, because i will already be adding the requirejs optimized react library that is generated with this build.js file.
So the scripts section of the NPM package.json file looks like this:
"scripts": {
"start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server"
}
Essentially, when you call 'npm start', r.js is executed with the build.js file passed into it, afterwards brunch is called.
So the next part, as es128 has mentioned, is to get any JSX annotated files to get preprocessed into javascript before brunch wraps them for AMD inclusion.
== Edit
So installing the react-brunch plugin via npm works wonderfully. .jsx files get compiled to javascript upon saving the .jsx file. I updated the above brunch-config file with the plugin information. I have yet to shim and export React globally into the window scope, but I believe that may be a different StackOverflow topic since it does not relate to my original question.
Hi have a sails project with bootstrap included in bower.json:
...
"dependencies": {
...
"bootstrap": "~3.2.0"
...
}
All the css, fonts and js are copied correctly but the map file is not copied to the assets/vendor/bootstrap directory nor the .tmp dir.
I can't figure out what process copies the filed from bower_components/bootstrap/dist/css where the bootstrap.css.map file does exists.
There must be something from tasks/config/bower.js but I am a bit puzzled on how bower know which files to copy. Especially since the default layout: 'byType' does not match the assets/vendor at all so there must be something else I am missing.
Thanks
I fixed the issue by adding the following to bower.json:
...
"exportsOverride": {
"bootstrap": {
"css": ["dist/css/bootstrap.css",
"dist/css/bootstrap.css.map"],
"js": "dist/js/bootstrap.js",
"fonts": "dist/fonts"
}
}
...
This is also a fix to copy fonts. See http://blog.mdarveau.com/2014/10/10/using-fontawesome-and-glyphicons-in-a-sails-app