[react-flexbox-grid] From [next.config.js] How to set it up?

[arsendev]

Hello, I'd like to use [react-flexbox-grid] to do my work now. I'm working on next.js. No different. I'd like to set it up in [next.config.js], but it keeps failing.

I use style file as [scss].

this is next.config.js file

module.exports = withCss(
  withSass({
    publicRuntimeConfig: {
      API_URL: process.env.API_URL,
      localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string' ? process.env.LOCALE_SUBPATHS : 'none'
    },
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[local]___[hash:base64:5]',
    },
    assetPrefix: process.env.S3_URL ? process.env.S3_URL : '',
    progressBar: {
      profile: true
    },
    webpack(config, options) {
      config.resolve.mainFields = ["main", "browser", "module"];
      config.module.rules.push(
        {
          test: /\.(jpe?g|png|svg|gif|eot|ttf|woff|woff2)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                exclude: /node_modules/,
                publicPath: '/_next/static/images/',
                outputPath: 'static/images/',
                name: '[name]-[hash].[ext]'
              }
            }
          ]
        },
        {
          test: /\.css$/,
          loader: 'style!css!postcss',
          include: path.join(__dirname, 'node_modules'), // oops, this also includes flexboxgrid
          exclude: /flexboxgrid/, // so we have to exclude it
          }
      )

      return config;
    }
  })
)

err msg

ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }

I tried the tutorial, but it keeps going up.

[ryanrouleau]

Hey @arsendev I'm trying to set this up with next too. Any luck getting it to work?

[arsendev]

Hi!! @ryanrouleau I solved the problem by adding a conditional statement as the code below, but I don't know why it works.

However, it worked correctly only if you put the condition statement before 'require'.

if (typeof require !== "undefined") {
  require.extensions[".less"] = () => { };
  require.extensions[".css"] = (file) => { };
}

const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');
const path = require('path');

config.module.rules.push(
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader!postcss-loader',
          include: path.join(__dirname, 'node_modules'),
          exclude: /flexboxgrid/,
          options: {
            modules: false,
            importLoaders: 1,
            localIdentName: '[local]__[hash:base64:5]'
          }
        },
        {
          test: /\.(jpe?g|png|svg|gif|eot|ttf|woff|woff2)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                exclude: /node_modules/,
                publicPath: process.env.S3_URL ? process.env.S3_URL + '/_next/static/images/' : '/_next/static/images/',
                outputPath: 'static/images/',
                name: '[name]-[hash].[ext]'
              }
            }
          ]
        }

• I'm sorry that the sentence is not smooth using the translator.