Next: SyntaxError: Cannot use import statement outside a module

[Antonio-Laguna]

• Swiper Version: 6.5.8
• Platform/Target and Browser Versions: Next

What You Did

I've imported React as the docs say with:

import { Swiper } from 'swiper/react';
import SwiperCore, { Keyboard, A11y, Pagination } from 'swiper';

Upon trying to build this with Next and/or loading the site I get:

> Build error occurred
/Users/alaguna/Projects/project/node_modules/swiper/swiper-react.esm.js:13
import { Swiper } from './esm/react/swiper';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.ft6N (/Users/alaguna/Projects/project/.next/server/pages/[pageslug]/schedule.js:8621:18)
    at __webpack_require__ (/Users/alaguna/Projects/project/.next/server/pages/[pageslug]/schedule.js:23:31)
    at Module.nWF6 (/Users/alaguna/Projects/project/.next/server/pages/[pageslug]/schedule.js:11399:25) {
  type: 'SyntaxError'
}
info  - Collecting page data .%

Expected Behavior

It should not blow.

Actual Behavior

It does blow.

---

I acknowledge this is probably something in my config but I can't find anything odd:

next.js.config file

const envConfig = require('dotenv').config();
const path = require('path');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

// import next constants
const CONSTANTS = require('./next.constants');

// import version from package.json
const { version } = require('./package.json');

// set build specific constants
const env = CONSTANTS[process.env.BUILD_ENV] || CONSTANTS.local;

env.BUILD_VERSION = version;

// override any values set in the constant
// file with values from .env
if (envConfig && envConfig.parsed) {
  Object.entries(envConfig.parsed).forEach((entry) => {
  // eslint-disable-next-line prefer-const
    let [key, val] = entry;

    // dotenv creates all values as strings
    // so cast these values into booleans
    if (val === 'false') {
    // cast false values
      val = false;
    } else if (val === 'true') {
    // cast true values
      val = true;
    } else if (val === 'null') {
    // cast null values
      val = null;
    } else if (/^[\d.]+$/.test(val)) {
    // cast numbery looking values
      val = +val;
    }

    // update the env object which is set
    // from next.constants.js
    env[key] = val;
  });
}

const config = {
  poweredByHeader: false,
  target: 'server',
  compress: false,
  webpack(cfg, { isServer }) {
    const originalEntry = cfg.entry;
    cfg.entry = async () => {
      const entries = await originalEntry();

      if (entries['main.js'] && !entries['main.js'].includes('./src/client/polyfills.js')) {
        entries['main.js'].unshift('./src/client/polyfills.js');
      }

      return entries;
    };
    cfg.module.rules.push({
      test: /\.js/,
      use: [{
        loader: 'string-replace-loader',
        options: {
          // eslint-disable-next-line no-template-curly-in-string
          search: "(`/_next/data/${this.buildId}${dataRoute}${ssg?'':search}`)",
          // eslint-disable-next-line no-template-curly-in-string
          replace: "(`/_pages/_next/data/${this.buildId}${dataRoute}${ssg?'':search}`)",
        },
      }],
    });
    if (!isServer) {
      cfg.module.rules.push({
        test: [
          path.resolve(__dirname, 'src/api/cms-schemas.js'),
          path.resolve(__dirname, 'src/api/fetchWithTimeout.js'),
          path.resolve(__dirname, 'src/api/stats-json.js'),
          path.resolve(__dirname, 'src/constants/settings.js'),
          path.resolve(__dirname, 'src/constants/navigation-menus.js'),
          path.resolve(__dirname, 'next.constants.js'),
          /src\/api\/logger\/.+/,
          /src\/api\/mock\/.+/,
        ],
        use: 'null-loader',
      });
    }
    return cfg;
  },
  env,
};

module.exports = withBundleAnalyzer(config);