Webpack Guide

How to set up Tamagui with Webpack

Configure Webpack to compile Tamagui components and extract their styles.

yarnnpmbunpnpm
yarn add -D webpack webpack-cli

Then install the Tamagui plugin:

yarnnpmbunpnpm
yarn add -D tamagui-loader

Configuration

Add the plugin to your webpack.config.js. If you have a tamagui.build.ts (recommended; see compiler install docs), no options are needed:

webpack.config.js
const { TamaguiPlugin } = require('tamagui-loader')

// reads from tamagui.build.ts automatically
config.plugins.push(new TamaguiPlugin())

Or pass options inline:

webpack.config.js
const { TamaguiPlugin } = require('tamagui-loader')

config.plugins.push(
  new TamaguiPlugin({
    config: './src/tamagui.config.ts',
    components: ['tamagui'],
  })
)

Or use a minimal manual setup:

webpack.config.js
// some stuff for react-native
config.plugins.push(
  new webpack.DefinePlugin({
    process: {
      env: {
        DEV: process.env.NODE_ENV === 'development' ? 'true' : 'false',
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    },
  })
)

config.resolve.alias['react-native$'] = 'react-native-web'

// set up web extensions
compiler.options.resolve.extensions = [
  '.web.tsx',
  '.web.ts',
  '.web.js',
  '.ts',
  '.tsx',
  '.js',
]

Usage

To run the server locally, install webpack-dev-server:

yarnnpmbunpnpm
yarn add -D webpack-dev-server

Start the server with:

yarnnpmbunpnpm
yarn webpack serve

One

Metro

Edit this page on GitHub.