Categories
Mastering Development

Published npm package does not apply styles

I’m currently working on creating an npm package. Which is basically a React component with added styles using SCSS. When I test it out, the class names are there, but no styles are being applied. Here is the repo for the package. I use a separated webpack config for building the specific folder where the […]

Categories
Development

Webpack dev server reloads but doesn’t show Markup or CSS changes?

So i’m pretty new to Webpack, and I finally got the webpack-dev-server running. It recompiles and refreshes page on save, and it shows changes to my JS code. But it doesn’t seem to work well with my SASS or HTML files? On a fresh start, it will show a change if I make it, but […]

Categories
Development

How should I include javascript in a template in Phoenix 1.5

I’m trying to include a javascript file that uses chart.js in my phoenix 1.5 project that uses webpack. When I add something like <script>require(‘/js/graph’).Graph.draw()</script> in a template, I see the error Uncaught ReferenceError: require is not defined in browser console and the graph is not rendered. package.json { “repository”: {}, “license”: “MIT”, “scripts”: { “deploy”: […]

Categories
Development HTML Plugins

HtmlWebpackPlugin is not adding charset meta tag

HTML Webpack Plugin is not adding <meta charset=”UTF-8″> However, it says it always does: https://webpack.js.org/plugins/html-webpack-plugin/ This is my Webpack configuration: resolve: { alias: { ‘@’: path.resolve(__dirname, ‘src/’) } }, resolveLoader: { modules: [ ‘node_modules’, path.resolve(__dirname, ‘scripts/webpack/loaders’) ] }, entry: ‘./src/index.js’, output: { filename: ‘dist.js’, path: path.resolve(‘www’) }, module: { rules: [ { test: /\.js$/, use: […]

Categories
Development

How to assign the correct output image path to multiple pages?

I have started working on a website using Webpack 4. I thought i’d work fine but i have an issue : everything in my index.html file displays correctly, but fonts and images are not loaded in my subpages. I assume my subpage images don’t point to the correct path. But i can’t figure out how […]

Categories
Chrome Development Plugins

Why can’t webpack tree-shake lodash when using “import * as _”?

I am learning about tree-shaking with a webpack 4/React application that uses Lodash. At first, my Lodash usage looked like this: import * as _ from “lodash”; _.random(… I soon learned, via the BundleAnalyzerPlugin, that the entirety of Lodash was being included in both dev and prod builds (527MB). After googling around I realized that […]

Categories
CSS Development Plugins

How to combine all .SCSS files imported to different JS components and output them to a single .CSS bundle?

I’m working on a project that utilizes plain JS (no frameworks) and SCSS and bundling it all with Webpack. The structure is roughly like this: │ index.html │ index.js │ webpack.config.js │ ├───build │ app.bundle.js │ bundle.css │ error.bundle.js │ index.html │ └───src ├───components │ │ App.js │ │ │ └───ErrorMessage │ error.scss │ ErrorMessage.js […]

Categories
CSS Development Plugins

MiniCssExtractPlugin error on entry point build

We use webpack to bundle our resources before deployment. However, now we want to also bundle our sass files through webpack is it simplifies our build process. Now, we do have an issue where the MiniCssExtractPlugin claims that webpack_require is not defined. We have no clue as to why this is happening but they underlying […]

Categories
Development

Cannot find module ‘@babel/preset-es2015’ from ‘C:\repos\ondemandProject\ondemnd-web’

I am using babel and Webpack first time to build a react app. Since morning I am trying, uninstalled and reinstalled packages many many times but babel gives one or other error when try to start server I may have read all related questions on this platform but couldn’t find solution that works. This is […]

Categories
Development jQuery

Error: Cannot find module ‘jquery’ on require.resolve(‘jquery’) webpack

The problem is Error: Cannot find module ‘jquery’ When i build it with script: rm -rf dist && webpack –config webpack.config.js Already tried with another clue like external etc but still got issue on jquery Here is my package.json, { “name”: “webpack”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “build”: “rm -rf dist && […]