RSC import/export issues with esm external packages

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:36:53 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T8101
Binaries:
  Node: 16.14.0
  npm: 8.3.1
  Yarn: 1.22.17
  pnpm: 6.30.1
Relevant packages:
  next: 12.1.2-canary.0
  react: 18.0.0-rc.3
  react-dom: 18.0.0-rc.3

What browser are you using? (if relevant)

Chrome 99.0.4844.84

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I upgraded from 12.1.1-canary.18 to 12.1.2-canary.0 and my Next.js app crashed:

After investigating, it seems that this syntax now causes a crash. I also verified that this is the syntax that’s used in the actual unicode-emoji package published to npm (it’s not transpiled).

Expected Behavior

I’d expect the syntax mentioned above to work, just like it did with 12.1.1-canary.18.

To Reproduce

1. Install the unicode-emoji package (or any other one with this syntax).
2. Import and call the exported function (in the case of the mentioned package, that would be getEmojisGroupedBy).

I’m not sure if that’s relevant, but the import is located in a client component (I’m using RSC).

[huozhi]

@willemliufdmg Do you have a repro for that? what kind of files and next config break your case? I can repro it now, checking!

[willemliufdmg]

~@willemliufdmg Do you have a repro for that? what kind of files and next config break your case?~ I can repro it now, checking!

I could create a minimal project using npm init next-app -- --ts. I’ve added some dependencies:

{
  "name": "test-next-jest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.1",
    "jest": "^27.5.1",
    "react-svg-loader": "^3.0.3",
    "typescript": "4.6.3"
  }
}

When importing an SVG as a React component using react-svg-loader I get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This is the implementation of the component:

import Link from "next/link";
import CameraIcon from "@icons/camera.svg";

function Anchor() {
  return (
    <Link href="https://google.com">
      <a>
        <CameraIcon />
      </a>
    </Link>
  );
}

export { Anchor };

If I replace the icon with something else e.g. a text. The test will work as expected.

The implementation of the test:

import { render } from "@testing-library/react";
import { Anchor } from "../../src/components/Anchor";

describe("Test", () => {
  it("should test correctly", () => {
    const renderResult = render(<Anchor />);
    expect(renderResult.getByRole("link")).toBeTruthy();
  });
});

This is next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, options) => {
    // SVG
    config.module.rules.push({
      test: /\.svg$/,
      use: ["react-svg-loader"],
    });
    return config;
  },
};

module.exports = nextConfig;

jest.setup.ts:

import "@testing-library/jest-dom/extend-expect";
import next from "next";

beforeAll(() => {
  // imports the fetch polyfill
  next({});
});

jest.config.js:

const nextJest = require("next/jest");

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

// Add any custom config to be passed to Jest
const customJestConfig = {
  testPathIgnorePatterns: ["/node_modules/", ".json"],
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ["node_modules", "<rootDir>/"],
  testEnvironment: "jest-environment-jsdom",
  moduleNameMapper: {
    "^@components/(.*)$": "<rootDir>/src/components/$1",
    "^@icons/(.*)$": "<rootDir>/src/icons/$1",
  },
  collectCoverage: true,
  collectCoverageFrom: ["src/components/**/*"],
  coverageReporters: [
    "clover",
    "json",
    "lcov",
    "text",
    "json-summary",
    "text-summary",
  ],
  resetMocks: true,
  clearMocks: true,
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

camera.svg:

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#1F1F1F"/>
<path d="M29 22.5V19C29 18.45 28.55 18 28 18H16C15.45 18 15 18.45 15 19V29C15 29.55 15.45 30 16 30H28C28.55 30 29 29.55 29 29V25.5L33 29.5V18.5L29 22.5Z" fill="white"/>
</svg>