How to add externals like in webpack in Next.js 13?

Question

In webpack as I found you can add "externals" to load additional component like modules into applications and import them.As you can see "ymaps3" is used to load external script which has no react wrapper. It is has following webpack demo code:

// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const isProduction = process.env.NODE_ENV == "production";

const config = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
    host: "localhost"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html"
    })
  ],
  externalsType: "script",
  externals: {
    // ymaps3: ["https://api-maps.yandex.ru/3.0/?apikey=4a75efd1-e36a-4f02-8957-954d09371435&lang=ru-RU", "ymaps3"],
    ymaps3: [
      `promise new Promise((resolve) => {
        const script = document.createElement('script');
        script.src = "https://api-maps.yandex.ru/3.0/?apikey=4a75efd1-e36a-4f02-8957-954d09371435&lang=ru-RU";
        script.async = true;
        script.onload = () => {
          ymaps3.ready.then(() => resolve(ymaps3));
          script.remove();
        };
        document.body.appendChild(script);
      })`
    ]
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"]
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", "..."]
  }
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";
  } else {
    config.mode = "development";
  }
  return config;
};

What I'm trying to do is to import 'ymaps3' as module and use it as follows:

import * as ymaps3 from 'ymaps3';
import React, {useState, useEffect} from 'react';

// ...

function Map() {
  const [loaded, setLoaded] = useState(true);

  useEffect(() => {
    ymaps3.ready.then(() => setLoaded(false));
  }, []);

  if (loaded) {
    return <div>Loading...</div>;
  }

  const reactify = ymaps3.reactify.bindTo(React, ReactDOM);
  const {YMap} = reactify.module(ymaps3);

  return <YMap />;
}

function App() {
  return (
    <div>
      <button>Button</button>
      <Map />
    </div>
  );
}```

How to add externals like in webpack in Next.js 13?

0 Answers0