从 nextjs 应用程序将 React 组件导出为 Web 组件

Question

我正在尝试将组件从 Next.js 应用程序导出为 Web 组件，并将它们集成到 Chrome 扩展中。 我的想法是拥有我的应用程序的网络版本并使用 chrome 扩展中的部分组件。

next.config.js

const path = require('path')

module.exports = {
  pageExtensions: ['ts', 'tsx'],
  trailingSlash: true,
  reactStrictMode: false,
  experimental: {
    esmExternals: "loose", // <-- add this
    serverComponentsExternalPackages: ["mongoose"],// <-- and this
  },
  webpack: (config, { isServer }) => {
    if(!isServer) {
      config.resolve.fallback = {
        fs: false
      }
    }
    // return config;

    return {
      ...config,
      // devtool: 'inline-source-map',
      entry: async () => {
        const entryConfig = await config.entry();
        return {
          ...entryConfig,
          wcg: "./src/web-component/index.tsx"
        }
      },
    }
  }
}

index.tsx

import r2wc from "@r2wc/react-to-web-component";

function ComponentA() {
  debugger;
  return (<div>
    Hello
  </div>)
}

// registers a custom element (= Web Component)
const WebApp = r2wc(ComponentA);
customElements.define("web-app", WebApp);

构建输出： 我应该加载哪些文件才能使 Web 组件正常工作？ 我尝试加载 wcg-6827d3560c5e7b97.js 但没有任何反应。

我尝试以纯 html 格式加载输出文件 wcg.js 但没有任何反应。 我想我缺少加载核心文件。

我还尝试为 Web 组件创建单独的 Webpack 配置文件

const path = require('path');

const isDevelopment = process.env.NODE_ENV === 'development';

module.exports = {
  entry: './src/web-component/index.tsx',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: 'tsconfig.wc.json',
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.module\.s(a|c)ss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: isDevelopment,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: isDevelopment,
            },
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        exclude: /\.module\.s(a|c)ss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: isDevelopment,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: isDevelopment,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.scss'],
  },
  output: {
    filename: 'my-web-component.wc.js',
    path: path.resolve(__dirname, 'wc'),
  },
};

我运行命令 webpack --config wc-config.webpack.js 我收到错误

You may need an additional loader to handle the result of these loaders.
| function ComponentA() {
|     debugger;
>     return (<div>
|     Hello
|   </div>);

我的问题是否可以从 nextjs 应用程序导出 Web 组件，或者我需要使用常规的 React 项目。

我错过了什么？

Answer 1

嘿，你能弄清楚吗？我也尝试用 NextJs 制作 Web 组件