react-toolbox icon indicating copy to clipboard operation
react-toolbox copied to clipboard

How to integrate it with Next.JS?

Open gcfabri opened this issue 7 years ago • 1 comments

Please, how could we integrate react-toolbox with NextJS?

gcfabri avatar May 21 '18 12:05 gcfabri

Here is how I am using react toolbox with next.js

// next.config.js
const withCSS = require('@zeit/next-css')
const internalReactToolboxDeps = /react-toolbox(?!.*node_modules)/
const externalReactToolboxDeps = /node_modules(?!\/react-toolbox(?!.*node_modules))/

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]__[hash:base64:5]',
  },

 webpack: (config, { dev, defaultLoaders }) => {
   config.resolve.symlinks = false
   config.externals = config.externals.map(external => {
       if (typeof external !== 'function') return external
       return (ctx, req, cb) => (internalReactToolboxDeps.test(req) ? cb() : external(ctx, req, cb))
   })
   config.module.rules.push({
      test: /\.jsx?$/,
      loader: defaultLoaders.babel,
      include: [internalReactToolboxDeps],
   })

   return config
  },
  webpackDevMiddleware: config => {
    const ignored = [config.watchOptions.ignored[0], externalReactToolboxDeps]
    config.watchOptions.ignored = ignored
    return config
  },
})

I altered this from using an internally built ui component library, and this code I found HERE

that1matt avatar Jul 31 '18 14:07 that1matt