react-textarea-code-editor icon indicating copy to clipboard operation
react-textarea-code-editor copied to clipboard

Can't use this library with Next.js using a `next.config.mjs` file

Open RobotSail opened this issue 2 years ago • 6 comments

I'm trying to use this with a next.config.mjs file and am probably using this incorrectly. The issue I'm running into is that there is no place for me to pass my existing NextConfig as an argument into removeImports, since the signature looks like:

declare type PluginOptions = {
    test?: RegExp;
    matchImports?: string;
};
declare const _default: (pluginOptions?: PluginOptions) => (nextConfig?: NextConfig) => NextConfig;

I've tried instead to merge the output from removeImports with my initialized config, but that didn't seem to have any effect:

// @ts-check

import removeImports from 'next-remove-imports'

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 * This is especially useful for Docker builds.
 */
!process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));


/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,

  /**
   * If you have the "experimental: { appDir: true }" setting enabled, then you
   * must comment the below `i18n` config out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
	...removeImports(),
};
export default config;

This must be the case of me doing something incorrectly, but it's blocking my ability to use this package.

RobotSail avatar Feb 20 '23 13:02 RobotSail

I've created an issue for this in next-remove-imports.

RobotSail avatar Feb 20 '23 14:02 RobotSail

@RobotSail

  • https://github.com/uiwjs/next-remove-imports/issues/8#issuecomment-1437724960

jaywcjlove avatar Feb 21 '23 01:02 jaywcjlove

@RobotSail

import removeImports from 'next-remove-imports'

const removeImportsFun = removeImports({
  options: { },
})

export default removeImportsFun({
  reactStrictMode: true,
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
})

jaywcjlove avatar Feb 21 '23 01:02 jaywcjlove

@jaywcjlove Thanks! I tried using CodeEditor with the above configuration but am still running into the following error:

Error: require() of ES Module /Users/osilkin/Programming/main/autoreviewer-2/node_modules/rehype/index.js from /Users/osilkin/Programming/main/autoreviewer-2/node_modules/@uiw/react-textarea-code-editor/cjs/utils.js not supported.
Instead change the require of index.js in /Users/osilkin/Programming/main/autoreviewer-2/node_modules/@uiw/react-textarea-code-editor/cjs/utils.js to a dynamic import() which is available in all CommonJS modules.

RobotSail avatar Feb 21 '23 12:02 RobotSail

@RobotSail

  • https://github.com/uiwjs/react-md-editor/issues/446#issue-1417594634

jaywcjlove avatar Feb 22 '23 01:02 jaywcjlove

In case of Next.js, adding experimental.esmExternals: 'loose' fixes the issue.

lucgagan avatar May 29 '23 21:05 lucgagan