caviarjs / next-resolve-alias-plugin

@caviar/next-block plugin to define module resolving aliases for both server side and client side

@caviar/next-resolve-alias-plugin

@caviar/next-block plugin to define module resolving aliases for both server side and client side

Install

$ npm i @caviar/next-resolve-alias-plugin

Usage

caviar.config.js

const AliasPlugin = require('@caviar/next-resolve-alias-plugin')

module.exports = {
  caviar: {
    plugins: [
      new AliasPlugin([{
        id: 'fetch',
        server: 'node-fetch',
        client: 'fetch-ponyfill'
      }], __dirname),
      ...
    ]
  },
  ...
}

The code above will set webpack.output.resolve.alias.fetch as

• 'node-fetch' in server side
• and 'fetch-ponyfill' in client side

new AliasPlugin(aliases, defaultFrom?)

• aliases Array<Alias | string>
• defaultFrom? path

interface Alias {
  // Module id
  id: string
  // `server` could be
  // - a module id string
  // - a `require.resolve()`d absolute path for a module id
  // - false to prevent from setting resolve alias for server side
  server?: string = id | false
  client?: string = id | false
  // Where should `server` and `client` be resolved from, defaults to `defaultFrom`,
  // will be useless if `server` and `client` are both absolute paths
  from?: string = defaultFrom
}

Using react installed in current project

new AliasPlugin(['react'], __dirname)

Or

// You could resolve the module id yourself
new AliasPlugin([{
  id: 'react',
  server: require.resolve('react'),
  client: require.resolve('react')
}])

// `defaultFrom` could be omitted if `server` and `client` are absolute paths

License

MIT