Parse error: Snowpack fails to parse first tsx file for imports

[fgblomqvist]

I had a working build sometime mid-last-week, both on 3.0.13 and 3.1.0-pre-something.
However, working on debugging #2895 and #1639 for a while, I wasn't able to get back to a working build (I foolishly didn't commit the working build separately).

I'm now just getting this:

[10:43:46] [snowpack] Build Result Error: There was a problem with a file build result.
[10:43:46] [snowpack] Parse error @:189:1
[10:43:46] [snowpack] Error: Parse error @:189:1
    at parse$a (snowpack/lib/index.js:40083:355)
    at scanCodeImportsExports (snowpack/lib/index.js:48380:29)
    at transformEsmImports (snowpack/lib/index.js:48396:27)
    at Object.transformFileImports (snowpack/lib/index.js:48467:16)
    at FileBuilder.resolveImports (snowpack/lib/index.js:112296:45)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.loadUrl (snowpack/lib/index.js:131252:39)
    at async flushFileQueue (snowpack/lib/index.js:131646:28)
    at async build (snowpack/lib/index.js:131672:5)
    at async Object.command (snowpack/lib/index.js:131760:9)
    at async cli (snowpack/lib/index.js:132069:9)

As soon as I run the build (both in dev and build mode). As in, this is the first js/ts/tsx file it tries to parse. Turning on verbose exposes this:

[10:43:46] [snowpack] BUILD: /dist/App.js
[10:43:46] [@snowpack/plugin-esbuild] load() starting… [src/App.tsx]
[10:43:46] [@snowpack/plugin-esbuild] ✔ load() success [src/App.tsx]
[10:43:46] [@snowpack/plugin-react-refresh] transform() starting… [src/App.js]
[10:43:46] [@snowpack/plugin-react-refresh] ✔ transform() success [src/App.js]
[10:43:46] [snowpack-plugin-replace] transform() starting… [src/App.js]
[10:43:46] [snowpack-plugin-replace] ✔ transform() success [src/App.js]
[10:43:46] [snowpack] Scanning src/App.tsx for imports as JS
[10:43:46] [snowpack] Build Result Error: There was a problem with a file build result.
[10:43:46] [snowpack] Parse error @:189:1
[10:43:46] [snowpack] Error: Parse error @:189:1
<stack trace>

I'm not sure what's going wrong here, but seems like Snowpack is simply incorrectly believing that the TS file is JS. I want to say that something has changed in my code since I can't even get things to work with 3.0.13 anymore, but I just can't figure out what. What could cause something like this?

[fgblomqvist]

Looks like it's intended to be parsed as JS, and that it's the es-module-lexer that's throwing.

[fgblomqvist]

Worth noting is that nothing changed in this file (App.tsx) between and when I had the build working. The fact that it's also the first file it tries to parse leads me to believe that something just isn't right with the parser.

[fgblomqvist]

Snowpack config:

const { definitions } = require('./scripts/globalDefinitions');
const httpProxy = require('http-proxy');

const proxy = httpProxy.createServer({ target: 'http://localhost:60000' });

// Create RegEx replace patterns for all of the global definitions
const subs = Object.entries(definitions).map(([k, v]) => ({
  from: new RegExp(k, 'g'),
  to: v,
}));

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  alias: {
    src: './src',
  },
  buildOptions: {},
  devOptions: {},
  mount: {
    public: { static: true, url: '/' },
    src: { url: '/dist' },
  },
  optimize: {},
  packageOptions: {},
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-typescript',
    [
      '@snowpack/plugin-sass',
      {
        compilerOptions: {
          loadPath: './',
        },
      },
    ],
    'snowpack-plugin-svgr',
    [
      '@snowpack/plugin-run-script',
      {
        cmd: 'eslint --ext=.js,.jsx,.ts,.tsx --color $PWD',
        watch: 'esw -w --clear src --ext .js,jsx,.ts,.tsx --color $PWD',
      },
    ],
    [
      'snowpack-plugin-replace',
      {
        list: subs,
      },
    ],
  ],
  routes: [
    {
      dest: (req, res) => {
        // remove /api prefix (optional)
        req.url = req.url.replace(/^\/api/, '');

        proxy.web(req, res);
      },
      src: '/api/.*',
    },
  ],
};

tsconfig

{
  "compilerOptions": {
    "module": "es2020",
    "target": "es2019",
    "moduleResolution": "node",
    "jsx": "preserve",
    "baseUrl": "./",
    /* paths - import rewriting/resolving */
    "paths": {
      // If you configured any Snowpack aliases, add them here.
      // Add this line to get types for streaming imports (packageOptions.source="remote"):
      //     "*": [".snowpack/types/*"]
      // More info: https://www.snowpack.dev/guides/streaming-imports
    },
    /* noEmit - Snowpack builds (emits) files, not tsc. */
    "noEmit": true,
    /* Additional Options */
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    // TODO: Enable and fix this eventually
    "importsNotUsedAsValues": "remove",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "build/**/*",
    "public/**/*"
  ]
}

[fgblomqvist]

Turns out the replacements I was doing with snowpack-plugin-replace went wrong after a refactor of that code. E.g. things like foo(BAR) would be turned into foo(hello world) instead of foo("hello world") 🤦 , case closed.