TypeError: esbuild.serve is not a function

[mebest100]

I have react project based on Wepack and now want to migrate to esbuild entirely.

But when I ran it on a dev server, esbuild report " TypeError: esbuild.serve is not a function"

below is the config , pls tell me what's wrong with it? Thx!

`const esbuild = require("esbuild");
const lessPlugin = require("esbuild-plugin-less").lessPlugin;
const cssModulesPlugin = require("esbuild-plugin-css-modules").cssModulesPlugin;

const alias = require("esbuild-plugin-alias");

const path = require("path");
const port = 7002;

(async () => {
const {babel} = await import("esbuild-plugin-babel");
const { htmlPlugin } = await import("@chialab/esbuild-plugin-html");

const config = {
entryPoints: ["./public/index.html"],
bundle: true,
outdir: "./public",
define: {
"process.env.NODE_ENV": '"development"',
},
minify: false,
splitting: true,
loader: {
".js": "jsx",
".css": "css",
".less": "less",
".png": "file",
".jpg": "file",
".jpeg": "file",
".gif": "file",
".svg": "file",
},
plugins: [
babel,
cssModulesPlugin,
lessPlugin,
htmlPlugin,
alias({

    "@": path.resolve(__dirname, "./src"),
  }),
],

};

esbuild
.serve(
{
servedir: "public",
port,
},
config
)
.then(() => {
console.log(Development server is running on http://localhost:${port});
})
.catch(() => process.exit(1));
})();`

[hyrious]

You're using an old interface (< 0.17) of esbuild, which was changed to esbuild.context() → context.serve() since 0.17.0, see the doc https://esbuild.github.io/api/#serve for more example codes.

[mebest100]

You're using an old interface (< 0.17) of esbuild, which was changed to esbuild.context() → context.serve() since 0.17.0, see the doc https://esbuild.github.io/api/#serve for more example codes.

Hi, Even I with context, it still report : TypeError: context.serve is not a function

below is the code:
`const esbuild = require("esbuild");
const lessPlugin = require("esbuild-plugin-less").lessPlugin;
const cssModulesPlugin = require("esbuild-plugin-css-modules").cssModulesPlugin;

const alias = require("esbuild-plugin-alias");

const path = require("path");
const port = 7002;

(async () => {
const {babel} = await import("esbuild-plugin-babel");
const { htmlPlugin } = await import("@chialab/esbuild-plugin-html");

const config = {
entryPoints: ["./public/index.html"], // 指定入口文件
bundle: true, // 捆绑成一个输出文件
outdir: "./public", // 输出文件的目录
define: {
"process.env.NODE_ENV": '"development"', // 设置环境变量为开发环境
},
minify: false, // 不压缩代码（开发环境通常不需要压缩）
splitting: true, // 启用代码拆分
loader: {
".js": "jsx", // 处理 JSX 文件
".css": "css", // 处理 CSS 文件
".less": "less", // 处理 Less 文件
".png": "file", // 处理 PNG 图片文件
".jpg": "file", // 处理 JPG 图片文件
".jpeg": "file", // 处理 JPEG 图片文件
".gif": "file", // 处理 GIF 图片文件
".svg": "file", // 处理 SVG 图片文件
},
plugins: [
babel,
cssModulesPlugin,
lessPlugin,
htmlPlugin,
alias({
// 配置路径别名
"@": path.resolve(__dirname, "./src"),
}),
],
};

const context = esbuild.context(config)
await context.serve({
servedir: "public", // 指定静态文件目录，例如 public 目录
port, // 指定服务器端口
});

})();
`

[hyrious]

The context() returns a promise, you need to await it first:

const ctx = await esbuild.context(config)
await ctx.serve(...)

[mebest100]

The context() returns a promise, you need to await it first:

const ctx = await esbuild.context(config)
await ctx.serve(...)

Noted , I indeed omited await. Thanks a lot!

[mebest100]

@hyrious I still have a problem with esbuild. That is when use "import" in devServerConfig.js to start devServer, I will get the report error "SyntaxError: Cannot use import statement outside a module", Then I have to put type: "module" into package.json to get rid of the error. Thus I cannot use Commonjs pattern , if I use "require" ,then get the error "ReferenceError: require is not defined in ES module scope, you can use import instead"

another example : if state path.resolve(__dirname, "./src"), for "__dirname" , I will get the error "ReferenceError: __dirname is not defined in ES module scope"
Hence how can I do for that, is it really for me to be must put type: "module" into package.json.
Is there any way for Esbuild to use Commonjs pattern when start devServer or build production. Thx!

[hyrious]

If you want to use import statements, then you have to tell Node.js that the file is in ESM format by either of the following 2 ways:

• Use the .mjs file extension.
• Set "type": "module" in package.json.

By using the ESM format, you should be aware that require() (including require.resolve()) and __dirname __filename are not available in the first place, instead you can access to the import.meta.url which is not available in CJS format.

So you can make the decision of whether to use CJS or ESM format to write your build script. Note that you can still "create" a require() by module.createRequire(import.meta.url) in ESM format.

[mebest100]

Ok, thanks a lot ! Another two question for you again , because I don't want to open more ticket ^_^

1. how to config api proxy when dev Server mode for esbuild, just like below config in webpack:
   `
   devServer: {
   port: port,
   proxy: {
   "/api": {
   target: "http://bandend-url: port",
   changeOrigin: true,
   },

   },
   `

