React-slick: NextJS compatibility

Created on 31 Aug 2017  路  16Comments  路  Source: akiran/react-slick

It doesn't work well with NextJS, A SSR solution

having the same problems as many others
https://github.com/akiran/react-slick/pull/560

we tried using dynamic import but that didn't work

picture flieks

Most helpful comment

Hi @awitherow, in an earlier version of https://farbenmeer.de we also used Next.js with Next-CSS. React-Slick requires fonts and icons in it's default-theme that webpack does not resolve by default. That's likely where your error comes from.

You can "fix" this by adding URL-Loader for these files to webpack in next.config.js like this:

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

and of course install url-loader: $ yarn add --dev url-loader.

picture pex on 30 Apr 2018
👍57 ❤20 🎉16 😄6 🚀3

All 16 comments

@flieks have you tried using https://github.com/kadirahq/react-no-ssr ?

harrisrobin picture harrisrobin on 19 Nov 2017
👍6 🎉1

related: #273

adekbadek picture adekbadek on 12 Feb 2018

It now supports server side rendering quite well. In fact, our demos are built with gatsby.js. There may seem some slight glitch on load, but most of them have been fixed and these fixes will be deployed soon enough.

laveesingh picture laveesingh on 26 Mar 2018

@laveesingh thanks for working hard on getting these updates working! Really appreciate what you guys do. I am getting a lot of errors still with this, probably my fault.

The on screen error is

Error in slick-carousel/slick/slick-theme.css
Module build failed: ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.

BUT, I have properly used the @zeit/next-css plugin, from what I understand.

I created the next.config.js file which looks like...

const withCSS = require("@zeit/next-css");
module.exports = withCSS();

and in my pages/index.js I am importing the slick-carousel style files, as so...

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

So I am not sure what is going on there. This should be properly imported.

The output below looks like it could be to do with the other file types? (fonts, svg, etc) but the unexpected character chunk confuses me :)

The slider is used in components/sections/Home/About/index.js and components/sections/Home/About/slider.js

The repo is located here for checking the code https://github.com/awitherow/won-next

The full stacktrace looks as so,

 ERROR  Failed to compile with 6 errors                                                                                                               08:29:04

 error  in ./node_modules/slick-carousel/slick/slick-theme.css

Module build failed: ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at doBuild (PATH_TO_DEV/won-next/node_modules/webpack/lib/NormalModule.js:303:19)
    at runLoaders (PATH_TO_DEV/won-next/node_modules/webpack/lib/NormalModule.js:209:11)
    at PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at PATH_TO_DEV/won-next/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

 error  in ./node_modules/slick-carousel/slick/fonts/slick.eot

Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:324-352 7:385-413
 @ ./pages/index.js
 @ multi ./pages/index.js

 error  in ./node_modules/slick-carousel/slick/fonts/slick.ttf

Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:538-566
 @ ./pages/index.js
 @ multi ./pages/index.js

 error  in ./node_modules/slick-carousel/slick/ajax-loader.gif

Module parse failed: Unexpected character '' (1:7)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:126-154
 @ ./pages/index.js
 @ multi ./pages/index.js

 error  in ./node_modules/slick-carousel/slick/fonts/slick.woff

Module parse failed: Unexpected character '' (1:8)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:471-500
 @ ./pages/index.js
 @ multi ./pages/index.js

 error  in ./node_modules/slick-carousel/slick/fonts/slick.svg

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
| <svg xmlns="http://www.w3.org/2000/svg">

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:608-636
 @ ./pages/index.js
 @ multi ./pages/index.js

(node:11438) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead


 WAIT  Compiling...                                                                                                                                   08:29:05



 ERROR  Failed to compile with 6 errors                                                                                                               08:29:05

 error  in ./node_modules/slick-carousel/slick/slick-theme.css

