Parcel: Processing inline JavaScript

[blogscot]

🐛 bug report

In his blog post, Joe Archibald wrote the following example to demonstrate the use of ECMAScript modules in browsers. Unfortunately, this is broken when using [email protected] but works as expected using [email protected].

<script type="module">
  import {addTextToBody} from './utils.js';

  addTextToBody('Modules are pretty cool.');
</script>

```js
// utils.js
export function addTextToBody(text) {
const div = document.createElement('div');
div.textContent = text;
document.body.appendChild(div);
}

<!--- Provide a general summary of the issue in the title above -->

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

.babelrc
```js
{
  "presets": ["env", "stage-3"]
}

package.json

{
  "name": "playground",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html"
  },
  "dependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1"
  }
}

🤔 Expected Behavior

The example should render the text, "Modules are pretty cool."

😯 Current Behavior

Firefox reports the following error:

Loading failed for the <script> with source “http://localhost:1234/utils.js”.

Chrome reports:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Safari reports:

TypeError: 'text/html' is not a valid JavaScript MIME type.

💁 Possible Solution

Unknown

🔦 Context

I am unaffected by this bug, as I have already found a work-around.

💻 Code Sample

Example code provided in initial bug report.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.5.1
| Node | v9.3.0
| npm/Yarn | [email protected]
| Operating System | macOS 10.13.3

[DeMoorJasper]

inline javascript is currently not supported.
Related to #784

[OleksiyRudenko]

@blogscot , can you please share the workaround? Faced a similar issue with ES6 modules. Thanks!

[blogscot]

@OleksiyRudenko , the workaround I was referring to is to not use parcel-bundler but serve instead. 😱

That's probably not the answer you were hoping for. 😞

[OleksiyRudenko]

@blogscot , thanks anyway :) I wish we can have some day a real one-click app building tool.

[davidnagli]

@DeMoorJasper @devongovett Is there any real reason why we’re not able to handle inline scripts? I don’t really see why we can’t just split out any JavaScript between script tags and process it with JSAsset.

Is this a real feature that we should be focusing on implementing?

[DeMoorJasper]

@davidnagli u could indeed simply extract js from a script tag and process it with JSAsset, but it's currently just not inside parcel

[devongovett]

The problem is what to do with that JS after we process it. Currently, all asset types produce an output file. But with inline JS, you'd probably want to inject that JS back into the HTML so it remained inline rather than producing a separate file. That would be hard to do in the current architecture.