@snowpack/app-template-react-typescript: how to enable ts transpile from node_modules?

[Akiyamka]

We have our package registry where we store just ts source files under namespace.
Today i try migrate from webpack to snowpack with @snowpack/app-template-react-typescript, but i stuck on error

[snowpack] Failed to load node_modules/@k2-packages/bivariate-tools/src/index.ts
  Unexpected token (Note that you need plugins to import files that are not JavaScript)

Look like ts plugin ignore node_modules folder, even after i change in tsconfig.json this rules

  "include": ["src", "types", "node_modules/@k2-packages"],
  "exclude": [],

Any ideas what I forgot?

[FredKSchott]

Thanks for filing! This warning is telling you that a dependency is written as TypeScript, which is unexpected. Most packages, even ones that were originally authored in TypeScript, should be published as JS so that everyone can use them. It sounds like you're already aware of that and that this is a custom package registry thing, but just wanted to explain for others.

You can solve for this by adding an installer plugin to handle TypeScript. It looks like our docs on this are a bit out of date, but you can see an example here: https://www.snowpack.dev/#node-built-in-could-not-be-resolved

For you, this would be:

// snowpack.config.js
// Plugin: https://github.com/rollup/plugins/tree/master/packages/typescript
module.exports = {
  installOptions: {
    rollup: {
      plugins: [require('@rollup/plugin-typescript')()],
    },
  },
};

This tells Snowpack to run your dependencies through this extra TS plugin.

[Akiyamka]

Wow, @FredKSchott thanks for the awesome answer - that solve problem with ts files in node_modules!
If snowpack still fail with "Cannot find module 'tslib/tslib.es6.js'" just add tsc as dependency.

I also want to add that if tsx support is also needed (my case), and you see this error

 Failed to load node_modules/@k2-packages/map/src/index.tsx
  Unexpected token (Note that you need plugins to import files that are not JavaScript)

Use this guide for configurate rollup
https://www.npmjs.com/package/@rollup/plugin-typescript#preserving-jsx-output
In case you use react - snowpack config must look like

module.exports = {
  "extends": "@snowpack/app-scripts-react",
  "installOptions": {
    "rollup": {
      "cornInjectPlugins": [require('acorn-jsx')()],
      "plugins": [
        require('@rollup/plugin-typescript')({ jsx: 'react' }),
      ],
    }
  }
}

[ebeloded]

I have the same situation as described in the original message: there are packages written in typescript that shared between projects using yarn workspaces. I am trying to figure out a way to import these packages into a snowpack-built app.

I tried this, but it didn't work

packageOptions: {
  source: 'local',
  rollup: {
    plugins: [require('@rollup/plugin-typescript')()],
  },
}

[tony]

If you snow snowpack build --verbose could you share the output?

I'm also in a yarn monoreo with TS shared between projects

[07:20:24] [@snowpack/plugin-babel] ✔ load() success [../../node_modules/@chakra-ui/layout/dist/esm/container.js]
[07:20:24] [@snowpack/plugin-react-refresh] transform() starting… [../../node_modules/@chakra-ui/layout/dist/esm/container.js]
[07:20:24] [@snowpack/plugin-react-refresh] ✔ transform() success [../../node_modules/@chakra-ui/layout/dist/esm/container.js]
[07:20:24] [esinstall] FAILURE: Error: Could not load /home/t/work/myproject/node_modules/gatsby/cache-dir/gatsby-browser-entry.js (imported by snowpack-wrap:/home/t/work/myproject/node_modules/gatsby/cache-dir/gatsby-browser-entry.js): /home/t/work/myproject/node_modules/gatsby/cache-dir/gatsby-browser-entry.js: Support for the experimental syntax 'jsx' isn't currently enabled (26:5):

  24 |
  25 |   return (
> 26 |     <React.Fragment>
     |     ^
  27 |       {finalData && render(finalData)}
  28 |       {!finalData && <div>Loading (StaticQuery)</div>}
  29 |     </React.Fragment>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
[07:20:24] [snowpack] Could not load /home/t/work/myproject/node_modules/gatsby/cache-dir/gatsby-browser-entry.js (imported by snowpack-wrap:/home/t/work/myproject/node_modules/gatsby/cache-dir/gatsby-browser-entry.js): /home/t/work/myproject/node_modules/gatsby/cache-dir/gatsby-browser-entry.js: Support for the experimental syntax 'jsx' isn't currently enabled (26:5):

  24 |
  25 |   return (
> 26 |     <React.Fragment>
     |     ^
  27 |       {finalData && render(finalData)}
  28 |       {!finalData && <div>Loading (StaticQuery)</div>}
  29 |     </React.Fragment>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
[07:20:24] [snowpack] SyntaxError: /home/t/work/myproject/node_modules/gatsby/cache-dir/gatsby-browser-entry.js: Support for the experimental syntax 'jsx' isn't currently enabled (26:5):

  24 |
  25 |   return (
> 26 |     <React.Fragment>
     |     ^
  27 |       {finalData && render(finalData)}
  28 |       {!finalData && <div>Loading (StaticQuery)</div>}
  29 |     </React.Fragment>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at Parser._raise (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:816:17)
    at Parser.raiseWithData (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:809:17)
    at Parser.expectOnePlugin (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:9908:18)
    at Parser.parseExprAtom (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:11301:22)
    at Parser.parseExprSubscripts (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:10881:23)
    at Parser.parseUpdate (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:10861:21)
    at Parser.parseMaybeUnary (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:10839:23)
    at Parser.parseExprOps (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:10696:23)
    at Parser.parseMaybeConditional (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:10670:23)
    at Parser.parseMaybeAssign (/home/t/work/myproject/node_modules/@babel/parser/lib/index.js:10633:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.