Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Babel Standalone Typescript Preset allExtensions not working

See original GitHub issue

Bug Report

Input Code

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>

  <body>
    The content of the document......
    <div id="output"></div>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script>
      Babel.registerPreset("my-preset", {
        presets: [
          [Babel.availablePresets["typescript"], { allExtensions: true }]
        ]
      });
    </script>
    <!-- Your custom script here -->
    <script src="index.ts.js" type="text/babel" data-type="module" data-presets="my-preset"></script>

  </body>

</html>

// index.ts.js
import message from './message.ts.js';
document.getElementById('output').innerHTML = message;

// message.ts.js
let message: number = null;
message = 300;
export default message;

I get the error:

Uncaught SyntaxError: Unexpected token ':'

from message.ts.js in the browser.

I wish i could call the file .ts but Browser only allows loading .js files because of strict mime type checking when loading files via import statement.

Expected behavior This should work since allExtensions should parse any file as a Typescript File.

Or am i missing something here ? Documentation says:

Indicates that every file should be parsed as TS or TSX (depending on the isTSX option).

Issue Analytics

State:
Created 3 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

3reactions

nicolo-ribaudocommented, Sep 10, 2020

Browsers doesn’t support hooking into import statements: we can only transpile files directly included with <script> tags.

2reactions

jsejcksncommented, Nov 24, 2021

@nicolo-ribaudo Thanks for clarifying. Now I have one more question, since I can’t find documentation (or even answers on Stack Overflow) on how to use @babel/standalone with TypeScript React code: it seems that using the typescript preset alone isn’t enough, even with isTSX and allExtensions set to true.

Here’s an example. Ignoring the actual React code, can it be simplified somehow? I’m specifically wondering about the arguments passed to Babel.registerPreset in combination with the value of the data-presets attribute on the last <script> tag. What’s the minimum configuration necessary to simply strip types and then transform the JSX so it runs in a modern browser (e.g. V8/Chrome)?

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script>
<script>
  Babel.registerPreset('tsx', {
    presets: [
      [Babel.availablePresets['typescript'], {allExtensions: true, isTSX: true}]],
    },
  );
</script>

<div id="root"></div>

<script type="text/babel" data-type="module" data-presets="tsx,react">

function Counter (): React.ReactElement {
  const [count, setCount] = React.useState<number>(0);
  const handleClick = React.useCallback(() => setCount(n => n + 1), [setCount]);
  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

ReactDOM.render(<Counter />, document.getElementById('root'));

</script>

Top Results From Across the Web

babel/preset-typescript

This is so that we know that the import is not a type import, and should not be removed. allExtensions. boolean , defaults...

Use typescript with Babel 7 Standalone - Stack Overflow

In order to transpile typescript with Babel standalone, a filename must be specified in the settings passed to Babel.transform , otherwise a ...

babeljs typescript Code Example - Code Grepper

"compilerOptions": { // Ensure that .d.ts files are created by tsc, but not .js files "declaration": true, "emitDeclarationOnly": true, // Ensure that Babel...

@babel/preset-typescript · Babel 中文网

Replace the function used when compiling JSX fragment expressions. This is so that we know that the import is not a type import,...

JSX | Code Cookbook - Michael Currin

You can add Babel Standalone as a package on your frontend. ... From my own testing, it looks like this approach does not...