Tips for including multiple plugins in a next.config.js

I am eager to introduce sass and BEM methodology into our company's project, but I am encountering some challenges with integrating the sass plugin into our existing codebase. Currently, we are utilizing typescript and CSS plugins.

const path = require('path')
const withTypescript = require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass');
const configuration = require('./config/configuration.json')

module.exports = withTypescript(
  withCSS({
      webpack(config) {
        if (process.env.ANALYZE) {
          config.plugins.push(new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerPort: 8888,
            openAnalyzer: true,
          }))
        }
        return config
      },
      cssModules: true,
      serverRuntimeConfig: { 
        // Will only be available on the server side
      },
      publicRuntimeConfig: { 
        // Will be available on both server and client
      }
    })
  )

I am determined to seamlessly integrate the sass plugin into our project workflow while continuing to make progress as I implement this new technology.

Answer №1

Learn how to enhance your webpack setup with additional plugins.

Inside your webpack(config) { /* ... */ } function, easily add more plugins by simply pushing them into the config.plugins array.

Here's an example where we include the WebpackBar plugin that provides insights into your build process.

webpack(config) {
    if (process.env.ANALYZE) {
        config.plugins.push(new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerPort: 8888,
            openAnalyzer: true,
        }))
    }

    config.plugins.push(new WebpackBar({
        fancy: true,
        profile: true,
        basic: false,
    }));

    // Keep adding more plugins using config.plugins.push()

    return config
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript: Organize an array of objects into separate sections based on a specific field

Presented below is a set of data: const dataSet = [ { id: '1', name: 'River', address: 'Terminal A', type: 'OTHER', code: null, targetArrivalStep: 30, disabled: true, }, { id: &a ...

Tips for adjusting the size of a modal window in Ionic 3

Need help customizing the appearance of a modal alert in my app. Here's my current function: customizeModal() { const myModelOpts: ModalOptions = { showBackdrop: false, enableBackdropDismiss: false } const myData = { pa ...

The map function is selectively applied to certain expressions, not all

Currently, I am attempting to display the genre Name and its corresponding gradient by utilizing the map function over an array called genres. While the map function successfully renders the genre Name, it seems to return the same component for the genre g ...

Creating a customized function in javascript/jquery with the ability to override it

Currently, I am utilizing Visual Studio for writing JavaScript/jQuery. For instance, when I input: $('#selector').text('foo') and then highlight text and hit F12, Visual Studio directs me to the file jquery-2.2.3.intellisense.js, auto ...

Encountering 404 error when refreshing page on NextJS static site deployed on S3

I recently set up a static NextJS website on Amazon S3. Everything seems to be working smoothly, except for one issue. When the homepage loads and then users navigate to other pages using the navigation menu, there are no problems. However, if a user tries ...

I am encountering a JSON parsing error while trying to implement jQuery autocomplete, despite using a local array

I'm attempting to implement the jQuery autocomplete feature on a WordPress website. My ultimate goal is to link the input field to an ajax request that will retrieve data from a database. However, I've encountered an unusual error when trying to ...

Switch on and activate a button using AngularJS

I have a set of four buttons that I want to toggle and activate upon clicking them. Currently, the buttons toggle when double-clicked. My desired solution is for the button current btn to be highlighted and display data when clicked, and for the previous ...

The function attached to the `click` event of `#cart-continue` is not invoking

I'm currently working on implementing a navigation to a specific anchor tag when the user clicks the continue button on the cart page. This project involves a mobile application built with Cordova, and the function call is done using jQuery. Here is ...

The problem of duplicate ids: Once an id is used, it cannot be

Currently, I'm focusing on a specific script : http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/# I've made some adjustments to the Gmail and Facebook boxes within this script. When clicking on them, I want them to displa ...

The Karma tool is throwing a TypeError because it is unable to access the 'length' property of a null value

Despite reviewing numerous inquiries regarding this error, none have provided insight into identifying the root cause of the issue. How can I pinpoint the origin of this error and what steps can I take to resolve it? TypeError: Cannot read property ' ...

Unusual class exhibiting peculiar async/await patterns

Node 7.9.0 The situation goes like this: class TestClass { constructor() { const x = await this.asyncFunc() console.log(x) } async asyncFunc() { return new Promise((accept) => { setTimeout(() => accept("done"), 1000) }) ...

Is TypeScript capable of handling deep partials?

Can a partial type in TypeScript be specified in a way that applies partiality to all child objects as well? For instance: interface Foobar { foo: number; bar: { baz: boolean; qux: string; }; } const foobar: Partial<Foobar> = { foo: ...

When refreshing, the useEffect async function will not execute

Upon page load, the getImages function is intended to run only once. After refreshing the page, both tempQuestionImages and questionImages are empty. However, everything works perfectly after a hot reload. I am utilizing nextJs along with Firebase Cloud ...

What would be the most efficient method in Angular for saving and retrieving information on whether a user has previously selected a checkbox?

I am currently in the process of learning angular as I develop a web application that resembles a todo list, specifically focused on football teams. In this application, users can navigate through a menu to select a league from four options. The applicatio ...

Unable to eliminate the right margin, which continues to expand as the width of the div decreases

I'm facing a peculiar issue with my HTML/CSS while working on a profile page for a game with a focus on mobile responsiveness. The right-margin seems to persist even though I've tried various solutions. In portrait mode, everything appears fine b ...

What is the best approach for creating routes with parameters of varying lengths?

Due to the structure of the website's url, the parameters will vary, making it impossible to set a fixed number of parameters. How can we modify the app-routing.module.ts file to accommodate this? url => /products/cat1/cat2/cat3/cat4 ... const rou ...

Use the clientID property of the controlname element within JavaScript to access the element using the getElementById method with only

I have a customized compound control that I need to deactivate. This control includes a text field and a calendar component. I want to disable both the image and the text field. Here is how it is identified on the page. The control's name is "datepic ...

How to hide the header on a specific page using Angular

Currently, I am working on an Angular project and my requirement is to hide the header block specifically on the login page. Despite attempting to hide the header on the login page, it seems that my efforts have been unsuccessful so far. Is there anyone wh ...

What is the best way to clear radio button selections in a form using reactjs?

I designed a survey form with 4 radio buttons for a single question. I also included buttons to submit the form and clear input fields. However, when I click on "Clear Input," the checked radio buttons do not get cleared. How can I achieve this using the r ...

Using React - sending 'this' as a property

Could there be any unseen side effects if I go ahead with this approach? class App extends React.Component { greet() { console.log("hello") } render() { return <Layout app={this}> } } Will I be able to call ...