2. how to achive dynamic import for ant design in Esbuild, I tried esbuild-plugin-babel, but when run it still report "Dynamic import can only be supported when transforming ES modules to AMD, CommonJS or SystemJS. Only the parser plugin will be enabled"
   Thanks for your help.

[hyrious]

There're more than 2 answers :P

1. There's no direct API to do that in esbuild. You can put a proxy in front of esbuild instead.

2. Dynamic import is already supported without any plugins. See it in playground.

3. In most of the cases people use dynamic import aiming to do chunk splitting for better loading performance. Code splitting is still an experimental feature in esbuild and it only supports outputing the ESM format. It is still not possible for manual chunks (i.e. customize which packages to be splitted into one chunk), which is tracked in [Feature] Manual chunks #207.

4. To write code blocks in GitHub you should use 3 ticks ``` in single lines to quote your codes, like such:

   ```js
   console.log(1)
   ```

   If you want to quote these ticks like what I just posted, just use more ticks like ````, which is:

   ````markdown
   ```js
   console.log(1)
   ```
   ````
   

[mebest100]

There're more than 2 answers :P

1. There's no direct API to do that in esbuild. You can put a proxy in front of esbuild instead.
2. Dynamic import is already supported without any plugins. See it in playground.
3. In most of the cases people use dynamic import aiming to do chunk splitting for better loading performance. Code splitting is still an experimental feature in esbuild and it only supports outputing the ESM format. It is still not possible for manual chunks (i.e. customize which packages to be splitted into one chunk), which is tracked in [Feature] Manual chunks #207.
4. To write code blocks in GitHub you should use 3 ticks ``` in single lines to quote your codes, like such:

   ```js
   console.log(1)
   

   
   
       
         
       
   
         
       
   
       
     
   If you want to quote these ticks like what I just posted, just use more ticks like `` ```` ``, which is:
   

   ```js
   console.log(1)
   ```

Thanks for your quick reply. For Dynamic import , I cannot use your promise mode as you mentioned ,because my original react code as follows :

import { Input, Row, Col } from "antd";

And then apply the imported elements into dom, hence it's impossible use promise mode to achieve Dynamic import.
And according to your statement, it need no babel plugin even with Dynamic import.
Hence I deleted babel , but it build output only one index.html, no any other js , css! below is my dev Server config file:

import * as esbuild from "esbuild";
import { lessLoader } from "esbuild-plugin-less";
import cssModulesPlugin  from "esbuild-plugin-css-modules";
import babel from "esbuild-plugin-babel";
import htmlPlugin from "@chialab/esbuild-plugin-html";


import  alias from "esbuild-plugin-alias";


import { fileURLToPath } from "url";
import path, { dirname } from "path";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const port = 7002;



const config = {
  entryPoints: ["./public/index.html"], 
  bundle: true, 
  outdir: "./public/build", 
  define: {
    "process.env.NODE_ENV": '"development"', 
  },
  minify: false, 
  
  loader: {
    ".js": "jsx", 
    ".css": "css", 
    ".png": "file", 
    ".jpg": "file", 
    ".jpeg": "file", 
    ".gif": "file", 
    ".svg": "file", 
  },
  plugins: [
    // babel(),
    cssModulesPlugin(),
    lessLoader(),
    htmlPlugin(),
    alias({    
      "@": path.resolve(__dirname, "./src"),
    }),
  ],
};


const context = await esbuild.context(config); 
context
  .serve({
    servedir: "public", 
    port, 
  })
  .then(() => {
    console.log(`Development server is running on http://localhost:${port}`);
  })
  .catch((err) => {
    console.log("error ==>", err)
    process.exit(1);
  });;

Pls help troubleshooting. Thx!

[hyrious]

…it's impossible use promise mode to achieve dynamic import.

There's no silver bullet to get performance without any hints to the bundler. The hint can be an import() call (which is supported in esbuild), or manual chunks configuration (which is not supported).

Since you're using React, then you should know the 'Suspense' and 'lazy' things. Then you just carefully write your entry point to not load antd at the first screen, and only load it when needed. These guides should be available on React's documentation.

Hence I deleted babel , but it build output only one index.html…

You're not using esbuild in the bare way (i.e. putting things like src/index.js into build options). All your entry point is just the HTML file. I guess the plugin @chialab/esbuild-plugin-html did the rest things for you but I don't know how it works. If you have any issues with these plugins, then you should just ask their authors instead of here.

[mebest100]

@hyrious Your are right! There's no silver bullet, I will carefully study how to achieve dynamic import later.

And also when I set entry point to src/index.tsx, there output files in build dir.

And then I run express to serve these production output.
But when I visit browser , it reported "Uncaught TypeError: storage2.getItem is not a function"
It seems the error comes from redux.

Can you kindly advise the possible cause? Btw: The code ran well in webpack and vite. Thx!

[hyrious]

I cannot reproduce your issue:

My test code is taken from the redux-persist package's REAMDE:

// main.ts
import { Reducer, createStore } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const rootReducer: Reducer = (state, action) => {
  return state;
};

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

const $store = { store, persistor };

Then I just bundle it with

esbuild main.ts --bundle --outdir=.

Please provide a way to reproduce the issue.

[mebest100]

@hyrious
I don't say there is bug with esbuild. But I believe react code is no problem, it shall come from the mis-config for esbuild from my side.
So can I push my code to github as reproduce this issue, and then you help me take a look. Thx!