Internal server error preprocessor dependency sass not found did you install it

background

Due to the continuous iteration of project requirements, the requirements for project start-up and packaging speed have also increased. As a result, several of the company’s projects have been migrated from Webpack to Vite.

You can see that Vite is much faster to boot and pack than WebPack.

Vite configuration

1. In the originalreactInstall vite in the project:yarn add vite
2. Manually createvite.config.js(Root directory)

import { defineConfig } from 'vite'; import legacy from '@vitejs/plugin-legacy'; import reactRefresh from '@vitejs/plugin-react-refresh'; import path from 'path'; import fs from 'fs'; import lessToJs from 'less-vars-to-js'; // Override the less variable, Custom style = const theme lessToJs (fs readFileSync (path. Resolve (__dirname `. / SRC/basic/themes/saas. The less `), 'utf8),); Export default defineConfig(// resolve: {alias: {'@': Path. resolve(__dirname, 'SRC '), // @ to SRC '@ant-design/ ICONS /lib/dist': '@ant-design/icons/lib/index.es.js', }, }, define: { global: 'window', globalThis: 'window', }, esbuild: { target: ['es2020'], }, build: { outDir: 'build', assetsDir: 'static', }, plugins: [ reactRefresh(), legacy({ targets: ['defaults', 'not IE 11'], // Advanced usage of failing to compile can introduce modernPolyfills here: ['es.object.from-entries', 'es.array.flat', 'es.global-this'], }), ], css: { modules: { localsConvention: 'camelCase', }, postcss: { // eslint-disable-next-line global-require plugins: [require('autoprefixer')], // automatically add vendor prefix}, preprocessorOptions: {less: {// Antd style using less javascriptEnabled: True, // Override less variable, custom style modifyVars: theme,}, SCSS: {charset: false, additionalData: '$platform: saas; ',}, // Vite also provides built-in support for.scss,.sass,.less,.styl and.stylus files},}, // Server configuration server: {// Proxy configuration: address of the proxy to target when the access path starts with '/' Proxy :{'/': {target: 'http://10.189.73.43:8084', changeOrigin: Headers: {Referer: 'http://fs.sftcwl.com/MMS', Cookie: '... '}}}});Copy the code

1. Create index.html in the root directory and paste in the original public/index.html folder. The public folder is not needed

2. Reference the entry file in index.html. Index. Js to index. JSX

   

3. Configure the vite startup command in package.json.

   "scripts": {
      "dev": "vite --host",
       "build": "tsc  vite build",
       "serve": "vite preview --host",
       "build:publish": "vite build --base=/static/MMS/"
     },
   Copy the code

4. Delete webpack-related configuration files such as config-overrides. Js, node_modules folder, yarn.lock, package-lock.json, and reinstall the dependent files.

   If you encounter the following error message, it is most likely a dependency problem.

   error: Unexpected ""
   Copy the code

1. Modifying environment Variables

Vite access to environment variables needs to be accessed using the import.meta. Environment variable name. Replace process.env with import.meta

Env is configured in a. Env file. Note that the configured variables must start with VITE_, otherwise they will not be found when referenced.

At this point, the preparation of the configuration is complete, let’s start to solve the problem.

Start YARN Dev and an error is reported ~

1. Cannot find module ‘@vitejs/plugin-react-refresh

Yarn add @vitejs/plugin-react-refresh yarn add @vitejs/plugin-react-refresh

2. mock.proxy.js:1:0: error: Transforming const to the configured target environment («es5») is not supported yet

Solution: Change target: es5 to esNext in the tsconfig.json file.

3. Error: Cannot find module ‘@vitejs/plugin-legacy’

Yarn [email protected] /plugin-legacy

4. TypeError: (0 , import_proxy.default) is not a function

Vite does not support the require() import.

Forget to replace require with import in proxy.js file, so this error is reported

5. Replace ts/ JSX with js files

6. [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?

Solution: Install the SASS series, and yarn add SASS (Node-sass, sas-loader)

7. Vite needs to suffix the style file with.module

For example, xxx.module. SCSS, you can replace the. SCSS file with.module. SCSS

Run node rename. Js on the terminal

// rename. Js file const glob = require('glob'); const fs = require('fs'); const files = glob.sync('src/**/*.scss'); files.forEach((oldPath) = { const newPath = oldPath.replace('.scss', '.module.scss'); fs.rename(oldPath, newPath, (err) = { if (err) { console.log('err', oldPath); }}); });Copy the code

8. $platformundefined

Error: this file is defined in the webpack configuration file. You can configure it in vite. Config.js

// Specify the options passed to the CSS preprocessor SCSS: {charset: false, additionalData: '$platform: saas; `,}.Copy the code

9. Replace load with lazy in routes

const Home = load(() = import('@/pages/Home')); Const Home = lazy(() = import('@/pages/Home'));Copy the code

Suspense and lazy problems

Import React, {Suspense, lazy} from ‘React ‘;

Suspense and lazy come in pairs, so it doesn’t work out

11. Property 'env' does not exist on type 'ImportMeta'.

Withstore.ts: import.meta.env.DEV: JSX: ts

Json add «types»: [«vite/client»] to the compilerOptions in tsconfig.json

12. SCSS will report error (warning) when writing the following.

margin-left: -($gap / 2);
margin-right: -($gap / 2);
Copy the code

Using/for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0 Recommendation: math.div($gap, 2) or calc($gap / 2)

The SCSS version does not support the above syntax. The solution is to change the syntax as prompted

 margin-left: - calc($gap / 2);
 margin-right: - calc($gap / 2);
Copy the code

Note: If it is a negative number, add a space between the ‘-‘ sign and calc

13. Global styles disappear

Some pages are referenced as

@value sideWidth, menuBg, menuItemActive from './Global.module.scss';
Copy the code

Vite does not support this method.

@import './Global.module.scss';
Copy the code

14. There was a problem with type TS when packing, but there was no problem after checking around

// @ts-noignore

15. Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "crypto". The package may have incorrect main/module/exports specified in its package.json.

The crypto dependencies have no other files except package.json and readme, so they are no longer maintained

• But ts files are available, JSX files will report the above error

Use JS-MD5 plug-in to solve the problem.

16. Uncaught TypeError: Class extends value #Object is not a constructor or null

The problem is that the Cascader component, which is wrapped in a cascading selector, uses the class component approach, and then layers inside the Cascader component to find that the return value is an object, which is no longer a function and therefore cannot be inherited, and an error is reported.

• Antd returns type function in version 4.8.2

• In 4.17.3 the return type was Object

The solution is to degrade the version or rewrite it as a function component.

17. The font icon on the menu bar is not displayed

Font-size: 16px! Important; line-height: 20px! Important; » span style =» font-size: 16px! Important;

Question: Why does the console print global.module. SCSS every time?