Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Client side Javascript broken (or works differently) in lume 2.0.x #547

Closed
max-l opened this issue Jan 4, 2024 · 9 comments
Closed

Client side Javascript broken (or works differently) in lume 2.0.x #547

max-l opened this issue Jan 4, 2024 · 9 comments
Labels
bug Something isn't working

Comments

@max-l
Copy link

max-l commented Jan 4, 2024

Version

2.0.2

Platform

ubuntu

What steps will reproduce the bug?

Port a 1.x site that has client side javascript

How often does it reproduce? Is there a required condition?

always

What is the expected behavior?

I would expect a compiled javascript bundle to be created (ex main.js), in _site/

What do you see instead?

no bundle gets created

Additional information

No response
@max-l max-l added the bug Something isn't working label Jan 4, 2024
@max-l max-l changed the title Client side Javascript in lume 2.0.x Client side Javascript broken (or works differently) in lume 2.0.x Jan 4, 2024
@max-l
Copy link
Author

max-l commented Jan 4, 2024 •
edited
Loading

In a Lume 1.x site I have :

export default function (_data: unknown, { url }: Helpers) {
  return `<!doctype html>
	<html>
		<head>
			<meta charset="utf-8">					
		</head>
		<body>
			<div id="app"/>
			<script type="module" src="${url("/main.js")}" bundle></script>
		</body>		
	</html>
	`
}

A bundle gets created and deposited in _/site.

In lume 2.0.x, I can't get it to work.

@oscarotero
Copy link
Member

Hmm, this bundle attribute is something new. Are you using a plugin for that?
The only "official" way in Lume 1 and 2 to bundle javascript files is by using the esbuild plugin.

@max-l
Copy link
Author

max-l commented Jan 4, 2024 •
edited
Loading

@oscarotero I created this repo: /~https://github.com/max-l/lume_2_with_client_js

I managed to get the bundle to build, but then it seems that the esbuild takes over everything, including the static pre generation.

@oscarotero
Copy link
Member

Okay, looks like you're trying to do two different things with the same extension jsx.

  • The option entryPoints doesn't exist in the Lume plugin. Lume uses extensions to identificate the purpose of the files. esbuild is configured with the extension .jsx so all files with this extension will be processed in the same way (both index.jsx and main.jsx).
  • If you want to create static pages from jsx, and client side code from jsx, you have to define two different extensions or use subextensions. For example, the jsx for HTML pages could be .page.jsx and the rest of .jsx files are for client side code. In Lume 2 you have the pageSubExtension option for that. For example:
site.use(jsx({
  pageSubExtension: ".page",
}))

site.use(esbuild({
    extensions: [".jsx"],
    options: {
        jsxDev: ! isProduction,
        minify: isProduction
    }
  }))

Now you can rename your index.jsx to index.page.jsx and it will work fine.

@max-l
Copy link
Author

max-l commented Jan 5, 2024 •
edited
Loading

Ok, that works, thanks !

I pushed your suggested fixes to the repo : /~https://github.com/max-l/lume_2_with_client_js

I'm now getting a problem with imports on the client side:

main.jsx:1 Uncaught ReferenceError: useState is not defined
    at main.jsx:1:21

/~https://github.com/max-l/lume_2_with_client_js/blob/main/main.jsx#L1

I tried importing with :

import React, {useState} from "react"

import React, {useState} from "npm:react"

without success

@oscarotero
Copy link
Member

I've disabled the jsx plugin and created the index page with index.vto and it works fine:

import lume from "lume/mod.ts";
import jsx from "lume/plugins/jsx.ts";
import esbuild from "lume/plugins/esbuild.ts";
import sourceMaps from "lume/plugins/source_maps.ts";


const site = lume()

const isProduction = false

// site.use(jsx({
//     pageSubExtension: ".page",
//   }))

site.use(esbuild({
    extensions: [".jsx"],
    options: {
        jsxDev: ! isProduction,
        minify: isProduction
    }
  }))
  .use(sourceMaps({}))

export default site;

Looks like there is some kind of conflict between jsx plugin and esbuild with jsx.
I'll dig into it.

oscarotero added a commit that referenced this issue Jan 5, 2024
@oscarotero
fix conflict #547
a4be568
@oscarotero
Copy link
Member

Okay, I found the bug and it's fixed now.
Before releasing a new version, can you test it? You can upgrade to the latest development version of lume with deno task lume upgrade --dev.

oscarotero added a commit that referenced this issue Jan 5, 2024
@oscarotero
added test for #547
9f93bec
@max-l
Copy link
Author

max-l commented Jan 5, 2024

It works, I've uploaded the changes here: /~https://github.com/max-l/lume_2_with_client_js

Thanks

@oscarotero
Copy link
Member

Fix released in Lume 2.0.3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@max-l @oscarotero