Cannot resolve swiper@7 with next@10

[neo]

• I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
• I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ

(nice! I like this haha)

Are you trying to transpile a local package or an npm package?
If an npm package, which one?

[email protected]

Describe the bug
A clear and concise description of what the bug is (don't forget the logs if applicable).

It says cannot resolve the package:

Module not found: Can't resolve 'swiper/react'
  1 | import { Pagination } from 'swiper';
> 2 | import { Swiper, SwiperSlide } from 'swiper/react';
  3 | 
  4 | import 'swiper/swiper.min.css';
  5 | import 'swiper/modules/pagination/pagination.min.css';

To Reproduce
Steps to reproduce the behavior (a reproduction is even better):

Install next@10 and swiper@7, and try to import from swiper/react

Expected behavior
A clear and concise description of what you expected to happen.

It should import and run without problems

Setup

• Next.js version: 10.2.3
• next-transpile-modules version: 7.3.0
• Node.js version: 15.8.0
• npm/yarn version: 1.22.11
• Operating System: macOS 11.5.2
• Webpack 4 or 5: 4

Additional context
Add any other context about the problem here.

We used to do the following when swiper was at version 6:

require('next-transpile-modules')([
  'dom7/dist/dom7.modular',
  'swiper/js/swiper.esm.js',
])

and now swiper is at version 7: https://swiperjs.com/migration-guide, I tried either of this and was not able to make it work:

require('next-transpile-modules')(['dom7', 'swiper'])

or

require('next-transpile-modules')(['dom7', 'swiper/react'])

Thank you!! 🙏

[martpie]

Can you paste here the whole log? (Enabling the debug flag would help too)

[neo]

Thank you for the timly response!! Is this good?

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /my-project/.env.development
info  - Using webpack 4. Reason: future.webpack5 option disabled https://nextjs.org/docs/messages/webpack5
next-transpile-modules - trying to resolve the following modules:
  - dom7
  - swiper
next-transpile-modules - the following paths will get transpiled:
  - /my-project/node_modules/dom7
  - /my-project/node_modules/swiper
info  - Using external babel configuration from /my-project/babel.config.js
event - compiled successfully
next-transpile-modules - trying to resolve the following modules:
  - dom7
  - swiper
next-transpile-modules - the following paths will get transpiled:
  - /my-project/node_modules/dom7
  - /my-project/node_modules/swiper
event - build page: /
wait  - compiling...
next-transpile-modules - transpiled: /my-project/node_modules/swiper/swiper.min.css
next-transpile-modules - transpiled: /my-project/node_modules/swiper/modules/pagination/pagination.min.css
error - ./src/components/Swiper/index.ts:2:0
Module not found: Can't resolve 'swiper/react'
  1 | import { Pagination } from 'swiper';
> 2 | import { Swiper, SwiperSlide } from 'swiper/react';
  3 | 
  4 | import 'swiper/swiper.min.css';
  5 | import 'swiper/modules/pagination/pagination.min.css';

[neo]

I also tried import { Swiper, SwiperSlide } from 'swiper/react/swiper-react'; and got this:

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /my-project/.env.development
info  - Using webpack 4. Reason: future.webpack5 option disabled https://nextjs.org/docs/messages/webpack5
next-transpile-modules - trying to resolve the following modules:
  - dom7
  - swiper
next-transpile-modules - the following paths will get transpiled:
  - /my-project/node_modules/dom7
  - /my-project/node_modules/swiper
info  - Using external babel configuration from /my-project/babel.config.js
event - compiled successfully
next-transpile-modules - trying to resolve the following modules:
  - dom7
  - swiper
next-transpile-modules - the following paths will get transpiled:
  - /my-project/node_modules/dom7
  - /my-project/node_modules/swiper
event - build page: /404
wait  - compiling...
event - build page: /
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/swiper-react.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/swiper-react.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/swiper.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/swiper-slide.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/swiper.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/swiper-slide.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/swiper.min.css
next-transpile-modules - transpiled: /my-project/node_modules/swiper/modules/pagination/pagination.min.css
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/use-isomorphic-layout-effect.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/use-isomorphic-layout-effect.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/get-params.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/init-swiper.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/loop.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/get-changed-params.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/get-children.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/update-swiper.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/virtual.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/use-isomorphic-layout-effect.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/use-isomorphic-layout-effect.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/get-params.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/init-swiper.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/loop.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/get-children.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/get-changed-params.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/update-swiper.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/virtual.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/utils.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/params-list.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/params-list.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/params-list.js
next-transpile-modules - transpiled: /my-project/node_modules/swiper/react/params-list.js
error - ./node_modules/swiper/react/init-swiper.js:1:0
Module not found: Can't resolve 'swiper'
null
error - ./node_modules/swiper/react/loop.js:2:0
Module not found: Can't resolve 'swiper'
null
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./node_modules/swiper/react/get-params.js:1:0
Module not found: Can't resolve 'swiper'
null

[martpie]

I believe the problem comes from your setup. The error comes from your component, are you sure you installed swiper or swiper is available from the component your required it from?

On my setup, this is the problem I get:

which is a SSR error (a HMR makes it work), some Swiper gets correctly imported on my side.

[martpie]

To fix the SSR issue, you will need to add ssr-window to ntm:

const withTM = require('next-transpile-modules')([
  'swiper',
  'ssr-window',
  'dom7',
]);

Regarding your app failing to import the component, the problem is in your setup ;) Webpack/Next.js is just saying it cannot find the library, but it's not related to next-transpile-modules.

[neo]

I didn't see what you saw actually...

let me share the repro: https://github.com/neo/swiper7-in-next10

[neo]

hi! trying to resurface this a bit, or should I open another issue?

[martpie]

As I said, it's not a problem related to next-transpile-modules, this error is thrown by Webpack, not by this plugin.

A quick research in node_modules showed there is no swiper/react/index.js, so swiper/react does not exist.

I checked the Swiper repo and I found thiis: nolimits4web/swiper#4871

[martpie]

As a sidenote, I think this is a problem for the Next.js team, not for here :)

This might help: vercel/next.js#9607

[martpie]

Maybe something like this would help (forcing the module resolution manually with Webpack)

const withTM = require("next-transpile-modules")(
  ["swiper", "ssr-window", "dom7"],
  {
    resolveSymlinks: false,
    debug: true,
  }
);
const path = require("path");

module.exports = withTM({
  webpack: (config, options) => {
    if (options.isServer) {
      config.externals = ["swiper", ...config.externals];
    }

    config.resolve.alias["swiper/react"] = path.resolve(
      __dirname,
      ".",
      "node_modules",
      "swiper",
      "react",
      "swiper-react.js"
    );
    config.resolve.alias["swiper"] = path.resolve(
      __dirname,
      ".",
      "node_modules",
      "swiper",
      "swiper-bundle.js"
    );

    return config;
  },
});

This is not a complete solution but this might be a step in the right direction (basically, tell Webpack where to find those modules)

[neo]

Ok thank you!! I was just afraid that you didn't see and try out the repro repo, because it was not showing the errors you described previously.

And I def agree with you that it's the lib + next issues, because next 11 has (experimental) ESM support, and swiper 6 had commonjs support; thus next10 + swiper7 is an awkward combination. I just thought this package would solve all the nextjs ESM issues...

Thanks again!

[martpie]

What's the flag to enable esm support? I know it exists but I can't find it :(

[neo]

well it only exists in next 11 but unfortunately not 10 😭
https://nextjs.org/blog/next-11-1#es-modules-support