Posts

Showing posts with the label webpack

global is not defined while using socket.io-client with webpack

global is not defined while using socket.io-client with webpack I am getting following error when i have added socket.io-client plugin in my React web app. socket.io-client Uncaught ReferenceError: global is not defined at Object../node_modules/socket.io-parser/is-buffer.js (is-buffer.js:4) at webpack_require (bootstrap:22) at Object../node_modules/socket.io-parser/binary.js (binary.js:8) at webpack_require (bootstrap:22) at Object../node_modules/socket.io-parser/index.js (index.js:8) at webpack_require (bootstrap:22) at Object../node_modules/socket.io-client/lib/index.js (index.js:7) at webpack_require (bootstrap:22) at Object../src/client/components/gettingStarted/socketest.js (socketest.js:1) at webpack_require (bootstrap:22) The following is my webpack config file. /*eslint-disable*/ var Path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var FileChanger = require('webp...

Cannot find module 'chart.js'

Image
Cannot find module 'chart.js' I have a webapp thats running webpack, typescript and gulp. I want to use chart.js library and I have installed the chart.js npm package. I tried to define chart.js on one of the JS files and I am getting this: error TS2307: Cannot find module 'chart.js' error TS2307: Cannot find module 'chart.js' My JS file looks like this: import Chart = require( "chart.js" ); tsconfig: { "compilerOptions": { "module": "commonjs" }, "files": [ "typings/tsd.d.ts" ] } IMPORTANT: Noticed that chart.js definitions file doesnt have a proper module declaration. The left is accounting JS library which clearly defines the module and it works. Im guessing this is the issue. How do I use the declared variable or import it into another JS file? require usually requires a module name , not a filename - the module name might be chart but it depends on how ...

Electron + React + Typescript + Visual Studio Code? Debug? Can I debug an electron-react app in visual studio?

Electron + React + Typescript + Visual Studio Code? Debug? Can I debug an electron-react app in visual studio? Using some boiler plate code, I am able to get my electron app to work in visual studio code. I can hit the breakpoint for main.js, but not for any of my typescript/React code. I am using webpack to build, but am not married to it. How do I wire up the debugger for the React stuff? I started with these walk-throughs: medium.com and typescriptlang.org Here are my configuration files launch.js { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "preLaunchTask": "webpack", "runtimeExe...

the rules behind treeshaking with an npm module and webpack

the rules behind treeshaking with an npm module and webpack If I have an npm package that exports all its components from 1 index.js file: export * from './components/A'; export * from './components/B'; Then if I have another package that consumes this package: import {A} from 'my-package'; Will the contents of components/B be bundled even though it is never used in the consuming package? components/B Is there a way around this? 1 Answer 1 Doing this: export * from './components/A'; export * from './components/B'; Is the same as doing: export class A () ... export class B () ... If you just import {A}... you are telling webpack that what you only cares about is A. import {A}... By using named imports, webpack is capable of only bundling the content of A and not bundling B in the final output. TL;TR: Always use named exports/imports if you want to have an opt...

remove duplicate sass imports (webpack)

remove duplicate sass imports (webpack) I have a big project with a lot of sass files (and all of them import a main sass file with some varibales and classes). I belive you all know the problem that the file that i am import in all of my css files is duplicate in the main css file after buiding the project. i tried using ExtractTextPlugin options and plugin that called OptimizeCssAssetsPlugin, and i didnt find solution for this problem. Here is the plugins array in my webpack prod config: new ExtractTextPlugin({ filename: "styles.css", }), new OptimizeCssAssetsPlugin({ assetNameRegExp: /.optimize.css$/g, cssProcessor: require('cssnano'), cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, canPrint: true }), anyone know the solution for this problem? thank you! your answer is here stackoverflow.com/questions/33313662/… – Er.Ellison...