cmalven / vite-plugin-sass-glob-import

Use glob syntax for imports in your main Sass or SCSS file.
MIT License
18 stars 7 forks source link

Can't import plugin. #9

Closed NPanayotov closed 1 year ago

NPanayotov commented 1 year ago

Hi,

I get a strange bug trying to import the plugin.

Here is the error:

failed to load config from /Users/nate/base-template/vite/vite-template/vite.config.js
error when starting dev server:
TypeError: sassGlobImports is not a function
    at file:///Users/nate/base-template/vite/vite-template/vite.config.js.timestamp-1671540244901.mjs:40:5
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:526:24)
    at async loadConfigFromBundledFile (file:///Users/nate/base-template/vite/vite-template/node_modules/vite/dist/node/chunks/dep-6305614c.js:63111:21)
    at async loadConfigFromFile (file:///Users/nate/base-template/vite/vite-template/node_modules/vite/dist/node/chunks/dep-6305614c.js:62996:28)
    at async resolveConfig (file:///Users/nate/base-template/vite/vite-template/node_modules/vite/dist/node/chunks/dep-6305614c.js:62617:28)
    at async createServer (file:///Users/nate/base-template/vite/vite-template/node_modules/vite/dist/node/chunks/dep-6305614c.js:61937:20)
    at async CAC.<anonymous> (file:///Users/nate/base-template/vite/vite-template/node_modules/vite/dist/node/cli.js:729:24)
error Command failed with exit code 1.

TypeError: sassGlobImports is not a function

I was able to fix the issue by calling the function like this:

plugins: [
        sassGlobImports.default(),
    ],

I'm not sure if this is an issue with the plugin or with my code.

Node -v = 16 Vite -v = 4

cmalven commented 1 year ago

@NPanayotov Thanks for the issue. I don't see anything obvious here, but it would help if you could share your full Vite config so I can try to duplicate the issue.

NPanayotov commented 1 year ago

@cmalven thank you for looking into this.

Here is my full config.

import { defineConfig } from 'vite';
import handlebars from 'vite-plugin-handlebars';
import createExternal from 'vite-plugin-external';
import externalGlobals from 'rollup-plugin-external-globals';
import { resolve } from 'path';
import glob from 'glob';
import sassGlobImports from 'vite-plugin-sass-glob-import';

const root = resolve(__dirname, 'src');
const outDir = resolve(__dirname, 'build');

export default defineConfig({
    base: '',
    root,
    build: {
        outDir,
        rollupOptions: {
            input: glob.sync(resolve(root, '.\/*.html').replace(/\\/g, '/')),
            output: {
                assetFileNames: "assets/[name].[ext]",
                entryFileNames: `assets/[name].js`,
                chunkFileNames: `assets/app.js`, 
            },
        },
        emptyOutDir: true,
        minify: false,
    },
    plugins: [
        handlebars({
            partialDirectory: resolve(root, 'partials'),
        }),
        externalGlobals({
            jquery: 'jQuery'
        }),
        createExternal({
            externals: {
                jquery: 'jQuery'
            }
        }),
        sassGlobImports.default(),
    ],
});
deRaaf commented 1 year ago

Got the same issue with a simpler config

export default defineConfig({
  plugins: [react(), sassGlobImports()],
  resolve: {
    alias: {
      "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
    },
  },
});

(vite 4)

cmalven commented 1 year ago

@NPanayotov @deRaaf Are either of you using "type": "module" in your package.json? I'm getting a similar issue with another popular Vite plugin (https://www.npmjs.com/package/vite-plugin-restart) but only when using "type": "module". However, this plugin doesn't cause that issue for me even when using module so I still have no idea what the problem could be.

If you could share a repo that reproduces your issue - ideally removing as much unrelated config as possible - I can take a look at that and see if I can figure things out.

NPanayotov commented 1 year ago

@cmalven happy holidays. I hope you're doing well.

I'm using type module in the package.json.

You can check my implementation here - https://github.com/NPanayotov/vite-template

deRaaf commented 1 year ago

I'm also using type: module, I will see if I can share something in the coming days.

cmalven commented 1 year ago

I think there's a good chance both of your issues will be fixed by updating this package to ^2.0.0 in your package.json I just tried this on the repo @NPanayotov provided and it seems to have resolved it.

NPanayotov commented 1 year ago

I can confirm this is fixed.

Thank you for looking into it.