I am migrating my project from webpack to vite bundler. And for some reason I receive the following error:
Uncaught SyntaxError: import not found: sticky
where sticky is the class declared as global in my container.module.scss file:
@use "@styles/abstracts/_functions.scss" as f;
.container {
max-width: f.ptr(1520px);
padding: 0 min(max(10px, 2vw), 24px);
}
:global(.sticky) {
position: sticky;
}The same error arises in other places where :global() declaration is used. Any idea why the error occurs and how to solve it?
package.json
{
"name": "vitrinafrontend",
"version": "1.0.0",
"description": "frontend part of vitrina app",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lintJs": "eslint src/**/*.{js,jsx,ts,tsx}",
"lintStyles": "stylelint --fix src/**/*.{css,scss,sass}",
"format": "prettier --write src/**/*.{js,jsx,ts,tsx}"
},
"devDependencies": {
"@babel/core": "^7.23.2",
"@babel/preset-env": "^7.23.2",
"@babel/preset-react": "^7.22.15",
"@rollup/plugin-image": "^3.0.3",
"@tanstack/eslint-plugin-query": "^5.20.1",
"@tsconfig/create-react-app": "^2.0.1",
"@types/axios": "^0.14.0",
"@types/node": "^20.8.6",
"@types/react": "^18.2.28",
"@types/react-dom": "^18.2.13",
"@types/redux-saga": "^0.10.5",
"@typescript-eslint/eslint-plugin": "^6.8.0",
"@typescript-eslint/parser": "^6.8.0",
"@vitejs/plugin-react": "^4.2.1",
"babel-loader": "^9.1.3",
"eslint": "^8.51.0",
"eslint-config-prettier": "^9.0.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-import-resolver-webpack": "^0.13.7",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.7",
"eslint-webpack-plugin": "^4.0.1",
"husky": "^8.0.3",
"lint-staged": "^15.0.1",
"postcss": "^8.4.31",
"postcss-loader": "^7.3.3",
"postcss-preset-env": "^9.2.0",
"prettier": "^3.0.3",
"sass": "^1.69.3",
"stylelint": "^15.11.0",
"stylelint-config-standard": "^34.0.0",
"stylelint-config-standard-scss": "^11.0.0",
"typescript": "^5.2.2",
"vite": "^5.2.11",
"vite-plugin-html": "^3.2.2",
"vite-plugin-svgr": "^4.2.0"
},
"dependencies": {
"@hookform/resolvers": "^3.3.2",
"@react-icons/all-files": "^4.1.0",
"@reduxjs/toolkit": "^2.1.0",
"@tanstack/react-query": "^5.25.0",
"@tanstack/react-query-devtools": "^5.35.5",
"axios": "^1.5.1",
"classnames": "^2.3.2",
"core-js": "^3.33.0",
"dotenv": "^16.3.1",
"nanoid": "^5.0.2",
"normalize.css": "^8.0.1",
"path": "^0.12.7",
"qs": "^6.11.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.47.0",
"react-redux": "^9.1.0",
"react-router-dom": "^6.17.0",
"redux-saga": "^1.3.0",
"yup": "^1.3.2"
},
"license": "ISC"
}vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import { createHtmlPlugin } from 'vite-plugin-html';
import svgr from 'vite-plugin-svgr';
import image from '@rollup/plugin-image';
// https://vitejs.dev/config/
export default defineConfig({
root: 'src',
build: {
outDir: '../dist',
},
plugins: [
react({
include: '**/*.{jsx,tsx}',
}),
createHtmlPlugin({
minify: true,
entry: 'index.tsx',
template: 'index.html',
inject: {
data: {
title: 'Витрина',
},
},
}),
svgr(),
image(),
],
resolve: {
alias: {
'@assets': path.join(__dirname, 'src', 'assets'),
'@styles': path.join(__dirname, 'src', 'styles'),
'@components': path.join(__dirname, 'src', 'components'),
'@pages': path.join(__dirname, 'src', 'pages'),
'@interfaces': path.join(__dirname, 'src', 'interfaces'),
'@utils': path.join(__dirname, 'src', 'utils'),
'@hooks': path.join(__dirname, 'src', 'hooks'),
'@redux': path.join(__dirname, 'src', 'redux'),
'@services': path.join(__dirname, 'src', 'services'),
'@localStorage': path.join(__dirname, 'src', 'localStorage'),
'@validations': path.join(__dirname, 'src', 'validations'),
'@rq': path.join(__dirname, 'src', 'reactQuery'),
},
},
publicDir: './assets',
css: {
modules: {
localsConvention: 'camelCaseOnly',
},
},
});tsconfig.json
{
"extends": "@tsconfig/create-react-app/tsconfig.json",
"compilerOptions": {
"target": "es2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./src/",
"paths": {
"@styles/*": ["styles/*"],
"@assets/*": ["assets/*"],
"@components/*": ["components/*"],
"@pages/*": ["pages/*"],
"@interfaces/*": ["interfaces/*"],
"@utils/*": ["utils/*"],
"@hooks/*": ["hooks/*"],
"@redux/*": ["redux/*"],
"@services/*": ["services/*"],
"@localStorage/*": ["localStorage/*"],
"@validations/*": ["validations/*"],
"@rq/*": ["reactQuery/*"]
}
},
"include": ["src", "custom.d.ts", "environment.d.ts", "vite.config.ts"],
"references": [{ "path": "./tsconfig.node.json" }]
}tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}.eslintrc.json
{
"root": true,
"env": {
"browser": true,
"es2020": true
},
"settings": {
"react": {
"version": "detect"
},
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"webpack": {},
"typescript": {"alwaysTryTypes": true}
}
},
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:@tanstack/eslint-plugin-query/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint",
"import",
"@tanstack/query"
],
"rules": {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-non-null-assertion": "off"
}
}