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

fix: mock __non_webpack_require__ #579

Closed
wants to merge 3 commits into from

Conversation

himself65
Copy link
Contributor

No description provided.

Copy link

vercel bot commented Mar 7, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
waku ✅ Ready (Inspect) Visit Preview Mar 18, 2024 5:37pm

Copy link

codesandbox-ci bot commented Mar 7, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Copy link
Contributor Author

@himself65 himself65 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Owner

@dai-shi dai-shi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the workaround. We need some tweaks.

@@ -19,6 +19,7 @@ import {
fileURLToFilePath,
} from '../utils/path.js';
import { encodeInput, hasStatusCode } from './utils.js';
import { createRequire } from 'node:module';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is used in non-Node runtime, so we can't import it here. Any hacks to avoid it?

@aheissenberger
Copy link
Contributor

This fixed my problem with sqlite - thanks!

@aheissenberger
Copy link
Contributor

aheissenberger commented Mar 8, 2024

only for the DEV mode - it will break in BUILD Mode:

file:///Users/ah/SVN-Checkouts/DEV/waku/examples/xx_auth/dist/assets/rsf0.js:181
          if (fileName !== __filename) {
                           ^

ReferenceError: __filename is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/ah/SVN-Checkouts/DEV/waku/examples/xx_auth/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
(Use `node --trace-uncaught ...` to show where the exception was thrown)

and here some code to replicate the error on pnpm waku build:

import { Link } from 'waku';

import { Counter } from '../components/counter.js';
import sqlite from "better-sqlite3";

const db = sqlite("main.db");


export const HomePage = async () => {
  const data = await getData();

  return (
    <div>
      <title>{data.title}</title>
      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
      <p>{data.body}</p>
      <Counter />
      <Link to="/about" className="mt-4 inline-block underline">
        Learn more
      </Link>
    </div>
  );
};

const getData = async () => {

  db.exec(`CREATE TABLE IF NOT EXISTS user (
      id TEXT NOT NULL PRIMARY KEY
  )`);


  const data = {
    title: 'Waku',
    headline: 'Waku',
    body: 'Hello world!',
  };

  return data;
};

@dai-shi dai-shi marked this pull request as draft March 10, 2024 13:23
@himself65
Copy link
Contributor Author

only for the DEV mode - it will break in BUILD Mode:

file:///Users/ah/SVN-Checkouts/DEV/waku/examples/xx_auth/dist/assets/rsf0.js:181
          if (fileName !== __filename) {
                           ^

ReferenceError: __filename is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/ah/SVN-Checkouts/DEV/waku/examples/xx_auth/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
(Use `node --trace-uncaught ...` to show where the exception was thrown)

and here some code to replicate the error on pnpm waku build:

import { Link } from 'waku';

import { Counter } from '../components/counter.js';
import sqlite from "better-sqlite3";

const db = sqlite("main.db");


export const HomePage = async () => {
  const data = await getData();

  return (
    <div>
      <title>{data.title}</title>
      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
      <p>{data.body}</p>
      <Counter />
      <Link to="/about" className="mt-4 inline-block underline">
        Learn more
      </Link>
    </div>
  );
};

const getData = async () => {

  db.exec(`CREATE TABLE IF NOT EXISTS user (
      id TEXT NOT NULL PRIMARY KEY
  )`);


  const data = {
    title: 'Waku',
    headline: 'Waku',
    body: 'Hello world!',
  };

  return data;
};

I feel this is more like a upstream issue which didn't handle ESM/CJS, or webpack environment correctly

@aheissenberger
Copy link
Contributor

Here is my working setup to use better-sqlite3 with WAKU:

  1. I needed to add a plugin packages/waku/src/lib/plugins/vite-plugin-binding-sqlite3.ts to the build process to handle copying the better_sqlite3.node binary to the dist folder:
import { normalizePath, type Plugin } from 'vite';
import fs from 'node:fs'
import path from 'node:path'

export function bindingSqlite3(options: {
    output?: string;
    better_sqlite3_node?: string;
    command?: string;
  } = {}): Plugin {
    const TAG = '[vite-plugin-binding-sqlite3]'
    options.output ??= 'dist'
    options.better_sqlite3_node ??= 'better_sqlite3.node'
    options.command ??= 'build'
  
    return {
      name: 'vite-plugin-binding-sqlite3',
      config(config) {
        // https://github.com/vitejs/vite/blob/v4.4.9/packages/vite/src/node/config.ts#L496-L499
        const resolvedRoot = normalizePath(config.root ? path.resolve(config.root) : process.cwd())
        const output = path.resolve(resolvedRoot, options.output??'')
        const better_sqlite3 = import.meta.resolve('better-sqlite3')
        const better_sqlite3_root = path.join(better_sqlite3.slice(0, better_sqlite3.lastIndexOf('node_modules')), 'node_modules/better-sqlite3')
        const better_sqlite3_node = new URL(path.join(better_sqlite3_root, 'build/Release', options.better_sqlite3_node??''))
        const better_sqlite3_copy = path.join(output, options.better_sqlite3_node??'')
        if (!fs.existsSync(better_sqlite3_node)) {
          throw new Error(`${TAG} Can not found "${better_sqlite3_node}".`)
        }
        if (!fs.existsSync(output)) {
          fs.mkdirSync(output, { recursive: true })
        }
        fs.copyFileSync(better_sqlite3_node, better_sqlite3_copy)
        /** `dist/better_sqlite3.node` */
        const BETTER_SQLITE3_BINDING = better_sqlite3_copy.replace(resolvedRoot + '/', '')
        fs.writeFileSync(
          path.join(resolvedRoot, '.env'),
          `
  VITE_BETTER_SQLITE3_BINDING=${BETTER_SQLITE3_BINDING}
  VITE_COMMAND=${options.command}
  VITE_DEV_ROOT=${resolvedRoot}
  `.trim(),
        )
  
        console.log(TAG, `binding to ${BETTER_SQLITE3_BINDING}`)
      },
    }
  }
  1. modified the build packages/waku/src/lib/builder/build.ts:
import {bindingSqlite3} from '../plugins/vite-plugin-binding-sqlite3.js';
...
const serverBuildOutput = await buildVite({
    plugins: [
      bindingSqlite3(),
...
const buildSsrBundle = async (
  ...
  await buildVite({
    base: config.basePath,
    plugins: [
      bindingSqlite3(),
  1. init sqlite with this options in a waku page
import sqlite from "better-sqlite3";
const nodeRequire = createRequire(import.meta.url);
const dbOptions = (process.env.NODE_ENV==='production' && process.env?.VITE_BETTER_SQLITE3_BINDING) ? { nativeBinding: nodeRequire(path.join(process.cwd(), process.env.VITE_BETTER_SQLITE3_BINDING)) } : {};
const db = sqlite("main.db", dbOptions);

It works but it shows that there might be a need to add plugins to WAKU build process without modifications of the source of build.ts

@himself65
Copy link
Contributor Author

closing, see #707

@himself65 himself65 closed this Jun 18, 2024
dai-shi added a commit that referenced this pull request Jul 2, 2024
close #579 

- [x] prd
- [x] dev

---------

Co-authored-by: Mohammad Bagher Abiyat <zorofight94@gmail.com>
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

Successfully merging this pull request may close these issues.

3 participants