Vite Setup Issues

[its-monotype]

It would be nice to update the docs a bit because Vite uses "type": "module",. and also in the example, the import is written to a variable although it is not needed.

Screenshots

[its-monotype]

Also without.js extension PostCSS config won't work

- import { config } from 'reshaped/config/postcss';
+ import { config } from 'reshaped/config/postcss.js';

[its-monotype]

By the way, when installing Tailwind, I have the same problem as the example in the documentation for CJS so I need to convert it to ESM. But the strange thing that I "getTheme" I can import without specifying .js extension here like that and it works unlike the PostCSS config: import { getTheme } from 'reshaped/config/tailwind';

[blvdmitry]

Good point, I've just figured out that in the examples it was working because I was using .cjs extension, but I'll try updating it to ESM now

[blvdmitry]

Updated the example and deploying the doc update now. When I tried using tailwind.config.js without an extension it still complained like expected in type module.

[its-monotype]

Updated the example and deployed the doc update now. When I tried using tailwind.config.js without an extension it still complained like expected in the type module.

@blvdmitry Yep TailwindCSS config compiles fine without a .js extension, however, the PostCSS config does not. Or is this how it should be?

import { config } from 'reshaped/config/postcss';

export default {
  plugins: {
    ...config.plugins,
    tailwindcss: {},
    autoprefixer: {},
  },
};

Error:

> quiz@0.0.0 dev C:\Users\itsmo\dev\playground\quiz
> vite

  VITE v4.5.0  ready in 2617 ms  

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help        
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/Users/itsmo/dev/playground/quiz): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: C:/Users/itsmo/dev/playground/quiz): [Error] Cannot find module 'C:\Users\itsmo\dev\playground\quiz\node_modules\reshaped\config\postcss' imported from C:\Users\itsmo\dev\playground\quiz\postcss.config.js     
Did you mean to import reshaped@2.5.0_postcss@8.4.31_react-dom@18.2.0_react@18.2.0/node_modules/reshaped/config/postcss.js?
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\itsmo\dev\playground\quiz\node_modules\reshaped\config\postcss' imported from C:\Users\itsmo\dev\playground\quiz\postcss.config.js
Did you mean to import reshaped@2.5.0_postcss@8.4.31_react-dom@18.2.0_react@18.2.0/node_modules/reshaped/config/postcss.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:946:10)   
    at defaultResolve (node:internal/modules/esm/resolve:1132:11) 
    at nextResolve (node:internal/modules/esm/loader:163:28)      
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)
] {
  code: 'ERR_MODULE_NOT_FOUND'   
}

Node.js v18.18.2
 ELIFECYCLE  Command failed with exit code 1.
 ``` 

[blvdmitry]

When you're using type: module in your package.json – passing an extension is required by ESM. As far as I know – the only way to work without passing extensions in this case using .cjs extension which will then also require you to work with require syntax instead of import. Not sure though why tailwind config doesn't complain about this, maybe because it's executed outside the rest of the build process and it just imports the config ignoring the type: "module" in package.json