Comments (18)
@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.
IMO, there are two ways of solving this
-
Allow custom
webpack.config.js
. Something like react-storybookPros - 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 thewebpack
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.
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.
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.
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.
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.
@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.
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.
You could make a layer that implements Tapable and let people plugin to the instance. :) easy plugin system.
from next.js.
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.
would this be considered a webpack issue? wondering if having access to the config could resolve this
from next.js.
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.
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.
@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.
@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.
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.
Are there any open questions left on this? I really like the idea of the API converging with react-storybook
's.
from next.js.
@rauchg Oh, cool. Thanks for the update!
from next.js.
Related Issues (20)
- TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useActionState) is not a function or its return value is not iterable While using the example it the docs for useActionState. HOT 11
- unhandledRejection: Error: Cannot find module 'lru-cache' HOT 4
- Docker standalone is missing sharp HOT 1
- Undocumented breaking change with custom server between 13.4.1 and 13.5.1 / getRequestHandler does no longer set status code with Koa custom server
- Next [14.2.3] middleware is being by passed when using proxy/reverse proxy
- Dev server stuck on state - "Cannot read properties of null (reading 'useContext')" HOT 1
- Next [14.2.3] Custom headers not working when using redirect in middleware HOT 5
- Next >14.0.1 cannot use @ant-design/icons (unexpected token 'export')
- API Route Inside Dockerized App Repeating Results HOT 1
- Docs: inconsistency for config matcher docs
- App router routing to dynamic route instead of predefined route in Next.js HOT 3
- Can not deploy Next.js app HOT 1
- Docs: Add explanation why CacheHandler.revalidateTag never gets called using Pages Router
- `<Link` breaking when there is padding or margin attached HOT 3
- Page props not passed for Index page when Middleware and basePath in use
- [Middleware] Locale in NextResponse.rewrite(...) path ignored for dynamic routes when basepath is set and skipMiddlewareUrlNormalize is true
- Not working with Yarn pnpm strategy
- server action compiler error is thrown when `graphql` relay tags are used HOT 6
- Double redirect in RSC page when using a loading boundary HOT 6
- Edge Runtime and AWS SDK credentials
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.