Giter Site home page Giter Site logo

Custom webpack config about next.js HOT 18 CLOSED

vercel avatar vercel commented on May 17, 2024 45
Custom webpack config

from next.js.

Comments (18)

arunoda avatar arunoda commented on May 17, 2024 14

@pyros2097 Thanks for the mention. Yep, we allow both webpack and babel and it's working pretty well.

FYI: This is how we do it.

@rauchg, if this is something you'd like to see, I'm happy to work on this.

from next.js.

pksjce avatar pksjce commented on May 17, 2024 10

IMO, there are two ways of solving this

  • Allow custom webpack.config.js. Something like react-storybook

    Pros - Full control over the application.

    Cons - Right now, next.js gives a lot of functionality out of the box which can be compromised.

  • Have a seperate webpack.next.js in the application code, which allows only a subset of the webpack configs and then adds on to/overrides the current config.

    Pros - We can allow addition of custom loaders/plugins.

    Cons - Does not provide full control over the application since only a subset is allowed. User needs to be educated on what can be customised and what cannot ie need proper warnings and error messages for the same.

from next.js.

timoxley avatar timoxley commented on May 17, 2024 8

A simple option could be to try load user's webpack config, falling back to default config.

User's config would totally overrides the default config, however, the default config would be loadable e.g const nextConfig = require('next/webpack.config')

Then the user could use whatever to extend/mutate this.

e.g.

const nextConfig = require('next/webpack.config')

module.exports = Object.assign({}, nextConfig, {
  devtool: 'eval-source-map'
})

For example, override customise the babel transforms config as needed (#26):

const nextConfig = require('next/webpack.config')

// find babel loader
const babelLoader = nextConfig.module.loaders.find(({loader}) => loader === 'babel')

// mutate to add custom plugin
babelLoader.plugins.unshift('transform-decorators-legacy') // must run first

module.exports = nextConfig

Would also allow users to opt into using something with fancy recursive merging logic like lodash.merge or webpack-config:

const Config = require('webpack-config')

module.exports = new Config().merge(require.resolve('next/webpack.config'), {
  resolve: {
    alias: {
      'immutable': require.resolve('immutable/dist/immutable.min.js')
    }
  }
})

Ideally, this would only need to be used as an escape hatch for emergencies.

from next.js.

ugiacoman avatar ugiacoman commented on May 17, 2024 6

Custom webpack config would be incredible, I'm trying to use react-toolbox but without a SASS loader, I can't do much...

Is there an unofficial way to include a custom webpack config at this point?

from next.js.

rauchg avatar rauchg commented on May 17, 2024 4

Please see #174. It's very possible that we'll admit both a function and an object in the future, but we'll start with the more powerful variant (fn)

from next.js.

DarrylD avatar DarrylD commented on May 17, 2024 3

Adding css is pretty important. For the time being, I just leveraged <Head> with cdns or from ./static

Example

<Head>
    <title>My page title</title>
    <link rel="stylesheet" href="/static/css.min.css" />
</Head>

from next.js.

ugiacoman avatar ugiacoman commented on May 17, 2024 1

@pksjce Have a seperate webpack.next.js in the application code, which allows only a subset of the webpack configs and then adds on to/overrides the current config.

This solution sounds pretty good

from next.js.

davidrossjones avatar davidrossjones commented on May 17, 2024

Is this currently unsupported full stop? e.g. there is no way for me to add css-loader to parse .css files via Webpack?

from next.js.

TheLarkInn avatar TheLarkInn commented on May 17, 2024

You could make a layer that implements Tapable and let people plugin to the instance. :) easy plugin system.

from next.js.

TheLarkInn avatar TheLarkInn commented on May 17, 2024

Or if anything a hook before build and dev that can return the 'compiler' instance or 'config object' before it calls .run or .watch.

This would provide a single extensible point in which people can explore customize, break, or change the configuration to suit their snowflake applications/workflows.

from next.js.

DarrylD avatar DarrylD commented on May 17, 2024

would this be considered a webpack issue? wondering if having access to the config could resolve this

from next.js.

vdanchenkov avatar vdanchenkov commented on May 17, 2024

What do you think about #174 ? Given it's safe to mutate original config and small chances that someone would like to override config completely, I'd not ask end user to return anything from the function. It would be original config object anyway.

from next.js.

nickjackson avatar nickjackson commented on May 17, 2024

I like @timoxley's suggestion above. Object.assign seems like a good way of keeping the config structure familiar, allowing for simple loader/plugin additions, as well as the ability to completely override the default if the user wishes.

from next.js.

vdanchenkov avatar vdanchenkov commented on May 17, 2024

@nickjackson
Is

return Object.assign({}, nextConfig, {
  devtool: 'eval-source-map'
})

looks more familiar then?

nextConfig.devtool = 'eval-source-map'

I could add return value to API and it would not significantly change suggested usage, but it will make developers think that they have to clone original config while they are not required to do it.

It would make usage too complicated if we require developers to keep original config unchanged.

from next.js.

timoxley avatar timoxley commented on May 17, 2024

@vdanchenkov using the returned object would allow users to mutate or clone or return an entirely new object. Your current implementation only allows users the option to mutate.

Not sure if this approach is the right avenue or not though.

from next.js.

pyrossh avatar pyrossh commented on May 17, 2024

The people at https://github.com/kadirahq/react-storybook have implemented a custom webpack config loader for their app which users can easily add to.

from next.js.

ajhyndman avatar ajhyndman commented on May 17, 2024

Are there any open questions left on this? I really like the idea of the API converging with react-storybook's.

from next.js.

ajhyndman avatar ajhyndman commented on May 17, 2024

@rauchg Oh, cool. Thanks for the update!

from next.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.