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

parcel start works but not parcel build #9600

Closed
The2Innkeeper opened this issue Mar 26, 2024 · 2 comments
Closed

parcel start works but not parcel build #9600

The2Innkeeper opened this issue Mar 26, 2024 · 2 comments

Comments

@The2Innkeeper
Copy link

The2Innkeeper commented Mar 26, 2024 •
edited
Loading

🐛 bug report

When I run npm start, everything works fine on the localhost:1234. However, when I try npm run build, then the website console gives the error

Uncaught SyntaxError: Identifier 'e' has already been declared (at controls.js:2:1)
main.js:2
 Uncaught SyntaxError: Identifier 'e' has already been declared (at main.js:2:1)

It seems like the build process is causing variable name clashing.

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

package.json

{
  "homepage":"https://the2innkeeper.github.io/3DWebBallistics/",
  "name": "3dwebballistics",
  "version": "0.0.0",
  "description": "A 3D ballistics simulation app within the browser using Three.js",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --dist-dir build --public-url ./"
  },
  "repository": {
    "type": "git",
    "url": "3DWebBallistics"
  },
  "keywords": [
    "three.js",
    "ballistics",
    "simulation"
  ],
  "author": "The2Innkeeper",
  "license": "ISC",
  "dependencies": {
    "dat.gui": "^0.7.9",
    "three": "^0.126.1"
  },
  "devDependencies": {
    "parcel": "^2.12.0"
  }
}

🤔 Expected Behavior

It should map to different variable names

😯 Current Behavior

There are clashing variable names

main.js:2
 Uncaught SyntaxError: Identifier 'e' has already been declared (at main.js:2:1)

💁 Possible Solution

🔦 Context

I am trying to make the website load, but I am hitting errors

💻 Code Sample

Full code at https://github.com/The2Innkeeper/3DWebBallistics
Deployment at https://the2innkeeper.github.io/3DWebBallistics/
Website source at https://github.com/The2Innkeeper/3DWebBallistics/tree/gh-pages

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Ballistics Simulation</title>
    <link rel="stylesheet" href="src/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/dat.gui.min.js"></script>
</head>

<body>
    <script src="src/js/sceneSetup.js"></script>
    <script src="src/js/controls.js"></script>
    <script src="src/js/main.js"></script>
</body>

</html>

controls.js

// Add orbit controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.set(0, 5, 30);
controls.update();

main.js

// Simulation parameters
let animationActive = false;
const params = {
    velocity: 20,
    angle: 45,
    gravity: -9.81,
    timeScale: 1, // Control the simulation speed
    startAnimation: function () { animationActive = true; },
    stopAnimation: function () { animationActive = false; resetSimulation(); }
};

// GUI controls
const gui = new dat.GUI();
gui.add(params, 'velocity', 1, 100).name('Velocity').onChange(resetSimulation);
gui.add(params, 'angle', 0, 90).name('Launch Angle').onChange(resetSimulation);
gui.add(params, 'gravity', -20, 0).name('Gravity').onChange(resetSimulation);
gui.add(params, 'timeScale', 0.1, 2).name('Time Scale');
gui.add(params, 'startAnimation').name('Start Animation');
gui.add(params, 'stopAnimation').name('Stop Animation');
// Rest of code...

🌍 Your Environment

Software Version(s)
Parcel 2.12.0
Node 20.11.0
npm/Yarn 10.5.0
Operating System Windows
@The2Innkeeper The2Innkeeper changed the title parcel parcel start works but not parcel build Mar 26, 2024
@The2Innkeeper
Copy link
Author

Indeed --no-optimize fixes it, but is it possible to minify while working

@mischnic
Copy link
Member

mischnic commented Apr 5, 2024

The problem is that the three separate <script> tags are minified separately and each end up containing var e = .... One solution would have been to add script type="module", then Parcel would make sure that they don't conflict with each other.

But the better solution is to have a single script tag, see https://github.com/The2Innkeeper/3DWebBallistics/pull/7

@mischnic mischnic closed this as completed Apr 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mischnic @The2Innkeeper