Posts

Showing posts with the label webpack

webpack - how to load a chunked polyfill file as necessary

Image
Clash Royale CLAN TAG #URR8PPP webpack - how to load a chunked polyfill file as necessary So the recommended way to prevent loading polyfills if it's unnecessary is to put some logic in the <head> (original: https://webpack.js.org/guides/shimming/) <head> <script> var modernBrowser = ( 'fetch' in window && 'assign' in Object ); if ( !modernBrowser ) { var scriptElement = document.createElement('script'); scriptElement.async = false; scriptElement.src = './polyfills.bundle.js'; document.head.appendChild(scriptElement); } </script> However, as my files are chunked, it will not be consistent e.g. polyfills.b0d50a4c4d9ca24a9f43.js . polyfills.b0d50a4c4d9ca24a9f43.js So what's the best way to implement this logic (in webpack or just in the index.html ) index.html Note I work with Vue, so maybe I could just import it in the App component? App E.g. var m...

EsLint or Create React App - Cordova is not defined

Image
Clash Royale CLAN TAG #URR8PPP EsLint or Create React App - Cordova is not defined I'm writing a React App that also runs in Cordova and uses Create React App. It won't compile when I add cordova.exec to one of the cordova functions cordova.exec I've tried adding it to the EsLint config esLintrc.js "env": { "browser": true, "mocha": true, "es6": true, "cordova": true, }, "globals": { "document": true, "cordova": true, "window": true }, Any idea where else I can add it? 1 Answer 1 Duh.. window['cordova'].exec works window['cordova'].exec By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued us...

babel 'command not recognized' after installation

Image
Clash Royale CLAN TAG #URR8PPP babel 'command not recognized' after installation I decided to install babel-preset-env after realising that babel-preset-es2015 had been depricated. Source However that resulted in the following error: babel-preset-env babel-preset-es2015 Error code: enter image description here At this point I realized that babel too was not recognized as an internal or external command . So I tried babel by typing: npm install babel-cli --save-dev , which sadly did not change anything, the error persisted. babel recognized as an internal or external command npm install babel-cli --save-dev Error code: enter image description here Other similiar questions/answers are old e.g. this one for that reason I hoped someone could give me an updated answer. The overall issue: Why are the commands not recognized even after installation? 1 Answer 1 More than likely because you have ...

Passing --env.prod Value to Webpack 4 with Visual Studio 2017 SPA

Image
Clash Royale CLAN TAG #URR8PPP Passing --env.prod Value to Webpack 4 with Visual Studio 2017 SPA I am trying to upgrade my SPA to Angular 6 (which is based on the Visual Studio 2017 SPA). I in my package.json i have the following; package.json { "name": "mjyproject", "private": true, "version": "0.0.0", "scripts": { "test": "karma start ClientApp/test/karma.conf.js" }, "devDependencies": { "@angular/animations": "^4.4.7", "@angular/common": "^4.4.7", "@angular/compiler": "^4.4.7", "@angular/compiler-cli": "^4.2.6", "@angular/core": "^4.4.7", "@angular/forms": "^4.4.7", "@angular/http": "^4.4.7", "@angular/platform-browser": "^4.4.7", "@angular/platform-browser-dynamic": "^4...

Laravel 5.6 - webpack: Uncaught ReferenceError: jQuery is not defined

Image
Clash Royale CLAN TAG #URR8PPP Laravel 5.6 - webpack: Uncaught ReferenceError: jQuery is not defined I got package.json: "devDependencies": { "axios": "^0.18.0", "bootstrap": "^4.1.3", "bootstrap-datepicker": "^1.7.1", "browser-sync": "^2.24.6", "browser-sync-webpack-plugin": "^2.0.1", "chart.js": "^2.7.2", "cross-env": "^5.2.0", "datatables": "^1.10.18", "easy-pie-chart": "^2.1.7", "font-awesome": "4.7.0", "fullcalendar": "^3.9.0", "jquery": "^3.3.1", "jquery-sparkline": "^2.4.0", "jvectormap": "^2.0.4", "laravel-mix": "^2.1.11", "load-google-maps-api": "^1.2.0", "lodash": "^4....

