Using flow with snowpack

[kevinbarabash]

I've tried getting it to work using the following config files:

snowpack.config.js

module.exports = {
    plugins: ["@snowpack/plugin-babel"],
    exclude: [
        "**/node_modules/**/*",
        "**/__tests__/*",
        "**/*_@(test).@(js|jsx)",
    ],
    mount: {
        public: "/",
        javascript: "/_dist_",
    },
};

babel.config.js

module.exports = {
    presets: ["@babel/react"],
    plugins: ["@babel/plugin-transform-flow-strip-types"],
};

But when I run snowpack dev I run into the following error:

[snowpack] Failed to load javascript/shared-package/static-url.js
  Unexpected token (63:33) in /.../javascript/shared-package/static-url.js

The line line in question is:

export default function staticUrl<T: ?string>(maybeRelativeUrl: T): T {

It seems like babel isn't transforming the file. I'm not sure what I'm doing wrong.

[FredKSchott]

Interesting, that error message lives in our package handling logic, which means that file is being treated as an npm package and not a source file. Can you share how you are importing the "javascript/shared-package/static-url.js" file in your package? If you import it by relative path, does the error go away?

Check the docs for info on how to alias your imports, if you are trying to avoid importing this file by relative path.

[kevinbarabash]

The path of static-url.js is an absolute path, sorry for leaving parts of it out. I'll put together a minimal reproduction in a separate repository.

[kevinbarabash]

I tried to reproduce the issue in a separate smaller repo and even copied the file over that causing the issue and it's working there.

In the repo where the issue is all imports of static-url.js should be relative.

[kevinbarabash]

I think I found the issue. One of our node_modules is installed from a local path in the repo and it references static-url.js.

[kevinbarabash]

I was able to fix some of the issues by adding an @local alias and rewriting some of the imports for things like handlebars and jquery to @local/handelbars and @local/jquery. I wish that the alias config allowed named module aliases that point directly to a file in the filesystem, e.g.

{
  alias: {
    handlebars: "./javascript/handlebars/handlebars-bundle.js",
    jquery: "./javascript/jquery/jquery-bundle.js",
  }
}

The current system only seems to allow aliases that point to other modules in the node_modules folder or directory aliases which require prefixing the import with with alias name.

I'm going to see if I can try to add a third type of alias described above. @FredKSchott would you be willing to consider a PR for such addition?

[kevinbarabash]

I ran into a slight issue. I have an npm module called math-input which requires jquery but I'd like to use a custom version of jquery that points to a local src file in my project. It looks like rollup is trying to include jquery as it builds math-input. I'd like to make jquery external to math-input. jquery is currently listed under dependencies in math-input's package.json. Is moving to peerDependencies sufficient make it external?

[FredKSchott]

Oh interesting, you may need to do something creative with npm until we add support for aliasing a single file. Npm supports installing a file as a package, like this:

// package.json
"dependencies": {
  "jquery": "file:./src/jquery.js"
}

If you do this, then npm install may take care of everything, and no alias needed on Snowpack's part.

[kevinbarabash]

I was able to get around the issue by adding jquery to the list of externals passed to rollup. It's hacky but it seems too work. I haven't checked to see if the generate file transformed "jquery" to "/web_modules/jquery" though so there may still be some work to do in this regard.

[kevinbarabash]

"jquery": "file:./src/jquery.js"

Is already in our package.json. The issue is that our custom build imports other files from ./src that contain flow annotations. If we treat it as a package import instead of an alias import that resolves to a path (instead a package), snowpack/rollup will try to build a web module for it and then gets hung up on the file with flow types that ./src/jquery/jquery-bundle.js imports.

We only use file paths for a few of our deps in package.json and the rest of webpack aliases. We really should get rid of them altogether because updating the code in them requires bumping the version number of the package.json itself and then running yarn install which copies over the files from the src directory to node_modules.

[FredKSchott]

hmm, okay I think i'm following but not sure how solve other than generally improving our alias support to support file aliases. If there are any other improvements that you can think of that I'm missing, feel free to call them out!