I am attempting to set up the Vite project configuration shown in Thomas Findlay's book "React The Road To Enterprise." I am trying to configure absolute imports (2.2.7)
When I run pnpm run dev or npm run dev the dev server gives this error referencing stylelint. Does anyone know what the issue could be? All my config files are below. (https://github.com/currenthandle/react-road-to-enterprise)
error when starting dev server:
Error: Dynamic require of "stylelint" is not supported
at formatError (file:///Users/casey/Dev/react-the-road-to-enterprise/node_modules/.pnpm/[email protected]_ajklay5k626t46b6fyghkbup3i/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39975:46)
at Context.error (file:///Users/casey/Dev/react-the-road-to-enterprise/node_modules/.pnpm/[email protected]_ajklay5k626t46b6fyghkbup3i/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39971:19)
at Context.buildStart (file:///Users/casey/Dev/react-the-road-to-enterprise/node_modules/.pnpm/[email protected]_ob6wbqjaxhaqcketchi7ll2j5i/node_modules/vite-plugin-stylelint/dist/index.mjs:1:2251)
at async Promise.all (index 4)
at async hookParallel (file:///Users/casey/Dev/react-the-road-to-enterprise/node_modules/.pnpm/[email protected]_ajklay5k626t46b6fyghkbup3i/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39862:9)
at async Object.buildStart (file:///Users/casey/Dev/react-the-road-to-enterprise/node_modules/.pnpm/[email protected]_ajklay5k626t46b6fyghkbup3i/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40133:13)
at async file:///Users/casey/Dev/react-the-road-to-enterprise/node_modules/.pnpm/[email protected]_ajklay5k626t46b6fyghkbup3i/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:61879:13
at async httpServer.listen (file:///Users/casey/Dev/react-the-road-to-enterprise/node_modules/.pnpm/[email protected]_ajklay5k626t46b6fyghkbup3i/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:61894:17)
ELIFECYCLE Command failed with exit code 1.
https://github.com/currenthandle/react-road-to-enterprise
vite.config.ts
/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath, URL } from 'url';
import eslint from 'vite-plugin-eslint';
import StylelintPlugin from 'vite-plugin-stylelint';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
eslint(),
StylelintPlugin({
fix: true,
quiet: false,
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'test-utils': fileURLToPath(
new URL('./src/helpers/test-utils.tsx', import.meta.url)
),
},
},
css: {
preprocessorOptions: {
scss: {
// example : additionalData: `@import "./src/styles/variables";`
// There is need to include the .scss file extensions.
additionalData: `@import "./src/styles/variables";`,
},
},
},
test: {
globals: true,
environment: 'jsdom',
coverage: {
reporter: ['text', 'json', 'html'],
},
setupFiles: ['./vitest.setup.ts'],
},
});
tsconfig.ts
{
"compilerOptions": {
"baseUrl": ".",
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"paths": {
"@/*": ["src/*"],
"test-utils": ["src/helpers/test-utils"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
stylelint.config.cjs
/* eslint-env node */
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-recess-order',
'stylelint-config-css-modules',
'stylelint-config-prettier',
// Uncomment out the below if you want to use scss
'stylelint-config-standard-scss',
'stylelint-config-recommended-scss',
],
plugins: ['stylelint-scss'],
ignoreFiles: [
'./node_modules/**/*.css',
'./dist/**/*.css',
'./coverage/**/*.css',
],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'screen',
'variants',
'responsive',
],
},
],
'no-duplicate-selectors': null,
'no-empty-source': null,
'rule-empty-line-before': null,
'comment-empty-line-before': null,
'selector-pseudo-element-no-unknown': null,
'declaration-block-trailing-semicolon': null,
'no-descending-specificity': null,
'string-no-newline': null,
// Limit the number of universal selectors in a selector,
// to avoid very slow selectors
'selector-max-universal': 1,
'selector-class-pattern': '^[a-z][a-zA-Z0-9] $',
// --------
// SCSS rules
// --------
'scss/dollar-variable-colon-space-before': 'never',
'scss/dollar-variable-colon-space-after': 'always',
'scss/dollar-variable-no-missing-interpolation': true,
'scss/dollar-variable-pattern': /^[a-z-] $/,
'scss/double-slash-comment-whitespace-inside': 'always',
'scss/operator-no-newline-before': true,
'scss/operator-no-unspaced': true,
'scss/selector-no-redundant-nesting-selector': true,
// Allow SCSS and CSS module keywords beginning with `@`
'scss/at-rule-no-unknown': null,
},
}
postcss.config.cjs
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-env node */
module.exports = {
plugins: [
require('postcss-flexbugs-fixes'),
require('stylelint')({
configFile: 'stylelint.config.js',
}),
require('postcss-import'),
require('postcss-extend'),
require('postcss-mixins'),
// Comment out postcss-nested if you're using tailwindcss/nesting
require('postcss-nested'),
require('tailwindcss/nesting'),
require('tailwindcss')('tailwind.config.js'),
require('postcss-preset-env', {
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
'nesting-rules': false,
},
}),
require('autoprefixer')(),
require('postcss-reporter'),
],
};
tailwind.config.cjs
const colors = require('tailwindcss/colors');
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
// Add only if you want to use the @tailwindcss/forms package
plugins: [require('@tailwindcss/forms')],
};
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"paths": {
"@/*": ["src/*"],
"test-utils": ["src/helpers/test-utils"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
postcss.config.cjs
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-env node */
module.exports = {
plugins: [
require('postcss-flexbugs-fixes'),
require('stylelint')({
configFile: 'stylelint.config.js',
}),
require('postcss-import'),
require('postcss-extend'),
require('postcss-mixins'),
// Comment out postcss-nested if you're using tailwindcss/nesting
require('postcss-nested'),
require('tailwindcss/nesting'),
require('tailwindcss')('tailwind.config.js'),
require('postcss-preset-env', {
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': false,
'nesting-rules': false,
},
}),
require('autoprefixer')(),
require('postcss-reporter'),
],
};
prettier.config.cjs
/* eslint-env node */
module.exports = {
endOfLine: 'lf',
jsxSingleQuote: true,
printWidth: 80,
proseWrap: 'never',
quoteProps: 'as-needed',
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'es5',
useTabs: false,
};
CodePudding user response：
Try removing the type: "module" from package.json file. This may help.