hood / vite-plugin-shadow-style

A Vite plugin to inject css styles into the shadow root of web components.
17 stars 3 forks source link

[ERR_MODULE_NOT_FOUND] #1

Closed jongbelegen closed 8 months ago

jongbelegen commented 8 months ago

Thanks for the plugin, it is just what I needed!

When installing the package:

pnpm add vite-plugin-shadow-style

And configuring it:

export default defineConfig({
  plugins: [preact(), shadowStyle()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "assets/widget.js",
      },
    },
  },
});

I'm getting the following error when running the build command:

failed to load config from *REDACTED_PATH*/widget/vite.config.ts
error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '*REDACTED_PATH*/node_modules/.pnpm/vite-plugin-shadow-style@1.0.2/node_modules/vite-plugin-shadow-style/dist/lib/constants' imported from *REDACTED_PATH*/node_modules/.pnpm/vite-plugin-shadow-style@1.0.2/node_modules/vite-plugin-shadow-style/dist/plugin.js

Adding the extension on all relative import paths seems te resolve the problem.

// before
import { PLUGIN_NAME } from "./lib/constants";

// after
import { PLUGIN_NAME } from "./lib/constants.js";

After reading this issue it seems that we cannot configure this in the typescript transpiler.

env:


pnpm -v 8.1.0
node -v v16.19.1
hood commented 8 months ago

Hi, and thanks a lot for using this plug-in!

I’ve updated the module resolution in my tsconfig.json file to use Node’s module resolution, which should use a more proper resolution strategy (require) for the output files. Could you check if v1.0.3 of this plug-in solves the issue?

jongbelegen commented 8 months ago

Using v1.0.3 gave me the following error:

failed to load config from **REDACTED**/widget/vite.config.ts
error during build:
    file://**REDACTED**/widget/vite.config.ts.timestamp-1699361443861-5b17445049691.mjs:4
        import { shadowStyle } from "file://**REDACTED**/widget/node_modules/.pnpm/vite-plugin-shadow-style@1.0.3/node_modules/vite-plugin-shadow-style/dist/plugin.js";
^^^^^^^^^^^
SyntaxError: The requested module 'file://**REDACTED**/widget/node_modules/.pnpm/vite-plugin-shadow-style@1.0.3/node_modules/vite-plugin-shadow-style/dist/plugin.js' does not provide an export named 'shadowStyle'

I'm okay with using commonjs but that only works when you remove:

"type": "module"

I'll make a PR with that fix

hood commented 8 months ago

Yes, unfortunately I didn’t fix it properly, trying to rush for a solution while traveling. Thank you for contributing a proper fix to this issue!