How to remove entries in webpack plugin?

Image
Clash Royale CLAN TAG #URR8PPP How to remove entries in webpack plugin? I know how to add entry dynamically in webpack plugin, like below: class AddEntryPlugin { apply(compiler) { compiler.plugin('entry-option', () => { compiler.apply(new SingleEntryPlugin(context, request, name)) }) compiler.plugin('watch-run', ({ compiler }, done) => compiler.apply(new SingleEntryPlugin(context, request, name)) done() ) } } However I need to remove added entries when invoking watch-run hook, so how to remove the entries? By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

How do you load an alternate jquery in a webpack module?

Image
Clash Royale CLAN TAG #URR8PPP How do you load an alternate jquery in a webpack module? I need to load alternate versions of jQuery other than the one in my node_modules. I have a local copy of the script but I am unable to get it to load in my webpack app.ts. I have removed the global jQuery and resolve path for node_modules in my webpack config since I do not want the version from node_modules. However I can't figure out how I can pass the loaded jquery to the scripts that require it. I have multiple entry points (app.ts) each which needs to be able to load a different jquery so I can not define jquery in the webpack config as I would like to use the same config for processing all my entry points. app.ts import jquery from '../../../js/jquery-3.3.1.js'; // tried this but didn't help // window.$ = jquery; // window.jquery = jquery; // these two require jquery but fail, it only works if I add back in // the webpack config to find jquery in node_modules which is what I /...

how to separate files for mocha-webpack

Image
Clash Royale CLAN TAG #URR8PPP how to separate files for mocha-webpack What's happening is that when I run my tests, my coverage only shows bundle.js which isn't that helpful. bundle.js I have the following webpack file setup and wanted to know what I should change to make it so that each file is covered individually webpack.config-test.js var nodeExternals = require("webpack-node-externals") const path = require("path") module.exports = { context: path.resolve(__dirname), resolve: { extensions: [".js"], alias: { "@": path.join(__dirname, "../../src/server"), } }, output: { path: "./", filename: "[name].js", }, target: "node", // webpack should compile node compatible code externals: [nodeExternals()], // in order to ignore all modules in node_modules folder } running the command via npm: nyc mocha-webpack --webpack-...

ReactJS Production Deployment

Image
Clash Royale CLAN TAG #URR8PPP ReactJS Production Deployment I currently have production web app (PHP+AngularJS) & Java/Spring backend. Basically it is a web app making lots and lots of REST Api calls to Java backend and rendering that data on web forms. I use Apache Web 2.0 to host the frontend and Tomcat for the backend Planning to migrate to ReactJS, Java/Spring will still be the backend. I need some guidance on following Thanks in advance By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

SyntaxError: Unexpected token import in node_modules

SyntaxError: Unexpected token import in node_modules I'm trying to setup server side rendering for my existing React project. Upon compiling the react-redux node module throws following error: SyntaxError: Unexpected token import at createScript (vm.js:56:10) at Object.runInThisContext (vm.js:97:10) at Module._compile (module.js:549:28) at Object.Module._extensions..js (module.js:586:10) at Module.load (module.js:494:32) at tryModuleLoad (module.js:453:12) at Function.Module._load (module.js:445:3) at Module.require (module.js:504:17) at require (internal/module.js:20:19) at Object.module.exports.Object.defineProperty.value (server.js:737:18) My webpack config looks like this: const nodeExternals = require('webpack-node-externals'); const path = require('path'); module.exports = { target: 'node', externals: [nodeExternals()], entry: path.resolve(__dirname, '..', 'src/server/index.js'), output: { path: path.resolve(__dirname, '..',...