Module build failed: ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at doBuild (PATH_TO_DEV/won-next/node_modules/webpack/lib/NormalModule.js:303:19)
    at runLoaders (PATH_TO_DEV/won-next/node_modules/webpack/lib/NormalModule.js:209:11)
    at PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at PATH_TO_DEV/won-next/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

 error  in ./node_modules/slick-carousel/slick/fonts/slick.eot

Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:324-352 7:385-413
 @ ./pages/index.js
 @ multi ./pages/index.js

 error  in ./node_modules/slick-carousel/slick/fonts/slick.ttf

Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:538-566
 @ ./pages/index.js
 @ multi ./pages/index.js

 error  in ./node_modules/slick-carousel/slick/ajax-loader.gif

Module parse failed: Unexpected character '' (1:7)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:126-154
 @ ./pages/index.js
 @ multi ./pages/index.js

 error  in ./node_modules/slick-carousel/slick/fonts/slick.woff

Module parse failed: Unexpected character '' (1:8)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:471-500
 @ ./pages/index.js
 @ multi ./pages/index.js

 error  in ./node_modules/slick-carousel/slick/fonts/slick.svg

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
| <svg xmlns="http://www.w3.org/2000/svg">

 @ ./node_modules/slick-carousel/slick/slick-theme.css 7:608-636
 @ ./pages/index.js
 @ multi ./pages/index.js

ModuleBuildError: Module build failed: ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at doBuild (PATH_TO_DEV/won-next/node_modules/webpack/lib/NormalModule.js:303:19)
    at runLoaders (PATH_TO_DEV/won-next/node_modules/webpack/lib/NormalModule.js:209:11)
    at PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at PATH_TO_DEV/won-next/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at runLoaders (PATH_TO_DEV/won-next/node_modules/webpack/lib/NormalModule.js:195:19)
    at PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:179:20
    at context.callback (PATH_TO_DEV/won-next/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at PATH_TO_DEV/won-next/node_modules/extract-text-webpack-plugin/dist/loader.js:119:16
    at compile (PATH_TO_DEV/won-next/node_modules/webpack/lib/Compiler.js:300:11)
    at applyPluginsAsync.err (PATH_TO_DEV/won-next/node_modules/webpack/lib/Compiler.js:510:14)
    at next (PATH_TO_DEV/won-next/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.<anonymous> (PATH_TO_DEV/won-next/node_modules/extract-text-webpack-plugin/dist/loader.js:112:7)
    at next (PATH_TO_DEV/won-next/node_modules/tapable/lib/Tapable.js:204:14)
    at Compiler.<anonymous> (PATH_TO_DEV/won-next/node_modules/webpack/lib/CachePlugin.js:78:5)
    at Compiler.applyPluginsAsyncSeries (PATH_TO_DEV/won-next/node_modules/tapable/lib/Tapable.js:206:13)
    at compilation.seal.err (PATH_TO_DEV/won-next/node_modules/webpack/lib/Compiler.js:507:11)
    at Compilation.applyPluginsAsyncSeries (PATH_TO_DEV/won-next/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (PATH_TO_DEV/won-next/node_modules/webpack/lib/Compilation.js:680:19)
    at Compilation.applyPluginsAsyncSeries (PATH_TO_DEV/won-next/node_modules/tapable/lib/Tapable.js:195:46)
awitherow picture awitherow on 30 Apr 2018

To fix this, I have included the CDN links in the pages/_document.js file. Everything works then as expected.

awitherow picture awitherow on 30 Apr 2018

Hi @awitherow, in an earlier version of https://farbenmeer.de we also used Next.js with Next-CSS. React-Slick requires fonts and icons in it's default-theme that webpack does not resolve by default. That's likely where your error comes from.

You can "fix" this by adding URL-Loader for these files to webpack in next.config.js like this:

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

and of course install url-loader: $ yarn add --dev url-loader.

pex picture pex on 30 Apr 2018
👍57 ❤20 🎉16 😄6 🚀3

Hi @awitherow, in an earlier version of https://farbenmeer.de we also used Next.js with Next-CSS. React-Slick requires fonts and icons in it's default-theme that webpack does not resolve by default. That's likely where your error comes from.

You can "fix" this by adding URL-Loader for these files to webpack in next.config.js like this:

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

and of course install url-loader: $ yarn add --dev url-loader.

its work for me...tanks

straxico picture straxico on 17 Apr 2019 
module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

i have some you problem. what you're package.json file

chayakornwc picture chayakornwc on 5 May 2019 
module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

i have some you problem. what you're package.json file

"dependencies": {
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"axios": "^0.18.0",
"compression": "^1.7.4",
"cookie-parser": "^1.4.4",
"cors": "^2.8.5",
"express": "^4.16.4",
"fandogh": "^0.9.0",
"http-proxy-middleware": "^0.19.1",
"js-base64": "^2.5.1",
"leaflet": "^1.4.0",
"next": "^8.0.3",
"next-offline": "^3.3.8",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-leaflet": "^2.2.1",
"react-slick": "^0.23.2",
"slick-carousel": "^1.8.1",
"universal-cookie": "^3.1.0"
},
"devDependencies": {
"@babel/core": "^7.4.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.2.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jest": "^22.4.1",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"jest": "^24.7.1",
"prettier": "^1.17.0",
"pretty-quick": "^1.10.0",
"url-loader": "^1.1.2"
}

straxico picture straxico on 6 May 2019

Hi @awitherow, in an earlier version of https://farbenmeer.de we also used Next.js with Next-CSS. React-Slick requires fonts and icons in it's default-theme that webpack does not resolve by default. That's likely where your error comes from.

You can "fix" this by adding URL-Loader for these files to webpack in next.config.js like this:

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

and of course install url-loader: $ yarn add --dev url-loader.

remember to install URL-Loader first

Flatheadman picture Flatheadman on 19 Jun 2019
👍3

thanks,i solve the problem from this issues

yashualaoda picture yashualaoda on 27 Jun 2019

Good good very good thank you!

awitherow picture awitherow on 29 Aug 2019

Hi @awitherow, in an earlier version of https://farbenmeer.de we also used Next.js with Next-CSS. React-Slick requires fonts and icons in it's default-theme that webpack does not resolve by default. That's likely where your error comes from.

You can "fix" this by adding URL-Loader for these files to webpack in next.config.js like this:

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

and of course install url-loader: $ yarn add --dev url-loader.

I used this solution, but compiled jpg file is broken and cannot open. After I got rid of jpg from the test regex, all is fixed. Why?

wubin1989 picture wubin1989 on 18 Sep 2019

@pex it works great! thank you. Do you know also how to combine with this?

/* eslint-disable */
const withCss = require('@zeit/next-css');

module.exports = withCss({
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader'
      });
    }

    return config;
  }
});

