I need some guidance. I am experiencing an issue where webpack throws an error that it can not find a module . I was trying to add a require statement of a package(included as dependency). I got it working in another project where I don't need webpack. The code looks basically as follows:
context.subscriptions.push(
vscode.commands.registerCommand("vstodo.helloWorld", () => {
vscode.window.showInformationMessage(
"test"
);
const sfdx = require('sfdx-node');
sfdx.auth.web.login({
setdefaultdevhubusername: true,
setalias: 'HubOrg'
})
.then(() => {
// Display confirmation of source push
console.log('Source pushed to scratch org');
});
}));
My webpack config can be found here
I uploaded a simplified version of the repository here Repository
containing all the configuration files for rollup and webpack.
If I leave out the part starting at the require statement everything works again.
Any help on how to tackle this would be much appreciated, thanks
The vscode extension page has a short troubleshooting guide about this: https://code.visualstudio.com/api/working-with-extensions/bundling-extension#webpack-critical-dependencies.
They suggest the following solutions:
Try to make the dependency static so that it can be bundled.
Exclude that dependency via the externals configuration. Also make sure that those JavaScript files aren't excluded from the packaged extension, using a negated glob pattern in .vscodeignore, for example !node_modules/mySpecialModule.
Related
I need a solution to load/unload styles in my Aurelia app. This is because I have a special main.css for my 'public' root app and another admin.css for my 'private' (admin) root app. (Yes, 2 roots in my app). These css are not compatible one with each other.
I found a plugin named aurelia-useable-style-loader. I try to integrate it in my Aurelia application as explained in the readme. At runtime, I can see [aurelia-useable-style-loader] begin configure and
[aurelia-useable-style-loader] end configure in my console but css files are not loaded/unloaded. So something go wrong and I don't know what.
One thing I pointed is that my Aurelia app is based on the Aurelia CLI / Typescript / SystemJS as bundler. While the plugin is based on Webpack. Maybe the 2 are not compatible ?
Steps I did:
npm install aurelia-useable-style-loader
then use the plugin in main.ts:
aurelia.use.plugin('aurelia-useable-style-loader');
then added one reference in my aurelia.json:
"aurelia-useable-style-loader",
Tha's all. At runtime, no particular errors, but css are not loaded/unloaded.
Any help is greatly appreciated.
PS: as a workaround, I proceed differently (see below) but I'm curious to do it with the plugin aurelia-useable-style-loader
this.masterStyleSheetLoaded = true;
this.httpClient.fetch('./src/css/main.css')
.then((data) => data.text())
.then((styles) => {
DOM.injectStyles(styles, null, null, 'masterStylesheet');
this.masterStyleSheetLoaded = true;
});
I've got an existing code base in which Vue.js has performance problems. I also see this notice in the browser console:
so I guess an easy fix could be to put Vue into production mode.
In the suggested link I try to follow the instructions for webpack. We're on Webpack version 2.7 (current stable version is 4.20). In the instructions it says that in Webpack 3 and earlier, you’ll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
So in my package.json I've got a build script defined:
To build for production I run yarn run build and it runs a build.js file (paste here) which in turn calls webpack.base.conf.js (paste here) and webpack.prod.conf.js (paste here).
As you can see in the paste I use the DefinePlugin as suggested by the docs.
I also found a file called vue-loader.conf.js (paste here) and to be sure I also added the DefinePlugin in there as well.
I can run yarn run build which ends without errors, but when serve the site over Apache and open the browser it still shows the notification that we're in development mode.
To be sure it actually uses the files created by webpack I completely removed the folder /public/webpack/ and checked that the webinterface didn't load correctly without the missing files and then built again to see if it loaded correctly after the command finished. So it does actually use the files built by this webpack process. But Vue is actually not created in production mode.
What am I doing wrong here?
The problem may be in your 'webpack.base.conf.js' as i suspected, thank you for sharing it, upon searching i've found an issue resolving your 'production not being detected' problem on github here
The solution requires that you change 'vue$': 'vue/dist/vue' to 'vue$': vue/dist/vue.min in production.
You will find the original answer as:
#ozee31 This alias 'vue$': 'vue/dist/vue' cause the problem, use vue/dist/vue.min in production environment.
This is driving me insane, so I'm hoping someone might see something that I'm missing. Thank you for your help in advance.
I have a gulp file and I have installed via npm, babel-core, babel-preset-es2015, babel-preset-react. From researching online and in high hopes even though this might not be right, I have renamed the gulp file to be gulpfile.babel.js and I have created a .babelrc file with
{
"presets": ["es2015"]
}
I am using browsersync and when I launch the gulp task the html file loads, but the index.js I have includes 'import React....'. This files causing the error in the JS console that says 'Uncaught SyntaxError: Unexpected token import'.
I thought the es2015 npm packages I have should be taking care of that ES6 syntax?
In the gulp file the task that I thought was suppose to take care of that is;
// convert jsx to JS
gulp.task('babelFiles', function() {
return gulp.src('js/*.(jsx|js)')
.pipe(babel({
compact: false
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
The gulp task that is responsible for launching this is:
// Default task
gulp.task('default', ['babelFiles', 'browserSync']);
I am puzzled as to what could be wrong here?
Any ideas would be much much appreciated!
There are two problems:
Gulp seems like doesn't support you syntax for file extension mask:
gulp.src('js/*.(jsx|js)') // not working
gulp.src('js/*.{js,jsx}') // working
You piping from js directory to js directory but since there are no matches because of the problem (1) it makes you believe the babel is not working
Update
Gulp uses glob syntaxt to match files - according to glob syntax the qualifier for amount of items should be included before ( | ) - in our case following syntax would be valid
gulp.src('js/*.#(js|jsx)')
where # means match exactly one occurrence of pattern after #.
In your case there was no qualifier presented
I've take a look at a few gulp server instances (currently using gulp-webserver) but I can't seem to find where to set the root folder for the server per the params I see here See code below:
gulp.task('webserver', function() {
gulp.src(debugFolder)
.pipe(webserver({
directoryListing: true
}));
});
I'm not sure what the gulp.src param does as it's not the root. The root is the folder that holds the gulp script. Am I missing something on this module or is there another module that will do this? Trying to keep things clean and simple.
Please don't use gulp-webserver for it, since it's not a Gulp plugin and has been blacklisted by the community. I'd suggest you to use BrowserSync, which does exactly what you need and is a lot more standalone. Check out this documentation or my little writeup here. It would work like this:
var browserSync = require('browser-sync');
gulp.task('webserver', function() {
browserSync({
server: {
baseDir: "./app/"
}
});
});
And it's able to do a lot more!
What is the best way to use sass with express.js framework. I am starting from teh point where I have already done
npm install sass
I believe previously with express 2.x one could do something like -
app.use(express.compiler({ src: pub, enable: ['sass'] }))
But with express 3.x it gives me error :
app.init();
return app;
} has no method 'compiler'
What is the alternative statement to include in express 3.x?
Similarly if one could let me know the same on how to plugin coffeescript that would be great help.
I have seen examples of using Cakefile to precompile, but is that the only solution? That would mean adding an extra step of running a Cake task. What advantage would that have as against something defined within express app.js / app.coffee.
I have looked at connect-assets (which does coffeescript but not sass) and somewhere one also mentioned about connect-assetmanager pre hook, but haven't been able to make that work.
https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x says:
template engine compliance from engine.compile(str, options) => Function to engine.__express(filename, options, callback)