Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prism is not defined #2672

Closed
6 tasks done
Shinigami92 opened this issue Mar 24, 2021 · 0 comments · Fixed by #2934
Closed
6 tasks done

Prism is not defined #2672

Shinigami92 opened this issue Mar 24, 2021 · 0 comments · Fixed by #2934
Labels
has workaround p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@Shinigami92
Copy link
Member

Describe the bug

When using lazy imports with e.g. vue-router and the component includes Prism, at production an error is thrown: Prism is not defined

With vite dev everything is working fine.

Vite Land: https://discord.com/channels/804011606160703521/814182556068085760/824219218617827359

Reproduction

https://github.com/Shinigami92/vite-repro-prism-is-not-defined

Workaround: https://github.com/Shinigami92/vite-repro-prism-is-not-defined/compare/workaround-1

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Linux 5.10 Arch Linux
    CPU: (28) x64 Intel(R) Core(TM) i9-10940X CPU @ 3.30GHz
    Memory: 46.70 GB / 62.49 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 15.6.0 - ~/.nvm/versions/node/v15.6.0/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 7.4.0 - ~/.nvm/versions/node/v15.6.0/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ~1.1.5 => 1.1.5 
    vite: ~2.1.2 => 2.1.2

Used package manager: yarn

Logs

yarn run v1.22.10
warning package.json: No license field
$ vite build --debug
  vite:config bundled config file loaded in 176ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite-plugin-vue2',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   build: {
  vite:config     target: [ 'chrome63' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'static',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   server: { port: 18080, proxy: { '/api/v3': [Object] } },
  vite:config   configFile: '/home/shinigami/OpenSource/vite-repro-prism-is-not-defined/vite.config.ts',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/shinigami/OpenSource/vite-repro-prism-is-not-defined',
  vite:config   base: '/',
  vite:config   publicDir: '/home/shinigami/OpenSource/vite-repro-prism-is-not-defined/public',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   optimizeCacheDir: '/home/shinigami/OpenSource/vite-repro-prism-is-not-defined/node_modules/.vite',
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +5ms
vite v2.1.2 building for production...
 23 modules transformed.
dist/index.html                  0.47kb
dist/static/index.859e503a.css   519.62kb / brotli: skipped (large chunk)
dist/static/MyView.643b43c0.js   1.07kb / brotli: 0.50kb
dist/static/index.fe1f5624.js    18.94kb / brotli: 6.71kb
dist/static/vendor.26b75172.js   764.11kb / brotli: skipped (large chunk)

(!) Some chunks are larger than 500kb after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
Done in 7.59s.
Uncaught ReferenceError: Prism is not defined
    at vendor.26b75172.js:1
  (anonymous) @ vendor.26b75172.js:1

image


Before submitting the issue, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the docs.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Provide a description in this issue that describes the bug.
  • Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has workaround p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant