How to use webpack plugin

[sacru2red]

Question

How to use webpack plugin.

It throw Error, when following https://typia.io/docs/setup/#unplugin-typia

https://github.com/sacru2red/ryoppippi__unplugin-typia__fail

[samchon]

@ryoppippi Bug report has come.

[ryoppippi]

Looks like this is because of ESM/CJS issues I'll investigate it

[ryoppippi]

So, my plugin is built only for ESM, not CJS This is because jsr only suppors for cjs.

[ryoppippi]

@sacru2red @samchon OK, so I built my library for cjs, and it works perfectly. So, I'll consider the solution.

[sacru2red]

I thought jsr only supports es modules, but didn't you say the opposite? any way, Thank you for your quick response.

[ryoppippi]

@sacru2red I found a solution with jiti. Stay tuned! When I publish my fix, I'll let you know.

BTW, @sacru2red, I would like to use [sacru2red/ryoppippiunplugin-typiafail for testing webpack with unplugin-typia, but I cannot see any LISENCE. Can I use it without any restriction?

[ryoppippi]

@sacru2red I cannot find a good solution with jsr/unplugin-typia right now. So currently, I'll share my config with jiti. Please try it. I'll added it to my plugin'` documentation.

// Generated using webpack-cli https://github.com/webpack/webpack-cli
import "webpack-dev-server";
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import WorkboxWebpackPlugin from "workbox-webpack-plugin";
import { Configuration } from "webpack";
// import unpluginTypia from "@ryoppippi/unplugin-typia/webpack";

const jiti = require("jiti")();
const unpluginTypia = jiti("@ryoppippi/unplugin-typia/webpack").default;

const isProduction = process.env.NODE_ENV == "production";

const config: Configuration = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),
    // require("@ryoppippi/unplugin-typia/webpack")()
    unpluginTypia(),
    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";

    if (config.plugins == null) {
      config.plugins = [];
    }
    config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
  } else {
    config.mode = "development";
  }
  return config;
};

[sacru2red]

BTW, @sacru2red, I would like to use [sacru2red/ryoppippiunplugin-typiafail for testing webpack with unplugin-typia, but I cannot see any LISENCE. Can I use it without any restriction?

of corse, It has no License. I made for this issue.

[ryoppippi]

@sacru2red Fantastic Thanks!

[ryoppippi]

@sacru2red I made a PR! If it works for you, let me know! https://github.com/ryoppippi/unplugin-typia/pull/72/

[sacru2red]

@sacru2red지금은 jsr/unplugin-typia로 좋은 해결책을 찾을 수 없습니다. 그래서 현재는 내 구성을 jiti. 꼭 시도해 보세요. 내 플러그인 문서에 추가하겠습니다.

// Generated using webpack-cli https://github.com/webpack/webpack-cli
import "webpack-dev-server";
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import WorkboxWebpackPlugin from "workbox-webpack-plugin";
import { Configuration } from "webpack";
// import unpluginTypia from "@ryoppippi/unplugin-typia/webpack";

const jiti = require("jiti")();
const unpluginTypia = jiti("@ryoppippi/unplugin-typia/webpack").default;

const isProduction = process.env.NODE_ENV == "production";

const config: Configuration = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),
    // require("@ryoppippi/unplugin-typia/webpack")()
    unpluginTypia(),
    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";

    if (config.plugins == null) {
      config.plugins = [];
    }
    config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
  } else {
    config.mode = "development";
  }
  return config;
};

It throws throw new Error('No file found');

And I understand this is a temporary solution, but as you can see I want to create a webpack configuration file consisting of ts, This take me to any hell.

[ryoppippi]

Oh really. This is wierd.

• Could you show me the full error?
• Did you install jiti before?
• Which node version you are using?

[ryoppippi]

Maybe I need bulid for CJS and uplolad it on npm. I'll work on it

[sacru2red]

Oh really. This is wierd.

• Could you show me the full error?
• Did you install jiti before?
• Which node version you are using?

check with https://github.com/sacru2red/ryoppippi__unplugin-typia__fail I just commit

Did you install jiti before? >>> No

[ryoppippi]

This error looks like unplugin-typia is executed. However, input file is not found?? in my environment, it works. Hmm

[ryoppippi]

@sacru2red I added GHA to investigate the issue https://github.com/ryoppippi/ryoppippi__unplugin-typia__fail/actions/runs/9445715286

It fails only on WIndows 🤔 idk why..

[ryoppippi]

I'm working on publishing to npm. Stay turned

[samchon]

If there's something significant change on the library name, please send a PR of setup guide docs.

[ryoppippi]

OK, Thanks!

(why webpack does not support ESM btw... haha)

[ryoppippi]

I deleted the npm package by mistake and they told me to wait 24 hours, so I need a minute. I've contacted support.

[ryoppippi]

I compiled to CJS and tried it However, fails on Windows ...

[ryoppippi]

I found the problem, finally...

{
  fileName: "D:/a/unplugin-typia/unplugin-typia/examples/bun-build/build.ts",
  id: "D:\\a\\unplugin-typia\\unplugin-typia\\examples\\bun-build\\build.ts",
}

[ryoppippi]

Guys, do you have any idea?

[samchon]

Use path.sep, then may be solved.

[ryoppippi]

I used https://github.com/unjs/pathe/blob/1eadc66c0fb3b2916cbcc1c73370bf4b824985ff/src/path.ts#L92 !

[ryoppippi]

@samchon @sacru2red fixed!!

https://github.com/sacru2red/ryoppippi__unplugin-typia__fail/pull/1

[ryoppippi]

I was considering and woking on publishing npm. However, dealing for CJS is a little bit hard for me, and this plugin with jiti works fine. So I'll add the documentation about jiti+unplugin-typia.

@sacru2red If my PR works in your local env, let me know. Then @samchon will close this issue

[ryoppippi]

FYI: I updated the docs https://jsr.io/@ryoppippi/unplugin-typia/doc/webpack/~/default https://jsr.io/@ryoppippi/unplugin-typia @samchon

[sacru2red]

I was considering and woking on publishing npm. However, dealing for CJS is a little bit hard for me, and this plugin with jiti works fine. So I'll add the documentation about jiti+unplugin-typia.

@sacru2red If my PR works in your local env, let me know. Then @samchon will close this issue

It works! cool! Thanks!!

[ryoppippi]

Thanks for reporting! And I'm happy to fix it! I don't have any windows machines so I couldn't know the bug!! @sacru2red

[ryoppippi]

@samchon we can close this issue!

[samchon]

@ryoppippi Make a website docs PR with this issue tagging please.

[ryoppippi]

@samchon which website? Typia'docs?

[samchon]

Ah, my mistake. No example code provided of webpack in the unplugin-typia chapter.