Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cli生成的配置引入第三方库貌似有点问题 #16

Open
xiadd opened this issue Jun 15, 2023 · 4 comments
Open

cli生成的配置引入第三方库貌似有点问题 #16

xiadd opened this issue Jun 15, 2023 · 4 comments

Comments

@xiadd
Copy link

xiadd commented Jun 15, 2023

应该是没配置js文件的loader,但是我使用自定义webpack配置后也是一直报错

sumi.config.js
const path = require("path");
const {
  browser,
} = require("@opensumi/cli/lib/config/webpack/shared.webpack.config");

const root = path.join(__dirname);

module.exports.browser = browser({
  mode: "production",
  context: path.join(process.cwd()),
  target: 'web',
  entry: {
    "SUMI-BROWSER": path.join(root, "src/extend/browser/index.ts"),
  },
  output: {
    filename: "browserExtension.js",
    path: path.join(__dirname, "dist"),
    libraryTarget: "commonjs",
  },
  module: {
    rules: [
      {
        test: /\.(m|j)s$/,
        loader: "babel-loader",
        options: {},
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve("ts-loader"),
            options: {
              compilerOptions: {
                sourceMap: false,
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          require.resolve("style-loader"),
          require.resolve("css-loader"),
          {
            loader: require.resolve("less-loader"),
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [require.resolve("style-loader"), require.resolve("css-loader")],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: require.resolve("file-loader"),
            options: {
              name: "[name].[ext]",
              outputPath: "fonts/",
            },
          },
        ],
      },
    ],
  },
  
  // resolve: {
  //   fallback: {
  //     dgram: false,
  //     fs: false,
  //     net: false,
  //     tls: false,
  //   },
  // },
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
});

请问这个该如何解决?

@erha19
Copy link
Member

erha19 commented Jun 15, 2023

@xiadd 参考一下这里的案例看一下是否能解决你的问题 https://github.com/opensumi/opensumi-extension-samples/tree/main/custom-webpack-sample

@xiadd
Copy link
Author

xiadd commented Jun 15, 2023

@erha19

这个我已经试过了,貌似还是不行,不管使用babel-loader还是esbuild-loader总会有一些莫名其妙的报错

@erha19
Copy link
Member

erha19 commented Jun 15, 2023

@xiadd 那可能就是 loader 相关版本可能存在兼容性问题,CLI 工具内目前的 webpack 版本还是 v4,注意区分一下

@xiadd
Copy link
Author

xiadd commented Jun 16, 2023

使用swc-loader解决了,但好像还有一部分esm module引入有问题,不知道为啥,我觉得这个就基本必用的可能,可以在内部集成 🤝

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants