Require RSM Error: Must use import to load ES Module

[m-shum]

Environment

MacOS: 12.6 Node: 14.18.1 Vite: ^3.0.9

Steps to reproduce

• Follow plugin installation guidelines
• Run npm run dev

Expected result vite-plugin-glsl is imported & added to vite config

Actual result Import error:

failed to load config from /Users/michael/Sites/photoalbum/vite.config.js
error when starting dev server:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/michael/Sites/photoalbum/node_modules/vite-plugin-glsl/src/index.js
require() of ES modules is not supported.
require() of /Users/michael/Sites/photoalbum/node_modules/vite-plugin-glsl/src/index.js from /Users/michael/Sites/photoalbum/vite.config.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/michael/Sites/photoalbum/node_modules/vite-plugin-glsl/package.json.

Additional information See my vite.config.js below:

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import { glsl } from 'vite-plugin-glsl'
import StylelintPlugin from 'vite-plugin-stylelint'
export default defineConfig({
  lintOnSave: true,
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/scss/utils/breakpoints.scss" as *;
          @use "@/assets/scss/_mixins.scss" as *;
          @use "@/assets/scss/utils/reset.scss" as *;
          @use "@/assets/scss/_variables.scss" as *;
        `,
      },
    },
  },
  plugins: [
    glsl({
      include: [
        // Glob pattern, or array of glob patterns to import
        '**/*.glsl',
        '**/*.wgsl',
        '**/*.vert',
        '**/*.frag',
        '**/*.vs',
        '**/*.fs',
      ],
      exclude: undefined, // Glob pattern, or array of glob patterns to ignore
      warnDuplicatedImports: true, // Warn if the same chunk was imported multiple times
      defaultExtension: 'glsl', // Shader suffix when no extension is specified
      compress: false, // Compress output shader code
      watch: true, // Recompile shader on change
      root: '/',
    }),
    vue(),
    vueJsx(),
    StylelintPlugin({
      fix: true,
      quite: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    port: 3000,
  },
})

дуже дякую!

[UstymUkhman]

Hi! I think it has to be: import glsl from 'vite-plugin-glsl'

If that still won't fix this error, could you also share your package.json here? Thanks!

[m-shum]

Changing the import statement unfortunately didn't resolve the issue. Here's my package.json:

{
  "name": "photoalbum",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173",
    "lint": "npm run lint:scripts && npm run lint:styles",
    "lint:scripts": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:styles": "stylelint \"**/*.{css,scss,vue}\" --ignore-path .gitignore",
    "serve": "vite preview"
  },
  "lint-staged": {
    "*.{css,scss}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.{js,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.md": "prettier --write"
  },
  "dependencies": {
    "@sanity/client": "^3.4.1",
    "@sanity/image-url": "^1.0.1",
    "glslCanvas": "^0.1.7",
    "i": "^0.3.7",
    "lodash.debounce": "^4.0.8",
    "mitt": "^3.0.0",
    "npm": "^8.19.2",
    "pinia": "^2.0.21",
    "sanity-blocks-vue-component": "^1.0.1",
    "three": "^0.145.0",
    "vue": "^3.2.38",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vitejs/plugin-vue-jsx": "^2.0.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "gsap": "^3.11.3",
    "postcss-easings": "^3.0.1",
    "postcss-html": "^1.5.0",
    "postcss-scss": "^4.0.5",
    "prettier": "^2.7.1",
    "sass": "^1.55.0",
    "stylelint": "^14.13.0",
    "stylelint-config-prettier-scss": "^0.0.1",
    "stylelint-config-recommended-vue": "^1.4.0",
    "stylelint-config-standard-scss": "^5.0.0",
    "stylelint-order": "^5.0.0",
    "stylelint-prettier": "^2.0.0",
    "vite": "^3.0.9",
    "vite-plugin-glsl": "^0.5.3",
    "vite-plugin-stylelint": "^3.0.7"
  }
}

[UstymUkhman]

Ah, ok then, thanks! Add "type": "module" to your package.json, that should work. Feel free to check this issue for additional information.

[m-shum]

That works! Thank you so much!

[UstymUkhman]

No problem, був радий допомогти. 🙂 Also, please consider ⭐ing this plugi if you've found it any useful, thanks!