RollupError when running from within the build directory

[rustworthy]

Hi there! Thank you for this beautiful piece of software!

While playing around, I've caught a RollupError :

Error when evaluating SSR module virtual:remix/server-build: failed to import "/resources/remix_app/routes/_index.js.map"
|- RollupError: Expected ';', '}' or <eof>

Steps to reproduce: 1) npm init adonisjs@latest -- -K="github:jarle/remix-starter-kit" 2) cd to the project 3) npm run build 4) cp .env build 5) cd build 6) npm ci --omit="dev" 7) node bin/server.js 8) visit http://localhost:3333/

However, everything will work as expected when running node build/bin/server.js from the project's root.

Disclaimer: I might have missed something about the set up and may need to spend more time with the docs. Please advise.

Also, I am planning to add a PR with an example for tailwindcss and shadcn/ui setup. This can live in the examples directory wdyt?

[rustworthy]

The root cause I guess is somewhere around the remixBundle prop of the compiled version of the RemixProvider.

It will look like this:

/// <reference types="@adonisjs/vite/vite_provider" />
import path from 'node:path';
import { createRequestHandler } from '../src/remix_adapter.js';
import { HttpContext } from '@adonisjs/core/http';
import { pathToFileURL } from 'node:url';
import '../src/types/main.js';
export default class RemixProvider {
    app;
    static needsApplication = true;
    remixBundle = pathToFileURL(path.join(process.cwd(), 'build/remix/server/server.js')).toString();
    constructor(app) {
        console.log(this.remixBundle);
        this.app = app;
    }
    async boot() {
        const env = this.app.getEnvironment();
        if (env !== 'web' && env !== 'test') {
            return;
        }
        const vite = await this.app.container.make('vite');
        const devServer = vite.getDevServer();
        const build = devServer
            ? () => devServer?.ssrLoadModule('virtual:remix/server-build')
            : await import(this.remixBundle);
        const requestHandler = createRequestHandler({
            build,
            getLoadContext: (context) => ({
                http: context.http,
                make: context.container.make.bind(context.container),
            }),
        });
        const app = this.app;
        HttpContext.getter('remixHandler', function () {
            return () => requestHandler({
                http: this,
                container: app.container,
            });
        }, false);
    }
}

It's clear now that this piece:

remixBundle = pathToFileURL(path.join(process.cwd(), 'build/remix/server/server.js')).toString();

will give us the build segment twice and the error message will resemble

Error: Cannot find module '/path/to/project/build/build/remix/server/server.js' imported from
   /path/to/project/build/node_modules/@matstack/remix-adonisjs/build/providers/remix_provider.js

[jarle]

Thanks for letting me know! I fixed this issue some time ago, but forgot to update the starter-kit template. It can be fixed by upgrading @matstack/remix-adonisjs to version 0.0.32 (and is fixed for all new projects).

And awesome that you want to contribute with some examples! Feel free to open a pull request to this repo. Having an examples folder seems like a good approach.

[jarle]

Hmm, seems that change didn't fix the rollup issue. I will reopen this and take a closer look.

[rustworthy]

Yeah I am now jumping from the build dir of the reference app, and I can see the constructor of the compiled version of the RemixProvider class looks different:

    constructor(app) {
        this.app = app;
        this.remixBundle = app.makeURL('remix/server/server.js').href;
    }

And the reference app launches from within the build dir as expected, and looks so pretty by the way, this pico is killing 😄

[jarle]

I found the cause of the original RollupError: the .env file that comes with the project specifies NODE_ENV=development. When doing the npm install in the build folder, dev dependencies are not included leading to the errors if using the bundled .env file.

The fix to this is to make sure the .env file in the build folder contains NODE_ENV=production when running the built application 🙂