0

I'm currently working on a project using Svelte-Kit (first time using svelte), Vite, TS, and Pixi. When I try and run vite build I get the error Cannot use import statement outside a module. However in my package.json I have "type": "module" and I believe I have everything else configured properly. I've tried importing from pixi.js/dist/esm/pixi.js and also from pixi.js/dist/cjs/pixi.js but both of those fail with errors as well. Not sure what I'm doing wrong here but any help would be greatly appreciated!

Not sure if this matters but I'm also using pnpm for my packages.

(node:42972) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
{path}/node_modules/.pnpm/pixi.js@6.4.2/node_modules/pixi.js/dist/esm/pixi.js:8
import '@pixi/polyfill';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
[SyntaxError: Cannot use import statement outside a module]
 ELIFECYCLE  Command failed with exit code 1.

My assumption is that I'm missing something in my vite.config.js file:

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import adapter from '@sveltejs/adapter-netlify';

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [sveltekit()],
    kit: {
        adapter: adapter({ split: true })
    },

    optimizeDeps: {
        exclude: ['@apollo/client', 'svelte-apollo'],
        include: ['pixi.js']
    },
    ssr: {
        noExternal: ['@apollo/client', 'svelte-apollo']
    }
};

export default config;

I have a Canvas.svelte component that gets imported to the index.svelte file. I'm importing Pixi inside the Canvas.svelte like so:

// Canvas.svelte

<script lang="ts" type="module">
    ...other imports
    import * as PIXI from 'pixi.js';
    ...rest of file
</script>

package.json

...rest of file,
"devDependencies": {
        "@apollo/client": "^3.6.8",
        "@contentful/rich-text-types": "^15.12.1",
        "@sveltejs/adapter-netlify": "1.0.0-next.70",
        "@sveltejs/kit": "next",
        "@types/cookie": "^0.5.1",
        "@types/gsap": "^3.0.0",
        "@types/tinycolor2": "^1.4.3",
        "@typescript-eslint/eslint-plugin": "^5.27.0",
        "@typescript-eslint/parser": "^5.27.0",
        "apollo": "^2.34.0",
        "cookie": "^0.4.1",
        "graphql": "14.0.0",
        "prettier": "^2.6.2",
        "prettier-plugin-svelte": "^2.7.0",
        "sass": "^1.53.0",
        "svelte": "^3.49.0",
        "svelte-apollo": "^0.5.0",
        "svelte-check": "^2.8.0",
        "svelte-preprocess": "^4.10.7",
        "tslib": "^2.4.0",
        "typescript": "^4.7.4",
        "vite": "^3.0.2"
    },
    "type": "module",
    "dependencies": {
        "@fontsource/poppins": "^4.5.8",
        "@pixi/filter-kawase-blur": "^4.1.5",
        "@pixi/polyfill": "^6.4.2",
        "gsap": "^3.10.4",
        "pixi.js": "^6.4.2",
        "svelte-pixi": "^0.1.3",
        "svelte2tsx": "^0.5.11",
        "tinycolor2": "^1.4.2"
    }
Jonathan Lancaster
  • 11
  • 1
  • Please check existing issues / discussion on pixi.js github: https://github.com/pixijs/pixijs/issues?q=is%3Aissue+svelte . If your problem was not yet discussed then please add new one. – domis86 Jul 22 '22 at 06:55
  • @domis86 Thank you for the suggestion! I didn't see that issue but did find a similar one that led me to the answer. For reference it was this issue: https://github.com/pixijs/pixijs/issues/8467 I've posted my solution below! – Jonathan Lancaster Jul 22 '22 at 15:10

1 Answers1

1

Figured it out, looks like during build time it pulls from the esm directory. To resolve I added this in my vite.config.js

resolve: {
  alias: {
    'pixi.js': path.resolve(__dirname, './node_modules/pixi.js/dist/browser/pixi.mjs')
  }
},
Jonathan Lancaster
  • 11
  • 1