EDIT
Solved by adding 

 config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })

in else block. Result:

/* eslint-disable */
const withCss = require('@zeit/next-css');

module.exports = withCss({
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader'
      });
    } else {
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
            name: '[name].[ext]'
          }
        }
      });
    }

    return config;
  }
});
MihaiWill picture MihaiWill on 24 Sep 2019
👍1

Hi @awitherow, in an earlier version of https://farbenmeer.de we also used Next.js with Next-CSS. React-Slick requires fonts and icons in it's default-theme that webpack does not resolve by default. That's likely where your error comes from.

You can "fix" this by adding URL-Loader for these files to webpack in next.config.js like this:

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

and of course install url-loader: $ yarn add --dev url-loader.

Thank you @wubin1989 ! This worked for me :)

aliyev12 picture aliyev12 on 22 Feb 2020

How to do that with next-compose-plugins?
Like this? 

[
      withCSS,
      {
        webpack: function (config) {
          config.module.rules.push({
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
              loader: "url-loader",
              options: {
                limit: 100000,
                name: "[name].[ext]",
              },
            },
          });
          return config;
        },
      },
    ]

EDIT : it seems I had the wrong ordering
This ordering is working for me

[withFonts, {}],
    [
      withCSS,
      {
        webpack: function (config) {
          config.module.rules.push({
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
              loader: "url-loader",
              options: {
                limit: 100000,
                name: "[name].[ext]",
              },
            },
          });
          return config;
        },
      },
    ],
    [withSass, {}],
modbender picture modbender on 6 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rohitgoyal7 picture rohitgoyal7  路  3Comments
quarklemotion picture quarklemotion  路  4Comments
Exomnius picture Exomnius  路  3Comments
BradyEdgar94 picture BradyEdgar94  路  3Comments
amishPro picture amishPro  路  3Comments