Next.js: Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

Created on 3 May 2018  路  1Comment  路  Source: vercel/next.js

I try using next-compose with next-sass and next-optimized-images with custom webpack config.
When i start dev i have error

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

What can i do for fix it

my next.config.js

| Tech | Version |
|---------|---------|
| next | 6.0.0 |
| node | 10.0.0 |
| OS | win10 |

Most helpful comment

i resolved, i just used next-compose-plugins

const optimizedImages = require('next-optimized-images');
const withSass = require('@zeit/next-sass');
const withPlugins = require('next-compose-plugins');
const webpack = require('webpack');

const sassConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[name]___[hash:base64:5]'
  }
};

const optimizedImagesConfig = {
  inlineImageLimit: 8192,
  imagesFolder: 'images',
  imagesName: '[name]-[hash].[ext]',
  optimizeImagesInDev: false,
  mozjpeg: {
    quality: 80
  },
  optipng: {
    optimizationLevel: 3
  },
  pngquant: false,
  gifsicle: {
    interlaced: true,
    optimizationLevel: 3
  },
  svgo: {
    // enable/disable svgo plugins here
  },
  webp: {
    preset: 'default',
    quality: 75
  }
};

const nextConfiguration = {
  webpack: config => {
    config.plugins.push(
      new webpack.DefinePlugin({
        PC: JSON.stringify('pc')
      })
    );
    return config;
  },
};

module.exports = withPlugins([
  [withSass, sassConfig],
  [optimizedImages, optimizedImagesConfig],
], nextConfiguration);

>All comments

i resolved, i just used next-compose-plugins

const optimizedImages = require('next-optimized-images');
const withSass = require('@zeit/next-sass');
const withPlugins = require('next-compose-plugins');
const webpack = require('webpack');

const sassConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[name]___[hash:base64:5]'
  }
};

const optimizedImagesConfig = {
  inlineImageLimit: 8192,
  imagesFolder: 'images',
  imagesName: '[name]-[hash].[ext]',
  optimizeImagesInDev: false,
  mozjpeg: {
    quality: 80
  },
  optipng: {
    optimizationLevel: 3
  },
  pngquant: false,
  gifsicle: {
    interlaced: true,
    optimizationLevel: 3
  },
  svgo: {
    // enable/disable svgo plugins here
  },
  webp: {
    preset: 'default',
    quality: 75
  }
};

const nextConfiguration = {
  webpack: config => {
    config.plugins.push(
      new webpack.DefinePlugin({
        PC: JSON.stringify('pc')
      })
    );
    return config;
  },
};

module.exports = withPlugins([
  [withSass, sassConfig],
  [optimizedImages, optimizedImagesConfig],
], nextConfiguration);
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments

wagerfield picture wagerfield  路  3Comments

timneutkens picture timneutkens  路  3Comments

irrigator picture irrigator  路  3Comments

renatorib picture renatorib  路  3Comments