Cannot find module 'classnames/bind'

[jeremybarbet]

Hi!

I setup a repository with the issue https://github.com/jeremybarbet/next-classnames-loader-issue

Steps:

• create-next-app next-classnames-loader-issue

• yarn add @zeit/next-sass classnames-loader node-sass -ED

• Changing next.config.js

const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true,
  webpack(config) {
    const classNamesLoader = require.resolve('classnames-loader');
    const styleRules = config.module.rules.filter(rule => rule.test.test('file.scss') || rule.test.test('file.sass'));

    styleRules.forEach(styleRule => {
      if (styleRule.use && styleRule.use.indexOf(classNamesLoader) === -1) {
        styleRule.use.splice(0, 0, classNamesLoader);
      }
    });

    return config;
  },
});

• Moving index route to a home folder and creating a div using classname

• Result to:

./pages/home/Home.scss
Error: Cannot find module 'classnames/bind'
ModuleBuildError: Module build failed (from ./node_modules/classnames-loader/index.js):
Error: Cannot find module 'classnames/bind'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.resolve (internal/modules/cjs/helpers.js:30:19)
    at Object.module.exports.pitch (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/classnames-loader/index.js:11:85)
    at runLoaders (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/webpack/lib/NormalModule.js:301:20)
    at /Users/jeremy/Perso/next-classnames-loader-issue/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/jeremy/Perso/next-classnames-loader-issue/node_modules/loader-runner/lib/LoaderRunner.js:182:20
    at runSyncOrAsync (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at /Users/jeremy/Perso/next-classnames-loader-issue/node_modules/loader-runner/lib/LoaderRunner.js:178:3
    at loadLoader (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/loader-runner/lib/loadLoader.js:47:3)
    at iteratePitchingLoaders (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
    at NormalModule.doBuild (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/webpack/lib/NormalModule.js:280:3)
    at NormalModule.build (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/webpack/lib/NormalModule.js:427:15)
    at Compilation.buildModule (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/webpack/lib/Compilation.js:635:10)
    at factory.create (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/webpack/lib/Compilation.js:884:14)
    at factory (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/webpack/lib/NormalModuleFactory.js:405:6)
    at hooks.afterResolve.callAsync (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/webpack/lib/NormalModuleFactory.js:155:13)
    at _fn0 (eval at create (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:14:1)
    at fileExistsWithCase (/Users/jeremy/Perso/next-classnames-loader-issue/node_modules/case-sensitive-paths-webpack-plugin/index.js:160:11)

[otakustay]

You must have classnames installed in your app

[danbirle]

@jeremybarbet hey :) I'm experiencing a similar issue. for some reason, my systemjs targetted build sees 'classnames/bind' as a module in itself and it cannot resolve it:

ERROR in /BaseButton.tsx
Module not found: Error: Can't resolve 'classnames/bind'

have you found a solution to your issue?