Library cannot be imported by Vite

[DanielStout5]

Describe the bug Additional details: https://github.com/vitejs/vite/issues/14605

Importing this library with Vite logs these errors:

1. Module "module" has been externalized for browser compatibility. Cannot access "module.createRequire" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
2. Uncaught (in promise) TypeError: import_module.createRequire is not a function

I think that's because the library uses this UMD pattern:

!function(e, t) {
    "object" == typeof exports && "object" == typeof module 
        ? module.exports = t(require("prettier")) 
        : "function" == typeof define && define.amd 
          ? define(["prettier/standalone"], t) 
          : "object" == typeof exports 
            ? exports.prettierPluginLiquid = t(require("prettier")) 
            : e.prettierPluginLiquid = t(e.prettier)
}

The library shouldn't assume that just because module.exports exists that the library will be used in NodeJS

[charlespwd]

Can you give me a bit more context on your build? Is this a vite bundle that should run in browser? in VS Code extension? node CLI?

Because if you are trying to run this in browser, I believe you want @shopify/prettier-plugin-liquid/standalone & prettier/standalone.

Otherwise, I'd need to dig into those package.json entries and see what we could do to resolve this.

[DanielStout5]

Sure! It's a Vite bundle that should run in the browser - here's how I was importing it:

    import prettier from 'prettier/standalone';
    import liquidPlugin from '@shopify/prettier-plugin-liquid/standalone';

And in package.json:

        "prettier": "3.0.3",
        "@shopify/prettier-plugin-liquid": "1.3.2"

[charlespwd]

Oh so the problem happens with the standalone build (!). Ugh 😓 OK we'll look into that

[chrisahardie]

@charlespwd I just ran into this issue after upgrading to Prettier 3.2.8.

[plugin:vite:resolve] Module "module" has been externalized for browser compatibility, imported by "/Users/chrishardie/src/github.com/Shopify/mozart/node_modules/prettier/index.mjs". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

error during build: RollupError: "createRequire" is not exported by "__vite-browser-external", imported by "node_modules/prettier/index.mjs".

Looking at the webpack config used for the standalone build, with the exception of amd we point to prettier, but given we're building for the browser we need prettier/standalone so we don't have Node module dependencies.

Let me know if you need more details, I have a branch with a repro if that would help. Thanks!

[charlespwd]

@chrisahardie I would love that. PRs are also absolutely welcome, ngl this is at the very bottom of my list of priorities. I tried looking into it for like an hour or two a while back and didn't get anywhere.

[chrisahardie]

@charlespwd No worries, it's not urgent, just wanted to flag it.

This branch has the [build failure](https://buildkite.com/shopify/mozart-e2e-test/builds/35178#018ec939-1e14-4447-b39f-bbdc44b288e3.