plugins VS ts-jest

But when I start a production bundling + build process, which I guess is actually made with rollup, I see Unexpected token (Note that you need plugins to import files that are not JavaScript). Lookin around, it seems like this is a rollup error, not a vite error.

rollup v3.2.3 bundles ./src/index.js → dist/bundle.js... babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers [!] (plugin commonjs--resolver) SyntaxError: Unexpected token (12:2) in /Users/krishna404/codeProjects/All_SmartAgent/desktopSmartAgent/src/index.js src/index.js (12:2) 10: import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; 11: ReactDOM.render( 12: ^ 13:

Next, we need to tell Rollup which of the modules used in our code are external to our library. Together with @rollup/plugin-node-resolve, this ensures that Rollup doesn't bundle those dependencies into our final bundle. The function makeExternalPredicate() generates the list of package names specified in dependencies and peerDependencies in package.json. All credit for this and a big thank you goes out to Mateusz Burzyński for providing it in this issue:

// If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'], }), commonjs(), // In dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser(), ], watch: { clearScreen: false, },

Then in this case, if you don't want to use Vite's dynamic imports, you can conditionally use this plugin in your vite config under rollupOptions. https://github.com/rollup/plugins/tree/master/packages/inject. This way you won't even need to use env vars.

compilerOptions: { // enable run-time checks when not in production dev: !production } }), // we'll extract any component CSS out into // a separate file - better for performance css({ output: 'bundle.css' }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'] }), commonjs(), // In dev mode, call \npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser() ], watch: { clearScreen: false } };`

You should submit an issue there: https://github.com/rollup/plugins/tree/master/packages/commonjs

In Webpack 5, this is (surprisingly) simple to setup. Parcel 2 handles this out of the box with a special import prefix. Rollup has an official plugin.

The only workaround to have an isomorphic __dirname or __filename to be used for both "cjs" and "esm" without using build-time tools like @rollup/plugin-replace or esbuild "define" would be using a library like filedirname that does a trick inspecting error stacks, it's clearly not the cleanest solution.

import svelte from 'rollup-plugin-svelte'; import commonjs from '@rollup/plugin-commonjs'; import resolve from '@rollup/plugin-node-resolve'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import css from 'rollup-plugin-css-only'; import sveltePreprocess from 'svelte-preprocess'; const production = !process.env.ROLLUP_WATCH; function serve() { let server; function toExit() { if (server) server.kill(0); } return { writeBundle() { if (server) return; server = require('child_process').spawn( 'npm', ['run', 'start', '--', '--dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true, } ); process.on('SIGTERM', toExit); process.on('exit', toExit); }, }; } export default { input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/build/bundle.js', }, plugins: [ svelte({ preprocess: sveltePreprocess({ sourceMap: !production, postcss: { plugins: [require('tailwindcss'), require('autoprefixer')], }, }), compilerOptions: { // enable run-time checks when not in production dev: !production, }, }), // we'll extract any component CSS out into // a separate file - better for performance css({ output: 'bundle.css' }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'], }), commonjs(), // In dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser(), ], watch: { clearScreen: false, }, };

use ts-jest and set up Paths Re-Map

Jest's out of the box config for TS doesn't do any type checking. You can integrate https://kulshekhar.github.io/ts-jest/ or you can call ‘tsc’ yourself separately

ts-jest has had some strange performance issues and workarounds in the past, though I haven’t used it very recently so it might have fixed those by now.

Since we're working with TypeScript, we can use ts-jest, which conveniently brings Jest along for the ride:

I want to save you from manually copying the snippets one by one, so here is a Gist with the complete test file. This can be easily executed with Jest (or ts-jest for TypeScript).

See the Jest configuration docs to learn more about Jest configuration. ts-jest also has good documentation.

Using @swc/jest to compile code to CommonJS is much faster than babel-jest, ts-jest which have long cold starts when executing tests in a large project.

ts-jest: A transformer for handling TypeScript files.

Anyway, I ran into this exact error this morning setting up Jest for a TS script. I fixed it by just following the getting started instructions for Jest as well as ts-jest.