exhibitionist-digital / ultra

Zero-Legacy Deno/React Suspense SSR Framework
https://ultrajs.dev
MIT License
2.99k stars 65 forks source link

`/~/` alias + build => Module not found on runtime #290

Open d9k opened 7 months ago

d9k commented 7 months ago

https://github.com/d9k/citations-supabase-demo/tree/726f3da7cf16698975bc4906a8274967c03f705b

> deno task build
Task build deno run --no-npm -A ./build.ts
[ultra] - INFO ✔ Build is valid
[ultra] - INFO Building module graph for entrypoint ./client.tsx
[ultra] - INFO ✔ Module graph built
[ultra] - INFO Vendor modules for entrypoint ./client.tsx
[ultra] - INFO ✔ Vendored 21 modules for entrypoint ./client.tsx
[ultra] - INFO Building module graph for entrypoint ./server.tsx
[ultra] - INFO ✔ Module graph built
[ultra] - INFO Vendor modules for entrypoint ./server.tsx
[ultra] - INFO ✔ Vendored 153 modules for entrypoint ./server.tsx
[ultra] - INFO Compiling sources
[ultra] - INFO ✔ Compiled 97 sources
[ultra] - INFO Optimizing CSS sources
[ultra] - INFO ✔ Optimized 4 CSS sources
[ultra] - INFO Generating asset-manifest.json
[ultra] - INFO ✔ Generated asset-manifest.json
[ultra] - INFO ✔ Patched deno.json
[ultra] - INFO ✔ Build complete

You can now deploy the "/home/d9k/cr/demo/citations-supabase-demo/.ultra" output directory to a platform of your choice.
Instructions for common deployment platforms can be found at https://ultrajs.dev/docs#deploying.

Alternatively, you can cd into "/home/d9k/cr/demo/citations-supabase-demo/.ultra" and run: deno task start
> cd .ultra
> deno task start
Task start ULTRA_MODE=production deno run --no-npm -A --no-remote ./server.js
error: Module not found "file:///~/app/app.tsx".
    at file:///home/d9k/cr/demo/citations-supabase-demo/.ultra/server.js:1:201

Error highlight

Module not found "file:///~/app/app.tsx
d9k commented 7 months ago

importMap: root import causes «server responded with a MIME type of ''"» error | issue #277 | ultra - probably related

d9k commented 7 months ago

@deckchairlabs, @mashaal, do we have working example with alias?

Should have one

d9k commented 7 months ago

Entries for paths with aliases just not created in .ultra/importMap.browser.json and importMap.server.json at all!

Expected something like

    "/~/": "/src/",
    "./src/app.tsx": "/src/app/app.fe83edc4.js",
    "/~/app/app.tsx": "/src/app/app.fe83edc4.js",

But no entries for app.fe83edc4.js in .ultra/importMap.browser.json

d9k commented 7 months ago

Ultra uses mesozoic builder.

Aliases should be added to mesozoic test fixture

d9k commented 6 months ago

Wrote script which copies source code to subfolder and transforms absolute local imports with aliases to relative import there:

d9k/citations-supabase-demo: script/copy-and-transform-imports-to-relative.ts

const walkIterator = fs.walk(
  PROJECT_COPY_WITH_IMPORTS_TRANSFORMED_TO_RELATIVE_PATH,
  {
    match: matchScriptsRegexArray,
  },
);

for await (const scriptFileEntry of walkIterator) {
  const scriptAbsPath = scriptFileEntry.path;

  const scriptRelPath = path.relative(
    PROJECT_COPY_WITH_IMPORTS_TRANSFORMED_TO_RELATIVE_PATH,
    scriptAbsPath,
  );

  const scriptDirPath = path.dirname(scriptAbsPath);

  console.debug('walk scripts:', scriptRelPath, scriptFileEntry.path);

  const codeLines = Deno.readTextFileSync(scriptFileEntry.path);

  const replaceQuotedPath: ReplaceCallback = (
    _quotedPath,
    importPathWithAlias,
  ) => {
    console.debug('    ', importPathWithAlias);

    const importPathAbs = importPathWithAlias.replace(/^\/~\//, () => {
      return aliasSrcAbsPath + '/';
    });

    const importPathRelativeToScript = path.relative(
      scriptDirPath,
      importPathAbs,
    );

    const importPathRelativeToScriptStartsWithDot =
      importPathRelativeToScript.match(/^\.\./)
        ? importPathRelativeToScript
        : `./${importPathRelativeToScript}`;

    return `'${importPathRelativeToScriptStartsWithDot}'`;
  };

  const transformStringWithQuotedPath = (stringWithQuotedPath: string) => {
    const transformedString = stringWithQuotedPath.replace(
      /'(.*)'/,
      replaceQuotedPath,
    );

    console.debug('->', transformedString);

    return transformedString;
  };

  const codeLinesWithRelImports = codeLines.replace(
    /from[\s\n\r]+'\/~\/.*'/gm,
    (fromWithQuotedPath) => {
      console.debug('  ', fromWithQuotedPath);

      return transformStringWithQuotedPath(fromWithQuotedPath);
    },
    /** async import */
  ).replace(/import\([\s\n\r]*'\/~\/.*'/gm, (fromWithQuotedPath) => {
    console.debug('  ', fromWithQuotedPath);

    return transformStringWithQuotedPath(fromWithQuotedPath);
  });

  Deno.writeTextFileSync(scriptAbsPath, codeLinesWithRelImports);
}