Hey, let me jump in here, I am working with Botond.
Based on your advice, we are trying to use the latest version of @speckle/viewer, but we are encountering a persistent issue when trying to use @2.23.15 within a Nuxt 2 (@2.17.2) project, specifically in the production build.
Environment:
- Nuxt: 2.17.2
- Nuxt Target:
server
- Key Dependencies:
@speckle/viewer: ^2.23.15true-myth: ^8.5.1
- Build System: Nuxt 2’s default Webpack 4
Problem: The application works correctly in development mode (yarn run dev), but the production build (yarn run build + yarn start or deployed in Docker) throws a runtime error: TypeError: i.default is not a function. This error occurs when instantiating the viewer (new Viewer(...)) inside our component.
Required Build Configuration (nuxt.config.js):
To get the build (yarn run build) to even complete successfully, I found the following configuration necessary:
build: {
sourcemap: { server: true, client: true },
transpile: ["@speckle/viewer", "@speckle/shared", "true-myth"],
extend(config, { isDev, isClient }) {
config.resolve.alias = config.resolve.alias || {};
// Needed by @speckle/objectloader
config.resolve.alias["#lodash"] = "lodash";
// Needed by @speckle/shared for build to pass
// This alias allows the build to complete but seems to cause the runtime error
try {
config.resolve.alias['true-myth/maybe'] = require.resolve('true-myth');
config.resolve.alias['true-myth/result'] = require.resolve('true-myth');
} catch (e) {
console.error("Could not resolve 'true-myth'.", e);
}
}
}
Without the true-myth alias pointing to the main package, the build fails with Dependencies were not found: true-myth/maybe....
The Runtime Error & Sourcemap Issues:
With the above configuration, the build passes, but running the production code results in TypeError: i.default is not a function when new Viewer() is called. This strongly suggests a CJS/ESM interop issue related to how dependencies (likely true-myth via the alias) are bundled/minified in production.
Debugging this is hampered because browser sourcemaps aren’t working correctly.
- We forced sourcemap generation using
config.devtool = 'source-map' in build.extend, and .map files are generated.
- The
//# sourceMappingURL=... comment exists in the served JS files.
- However, testing with
yarn start across Chrome, Incognito, and Safari, the browser does not make any network request for the .map files (DevTools settings are confirmed correct).
- The stack trace only maps the error origin to our component (
SpeckleViewer.vue:188) but shows minified internal calls (index.js:..., asyncToGenerator.js:...).
Troubleshooting Steps Tried:
- Transpiling: Added
@speckle/viewer, @speckle/shared, true-myth. (Required)
- Aliases:
- Added
#lodash. (Required)
- Added
true-myth/* pointing to require.resolve('true-myth'). (Required for build, but likely causes runtime error).
- Tried removing
true-myth alias → Build fails (“Dependencies not found”).
- Tried aliasing
true-myth/* to specific dist/es/*.js files (using path.resolve) → Build fails (same resolution error as .mjs attempt during dev, suggests resolve issues). Correction based on previous attempts - the final attempt was aliasing to dist/cjs/*.cjs using path.resolve, which did build successfully but still resulted in the same runtime error.
- Tried aliasing
true-myth/* to specific dist/cjs/*.cjs files (using path.resolve) → Build passed, but still resulted in the same runtime error.
- Sourcemaps: Forced
devtool: 'source-map' (and others like nosources-source-map) which generated maps, but browser doesn’t load them. Verified sourceMappingURL comment exists and looks correct. Verified DevTools settings and tried multiple browsers/incognito.
- Cache: Performed aggressive cache clearing (
node_modules, .nuxt, yarn.lock, yarn cache clean).
Request:
Given this persistent runtime error seemingly caused by the necessary build configuration for true-myth, could you provide guidance on:
- The recommended way to configure Nuxt 2 (Webpack 4) builds to correctly handle
@speckle/viewer and its dependencies like true-myth?
- Any known issues or workarounds for this
TypeError: i.default is not a function in production, potentially related to the true-myth alias or CJS/ESM interop?
- Any insights into why the sourcemaps might not be loading correctly in the browser?
Any help or pointers would be greatly appreciated!
