import ... -> ... is not defined #164

j2l · 2021-07-23T13:30:14Z

Hi Jim,
I successfully run svelte and three (not svelthree here), but for any reason working code in index.svelte like:

import * as THREE from 'three';
const scene = new THREE.Scene();

plenti serve throws:

Can't render htmlComponent: ReferenceError: THREE is not defined /home/runner/work/plenti/plenti/cmd/build/data_source.go on line 307

javascript stack trace: ReferenceError: THREE is not defined
    at create_ssr:36:16
    at Object.$$render (create_ssr:1555:22)
    at create_ssr:35:135
    at $$render (create_ssr:1555:22)
    at Object.render (create_ssr:1563:26)
    at create_ssr:1:58

What does Go need?
Thanks :)

The text was updated successfully, but these errors were encountered:

jimafisk · 2021-12-01T05:03:53Z

Hi @j2l, I'm sorry for letting this issue sit for so long without response. I had actually started to respond but needed to fix some bugs before I could get this working.

Response I started with webpack instructions (don't use)

It looks like three.js doesn't ship with .mjs files by default: mrdoob/three.js#19830. Newer versions of node support this, but our "gopack" (like snowpack, but with less features) tool specifically looks for these file extensions for esm support. Down the road I'd like to move the core files from gopack into our ejectable filesystem (#159) and potentially add esbuild to allow a minimal config setup for pulling in other packages (#28 (comment)).

For now, it probably makes sense to use a bundler like webpack outside of plenti's build process.

Install webpack: npm install webpack webpack-cli --save-dev
Create webpack.config.js in the root of the project with the following contents:

const path = require('path');

module.exports = {
  entry: './node_modules/three/src/Three.js',
  output: {
    path: path.resolve(__dirname, 'assets'),
    filename: 'bundle.js',
  },
};

Run webpack: ./node_modules/webpack/bin/webpack.js
Reference the newly created file inside <head> tags of layouts/global/head.svelte:

<script type="module" src="/assets/bundle.js"></script>

Then in between the <script> tags of your component (for example layouts/content/index.svelte) you could import the module like so:

import * as THREE from '/assets/bundle.js';

However doing this ^ gives me an error along these lines:

errs.go:57: Can't render htmlComponent: ReferenceError: layouts_content__assets_scene_js_createScene is not defined /home/jimafisk/Projects/jantcu/plentico/plenti/cmd/build/data_source.go on line 321


javascript stack trace: ReferenceError: layouts_content__assets_scene_js_createScene is not defined
    at create_ssr:18:20
    at Object.$$render (create_ssr:1555:22)
    at create_ssr:35:135
    at $$render (create_ssr:1555:22)
    at Object.render (create_ssr:1563:26)
    at create_ssr:1:58 (File: /home/jimafisk/Projects/jantcu/plentico/plenti/cmd/build.go, Line: 140)

That's because Plenti is seeing the named import to a locally referenced file and is trying to turn it into a "component signature" that we use internally to identify things in V8. I actually still need to fix this bug, so for now it's probably better to import directly from NPM and with the gopack updates I made in v0.4.28 you should be able to pull threejs in now.

I made some updates to "gopack" which provides esm support for the project, so now you should be able to npm install three then do something like:

import * as THREE from 'three';

Here's a working example site demonstrating this:

Note: Just make sure you use the newest release v0.4.28 to get this working

joas8211 mentioned this issue Nov 12, 2021

Import from node_modules #165

Closed

jimafisk closed this as completed Jan 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

import ... -> ... is not defined #164

import ... -> ... is not defined #164

j2l commented Jul 23, 2021 •

edited

Loading

jimafisk commented Dec 1, 2021 •

edited

Loading

import ... -> ... is not defined #164

import ... -> ... is not defined #164

Comments

j2l commented Jul 23, 2021 • edited Loading

jimafisk commented Dec 1, 2021 • edited Loading

j2l commented Jul 23, 2021 •

edited

Loading

jimafisk commented Dec 1, 2021 •

edited

Loading