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

Mistakenly treating CSS as JavaScript for dependencies imported from HTML inline module script #8572

Open
bdbai opened this issue Oct 23, 2022 · 4 comments
Open

Mistakenly treating CSS as JavaScript for dependencies imported from HTML inline module script #8572

bdbai opened this issue Oct 23, 2022 · 4 comments
Labels
🐛 Bug

Comments

@bdbai
Copy link

bdbai commented Oct 23, 2022 •
edited
Loading

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
	"name": "helloworld",
	"source": "src/editor.html",
	"devDependencies": {
		"buffer": "^6.0.3",
		"monaco-editor": "^0.32.1",
		"parcel": "^2.7.0",
		"process": "^0.11.10"
	}
}

🤔 Expected Behavior

Parcel should be able to produce a bundle without errors.

😯 Current Behavior

$ npx parcel build --no-source-maps
🚨 Build failed.

@parcel/optimizer-terser: Unexpected token: punc (:)

    16150 | parcelRequire.register("5UdvS", function(module, exports) {
  > 16151 |  width:800px;height:600px;border:1px solid #ccc.monaco-editor { --monaco-monospace-font: "SF Mono",Monaco,Menlo,Consolas,"Ubuntu Mono","Liberation Mono","De
  >       |      ^ Unexpected token: punc (:)
    16152 |
    16153 | });

  💡 It's likely that Terser doesn't support this syntax yet.

💁 Possible Solution

🔦 Context

I was trying to build a simple editor on top of monaco-editor. As a proof-of-concept, I just want to write some code directly in HTML to see if things can work. However, I got the error when I built the project, so I compared my code with the official sample https://github.com/microsoft/monaco-editor/tree/main/samples/browser-esm-parcel . It turned out that the only difference was they imported the monaco editor in index.js.

This seems related to #8294 , but that one is not actually solved.

💻 Code Sample

src/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	</head>
	<body>
		<div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>

		<!-- <script type="module" src="index.js"></script> -->
		<script type="module">
			import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
		</script>
	</body>
</html>

src/index.js

import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';

🌍 Your Environment

Software Version(s)
Parcel 2.7.0
Node v19.0.0
npm/Yarn npm 8.19.2
Operating System Windows 10.0.19044
@github-actions github-actions bot added the Stale Inactive issues label Apr 28, 2023
@bdbai
Copy link
Author

bdbai commented Apr 28, 2023

Any updates?

@github-actions github-actions bot removed the Stale Inactive issues label Apr 28, 2023
@github-actions github-actions bot added the Stale Inactive issues label Oct 25, 2023
@bdbai
Copy link
Author

bdbai commented Oct 25, 2023

bump

@github-actions github-actions bot removed the Stale Inactive issues label Oct 25, 2023
@github-actions github-actions bot added the Stale Inactive issues label Apr 23, 2024
@bdbai
Copy link
Author

bdbai commented Apr 23, 2024

bump

@github-actions github-actions bot removed the Stale Inactive issues label Apr 23, 2024
@github-actions github-actions bot added the Stale Inactive issues label Oct 20, 2024
@bdbai
Copy link
Author

bdbai commented Oct 20, 2024

bump

@github-actions github-actions bot removed the Stale Inactive issues label Oct 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mischnic @bdbai