I am trying to make monorepo using Turborepo. I have a lot of Vue projects there and I need to share Vite config across all applications. Here's how I'm trying to achieve this.
I have package named #monorepo/configs:
packages/
configs/
package.json
index.ts
vite.config.base.ts
package.json:
{
"name": "#monorepo/configs",
"version": "0.0.1",
"private": true,
"type": "module",
"main": "index.ts",
"types": "index.ts",
"files": [
"./src/tsconfig.base.json",
"./src/vite.config.base.js"
]
}
vite.config.base.ts:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
// regular config
export const ViteConfigBase = defineConfig({
resolve: {
alias: {
// some aliases
}
}
})
index.ts:
export { ViteConfigBase } from './vite.config.base'
And in the other application's vite.config.ts:
import { fileURLToPath, URL } from 'node:url'
import { ViteConfigBase } from '#monorepo/configs/src/vite.config.base' // notice import from 'src'
import { defineConfig, mergeConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig(mergeConfig(
ViteConfigBase,
{
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
}
))
Here I import ViteConfigBase as a file from 'src' folder and this is the error that I get after npm run dev:
> #monorepo/sandbox#0.0.0 dev
> vite
failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\src\vite.config.base.js from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts not supported.
Instead change the require of vite.config.base.js in C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts to a dynamic import() which is available in all CommonJS modules.
If I change import from 'src' folder to import from index, like this:
import { fileURLToPath, URL } from 'node:url'
import { ViteConfigBase } from '#monorepo/configs' // <-- here
import { defineConfig, mergeConfig } from 'vite'
// other config...
Then the error will be this:
> #monorepo/sandbox#0.0.0 dev
> vite
failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\index.ts:1
export { ViteConfigBase } from './src/vite.config.base'
^^^^^^
SyntaxError: Unexpected token 'export'
OOokkay, I've seen it before. Let's try "type": "module" in package.json. Now that's the error:
> #monorepo/sandbox#0.0.0 dev
> vite
failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\index.ts
And this is where I'm stuck. I need those files to be .ts for sure (and I'm not sure if they would work if I change extention to .js).
I could also easily fix this by just adding the build step, but I don't think it is that necessary and there should be the way around. The build step will add a lot of overhead to development process and the code itself. I've tried it and the dist folder was around ~4Mb for no reason. Also, I won't be able to use "Go to definition" feature in this case, and last but not least, it has to be rebuilt after every change, so I really wish to avoud this step and just use raw config files everywhere.
If you using Turborepo, how about this way?
/
├── apps
| ├── app1
| | ├── src
| | ├── package.json
| | └── vite.config.ts
| └── app2
| ├── src
| ├── package.json
| └── vite.config.ts
├── packages
| └── viconfig
| ├── index.js
| └── package.json
// apps/app1/package.json
{
"name": "app1",
"devDependencies": {
"viconfig": "workspace:*",
"vite": "4.0.0"
}
}
// apps/app1/vite.config.ts
import { defineConfig } from "vite";
import customConfig from "viconfig";
export default defineConfig(() => {
return {
...customConfig,
};
});
// packages/viconfig/index.js
import path from "node:path";
export default {
resolve: {
alias: {
"#": path.resolve(process.cwd(), "src"),
},
},
};
// packages/viconfig/package.json
{
"name": "viconfig",
"main": "index.js",
"type": "module",
"types": "index.js"
}
Related
please, I have problem with Vite server and ReactJS
Version of ReactJS:
fox#mustang:~/projects/nazory.sk$ node -v
v18.14.0
fox#mustang:~/projects/nazory.sk$ npm -v
9.3.1
I'm getting vite import-analysis problem. The Error is:
2:39:47 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
Plugin: vite:import-analysis
File: /home/fox/projects/nazory.sk/src/components/aside.js:6:30
2 | function Aside() {
3 | return <aside>
4 | <h2>Discussion Panel</h2>
| ^
5 | </aside>;
6 | }
at formatError (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41389:46)
at TransformContext.error (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41385:19)
at TransformContext.transform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39628:22)
at async Object.transform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41660:30)
at async loadAndTransform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39466:29)
From this component
import React from 'react'
function Aside() {
return (
<aside>
<h2>Discussion Panel</h2>
</aside>
)
}
export default Aside
File is named 'components/aside.js'
But for example my Header is OK and it's the totally same
import React from 'react'
function Header() {
return (
<header className="header">
<h1>Názory.sk</h1>
<div>Žurnalistika ľudí - Články a slobodné diskusie bez reakcií na diskutujúcich</div>
</header>
)
}
export default Header
File is saved as components/header.js
I'm importing and using in App.jsx my all components
import Header from './components/header'
import Article from './components/Article'
import Aside from './components/aside'
function App() {
// Render compoment
return (
<main className="container">
<Header />
<Article />
<Aside />
<footer className="footer">©2023 - Frisky Fox</footer>
</main>
)
}
export default App
One important thing:
If I have also footer.js in components the error is there. It's always on the last component.
My package.json
{
"name": "nazory.sk",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.27",
"#types/react-dom": "^18.0.10",
"#vitejs/plugin-react": "^3.1.0",
"vite": "^4.1.0"
}
}
My vite.config.js
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
I have only LTS ReactJS so answer here doesn't help:
vite - create-vite got error in node version 18
Btw, I've tried using Brackets, without brackes if I had only return <footer></footer>. I've tried also using semi set to prettier, nothing helps. And always is error on the last impotent component. The reason why I have error on aside.js is that I haven't footer.js like component. If I create new component for footer and call id in App.js the error will in footer.js
I think that this sould be vite bug, couldn't be?
You have 2 options
first one is what YHR said but the problem is as you said to change all files extenstion
the second solution is to just add this config to your vite.config.js
defineConfig({
esbuild: {
loader: 'jsx',
},
optimizeDeps: {
esbuildOptions: {
loader: {
'.js': 'jsx',
},
},
},
...
as it shows, it just telling vite loader to consider js as jsx
I want to create a new npm package and I have a problem with vite lib mode.
I want my package to export some UI components that has some styles, project works fine on yarn dev but when I build it the style.css file inside dist directory is not used anywhere, so the styles not applied to the components
this is my vite.config.ts file
import { resolve } from "path";
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import dts from "vite-plugin-dts";
export default defineConfig({
plugins: [
react(),
dts({
insertTypesEntry: true,
}),
],
build: {
lib: {
entry: resolve(__dirname, "src/main.tsx"),
name: "MyLib",
fileName: "my-lib",
},
rollupOptions: {
external: ["react", "react-dom"],
output: {
globals: {
react: "React",
"react-dom": "ReactDOM",
},
},
},
},
});
and this is dist folder :
I know I can import my styles separately like :
import Skeleton from "skeleton-sh";
import "skeleton-sh/style";
but I want is to just import package like import Skeleton from "skeleton-sh"; and its import the styles for me
I'm using expo-cli.
I import a module from the folder 'src' (i created this folder), if open in web this work perfectly, but if open in android not found this.
I try use the absolute path, the Babel Resolver module and nothing work.
Project:
-assets
-node_modules
-src
-components
-screens
-HomeScreen.js
-services
-Webservices.js
-styles
-utils
-App.js
...
Screen file:
...
import WebServices from '../services/WebServices';
export default class HomeScreen extends React.Component {
...
File to import:
const axios = require('axios');
var url = 'https://randomuser.me/api/';
var WebServices = {
getUser: function(){
return axios.get(url);
}
}
export { WebServices as default };
Error:
Android Bundling failed 5347ms
Unable to resolve module ../services/WebServices.js from C:\Users\jalvarez\Proyectos\AppPruebas\src\screens\HomeScreen.js:
None of these files exist:
* src\services\WebServices.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* src\services\WebServices.js\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
5 | import { createNativeStackNavigator } from '#react-navigation/native-stack';
6 |
> 7 | import WebServices from '../services/WebServices.js';
| ^
8 |
9 | export default class HomeScreen extends React.Component {
enter image description here
Installing Typescript and babel-plugin-root-import modules and with this config in babel.config.js and tsconfig.json work for me in android and web.
balbel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'babel-plugin-root-import',
{
root: __dirname,
rootPathPrefix: '~',
rootPathSuffix: './src',
},
]
]
};
};
In tsconfig.json add:
"rootDir": "./"
For import:
import WebServices from '~/services/webservices';
I'm try to work with this test js-file, I want to compile test ES module for browsers via Rollup.
import { v4 as uuidv4 } from 'uuid';
export default function () {
console.log(uuidv4());
}
I made npm i for this package.json
{
"dependencies": {
"uuid": "^8.3.2"
},
"devDependencies": {
"#rollup/plugin-node-resolve": "^13.0.4"
}
}
rollup.config.js
// rollup.config.js
import nodeResolve from '#rollup/plugin-node-resolve';
export default {
input: ['src/main.js'],
output: {
name: 'bundle',
dir: 'dst',
format: 'es'
},
external: ['uuid'],
plugins: [ nodeResolve({ browser: true }) ]
};
After rollup work I get:
import { v4 } from 'uuid';
function main () {
console.log(v4());
}
export { main as default };
#1
Can I get full path to node_modules js-file with my prefix?
For example for lib uuid (node_modules/uuid/dist/esm-browser/index.js) I want:
// for prefix '/assets/js/lib/'
import { v4 } from '/assets/js/lib/uuid/dist/esm-browser/index.js';
or may be just node_modules lib-file path:
import { v4 } from 'node_modules/uuid/dist/esm-browser/index.js';
#2
Can I make es-bundle in separate dirs for each external module (from package json) that was imported by my js-code?
Remove modules from external section.
Use preserveModules: true - docs.
I've created a React component library which is getting quite big now, so I want to split it into submodules but am unable to do so.
The current setup is like this:
src/index.ts
export * from "./components";
export * from "./utils";
src/components/index.ts
export { default as CustomComponentOne } from "./CustomComponentOne";
export { default as CustomComponentTwo } from "./CustomComponentTwo";
src/utils/index.ts
export { default as utilOne } from "./utilOne";
export { default as utilTwo } from "./utilTwo";
package.json
{
...
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.ts",
"scripts": {
"build": "microbundle-crl --no-compress --no-sourcemap --format modern,cjs",
...
},
...
}
My goal is to enable imports like:
import { CustomComponentOne } from "my-library/components"
import { utilOne } from "my-library/utils"
while preserving imports like
import { CustomComponentOne, utilOne } from "my-library"
The last import example is how everything is now imported, but I want to add imports like the two above. I was able to do this with compiling the project with tsc instead of microbundle-crl because this generated a .js file for each .ts file, but microbundle-crl creates 1 .js file as output. But SCSS files etc were not compiled with tsc (obviously).
Does anybody know how to go about this?