"npm run dev" for example results in "[webpack-cli] SyntaxError: Unexpected identifier 'assert'"

[JohnGrime]

Description

Following the instructions in the "Example" section of the Volume Viewer docs does not appear to produce a working example in an Apptainer environment.

Expected Behavior

I expected the npm run dev command to produce a working example, as per the docs:

See public/index.ts for a working example. (npm install; npm run dev will run that code)

Reproduction

Container definition file contains:

%post -c /bin/bash
    apt-get update
    apt-get upgrade -y
    apt-get install -y git curl

    export NVM_DIR="/.nvm"
    mkdir -p $NVM_DIR
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
    source $NVM_DIR/nvm.sh
    nvm install node

    git clone https://github.com/allen-cell-animated/volume-viewer
    cd /volume-viewer/
    npm install

%runscript
    echo "Container runscript section entered."
    exec /bin/bash --rcfile /.nvm/nvm.sh

The npm install command appears to work as expected, but running the container and trying npm run dev results in:

Apptainer> npm run dev

> @aics/volume-viewer@3.8.3 dev
> webpack serve --config webpack.dev.js

[webpack-cli] Failed to load '/volume-viewer/webpack.dev.js' config
[webpack-cli] SyntaxError: Unexpected identifier 'assert'
    at compileSourceTextModule (node:internal/modules/esm/utils:337:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:163:18)
    at callTranslator (node:internal/modules/esm/loader:429:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:435:30)
    at async ModuleJob._link (node:internal/modules/esm/module_job:106:19)

Environment

WSL2 inside Windows 11 => Apptainer v 1.3.1 using Ubuntu 22.04 base image.

[toloudis]

Thank you for the report, and for trying out our viewer!

I am not sure I have all the info about your environment. Does nvm install node give you node 18 or higher? Also, the error message you got looks like this line is the problem: import packageJson from "./package.json" assert { type: "json" }; It was introduced fairly recently and I'm sure we can fix it.

[JohnGrime]

Hi @toloudis ,

These appear to be the node-y versions that are present inside the Apptainer environment:

Apptainer> node --version
v22.1.0
Apptainer> nvm --version
0.39.7
Apptainer> npm --version
10.7.0
Apptainer>

Thanks!

[toloudis]

For reference, we have 2 possible suggested fixes in webpack.dev.js:

import { createRequire } from "module";
const require = createRequire(import.meta.url);
const packageJson = require("./package.json");

or

import packageJson from "./package.json" with { type: "json" };

If you want to try locally, I suggest trying the latter one first (using with instead of assert)

[JohnGrime]

The latter approach worked - I added a strategic sed invocation in the setup, and all was well. Thanks, @toloudis!

However, running the dev server in the resultant container had some issues. I also struggled to get it working under Ubuntu 24.04 in WSL2.

It seems to work fine under Ubuntu 24.04 in Hyper-V, and in a Docker container in Ubuntu 20.04, so I'm in pretty good shape to try this out.

Thanks for the help!