Processing inline JavaScript

🐛 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 parcel-bundler@1.5.1 but works as expected using serve@6.4.9.

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

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

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

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

.babelrc

{
  "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	yarn@1.3.2
Operating System	macOS 10.13.3

[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.

[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?