Here is my webpack config: https://hastebin.com/esipapepiz.js
I am trying to use https://github.com/linkedin/css-blocks
I am using create-react-app and I have ejected. I am trying to run the dev server and I get the message from my title. The docs seem pretty hard to follow so I am not sure what I am doing wrong?
yarn run v1.3.2
$ node scripts/start.js
Failed to compile.
Cannot read property 'context' of undefined
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Still little confused with your question because you didn't mention what the webpack version you used. I assumed that you used webpack version v4.0.0. context is working fine with earlier version of webpack.
webpack v4.0.0 changed this.context => this.rootContext
Do like this.it's a sample code snap
+ var name = slash(path.relative(root || this.rootContext || this.options.context, this.resourcePath));
I'm using skipper to receive the files, sharp to resize (and save) and fs unlink to remove the old image. But I got a very weird error this time that concerns me a lot:
error: ** Grunt :: An error occurred. **
error:
Aborted due to warnings.
Running "copy:dev" (copy) task
Warning: Unable to read "assets/images/users/c8e303ca-1036-4f52-88c7-fda7e01b6bba.jpg" file (Error code: ENOENT).
error: Looks like a Grunt error occurred--
error: Please fix it, then restart Sails to continue running tasks (e.g. watching for changes in assets)
error: Or if you're stuck, check out the troubleshooting tips below.
error: Troubleshooting tips:
error:
error: *-> Are "grunt" and related grunt task modules installed locally? Run npm install if you're not sure.
error:
error: *-> You might have a malformed LESS, SASS, CoffeeScript file, etc.
error:
error: *-> Or maybe you don't have permissions to access the .tmp directory?
error: e.g., (edited for privacy)/sails/.tmp ?
error:
error: If you think this might be the case, try running:
error: sudo chown -R 1000 (edited for privacy)/sails/.tmp
Grunt stopped running and to have that in production is a big NoNo... I believe that this is caused because of concurrency with fs.unlinkSync(fname). The error is also intermittent and very hard to reproduce in some machines (IO ops/sec maybe?).
I have the following controller action:
var id = 1; // for example
req.file('avatar').upload({
dirname: require('path').resolve(sails.config.appPath, 'assets/images')
}, function(err, files){
var avatar = files.pop();
//file name operations here. output is defined as the path + id + filetype
//...
sharp(avatar.fd)
.resize(800, 800)
.toFile(output, (err, info)=>{
if(err){
res.badRequest();
} else {
fs.unlinkSync(avatar.fd);
res.ok();
}
});
});
Now I've been thinking about a few solutions:
Output the new image directly to .temp
Unlink when files exists on .tmp. Explanation: Grunt already copied the old file so removing it would be safe!
But I don't know if this is some spaghetti code or even if a better solution exists.
EDIT: My solution was, as proposed by arbuthnott, wrap a controller like this:
get : function(req, res){
var filepath = req.path.slice(1,req.path.length);
//remove '/' root identifier. path.resolve() could be used
if(fs.existsSync(path.resolve(filepath))){
return res.sendfile(filepath);
} else {
return res.notFound();
}
}
I think you are on the right track about the error. You are making some rapid changes to in the assets folder. If I read your code right:
Add an image with user-generated filename to assets/images (ex cat.jpg)
Copy/resize the file to an id filename in assets/images (ex abc123.jpg)
Delete the original upload (cat.jpg)
(I don't know the details of sharp, there may be more under the hood there)
If sails is running in dev mode, then Grunt will be trying to watch the whole assets/ folder, and copy all the changes to .tmp/public/. It's easy to imagine Grunt may register a change, but when it gets around to copying the added file (assets/images/cat.jpg) it is already gone.
I have two suggestions for the solution:
One:
Like you suggested, upload your original to the .tmp folder (maybe even a custom subfolder of .tmp). Still place your sized copy into /assets/images/, and it will be copied to /.tmp/public/ where it can be accessed as an asset by the running app. But Grunt will ignore the quick add-then-delete in the .tmp folder.
Two:
Do a bit of general thinking about both what you want to include in version control, and what Grunt tasks you want to be running in production. Note that if you use sails lift --prod then Grunt watch is turned off by default, and this error would not even occur. Generally, I don't feel like we want Grunt to do too much in production, it is more of a development shortcut. Specifically, Grunt watch can use a lot of resources on a production server.
The note about version control is just that you probably want some of the contents of assets/images/ to be in version control (images used by the site, etc), but maybe not in the case of user-uploaded avatars. Make sure you have a way to differentiate these contents (subdirectories or whatever). Then they can be easily .git-ignore'd or whatever is appropriate.
Hope this helps, good luck!
This answer explains how to read the package.json "version" from a npm started application. Is there an env variable in Meteor (1.3+) with this info?
Well, there is not npm_package_version environment value in process object.
But you get the value of version using following code :
var pjson = require('/package.json');
console.log(pjson.version); // This will print the version
I am using the grunt-webpack. Trying to start the webpack-dev-server gives this error
Module parse failed: /u/saxenat/react-blueprint/src/js/app.jsx Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
Before you close this question, let me just say: webpack is bundling the files properly. The grunt-webpack plugin provides 2 tasks: grunt-webpack and grunt-webpack-dev-server. When I try HMR with the server, it is failing. Otherwise it works fine.
I have included babel-loader with presets es-2015 and react.
Any ideas?
I have a Meteor project where I use coffeescript.
I'm not sure what has happened, but suddenly my solution is getting this error.
ReferenceError: share is not defined
at app/models/Models.js:3:3
when I try to boot up my solution.
It generates this error wherever I use the Meteor coffeescript share variable.
I'm using WebStorm and I have a FileWatcher to transpile coffeescript into javascript. When I turn this on (which I need to be able to debug in WebStorm), it generates .js and .map files for my .coffee files.
So somehow these generated JS files do not have a reference to the share variable that coffeescript uses in Meteor to have global variables.
I've tried to delete the .idea directory and the .meteor directory, I've tried adding and removing the meteor coffeescript package. I even tried to create a new solution - I still have the same problem.
I can't seem to fix it so that there is no error when the file watcher is turned on.
What is the source of this error and what can I do to fix it?
Meteor does a special job when compiling coffeescript to js: it prepends the generated code with
__coffeescriptShare = typeof __coffeescriptShare === 'object' ?
__coffeescriptShare : {};
var share = __coffeescriptShare;
to ensure that global __coffeescriptShare exists and is assigned to a file-scope variable share.
But the standard CoffeeScript compiler used in a file watcher knows nothing about these meteor tricks. As a result, we get
(function() {
share.TestFunction = function(p) {
return p;
};
}).call(this);
instead of
function(){__coffeescriptShare = typeof __coffeescriptShare === 'object' ? __coffeescriptShare : {}; var share = __coffeescriptShare;
share.TestFunction = function(p) {
return p;
};
})();
So the standard compiler is not suitable for transpiling coffeescript meteor applications. Meteor coffeescript package has to be used instead. It supports source maps, so there are no reasons for using file watchers. To me, debugging works when using maps produced by Meteor coffeescript package, but not always. Note that WebStyorm doesn't yet support meteor+coffeescript. Related tickets are: WEB-14479, WEB-14794