I’m working on a combined project where I want to dump the results of the compile process into the ‘dist’ directory and another directory, possibly called ‘view’.
I’ve tried configuring the vite.config.js file by adding code to the export default defineConfig section of the code, in this case simply to dump everything in the view folder, ex:
export default defineConfig({
plugins: [svelte({
build: {
outDir: "./view"
}
})],
})
I’ve also tried to use vite configuration commands in the build section and failed.
But nothing seems to work. Looking for assistance.
Related
I have two packages ui and app in a "monorepo" using turborepo.
I have the ui repo with .tsx files and it's not being built, it's package.json main is a typescript file.
However when running nextjs I get an error at the import from the ui main file.
Is it possible to include this node_module from nextjs perspective? When looking at config.module.rule I can't find any rules for typescript files. I'm not sure how typescript config for nextjs files.
The turbo-repo example is using next-transpile-modules in the apps to get Next to transpile these package dependencies that do not have a build step:
// in next.config.js
const withTM = require("next-transpile-modules")(["ui"]);
module.exports = withTM({
reactStrictMode: true,
});
From this article by the creator of Turbo Repo, Jared Palmer:
[To] do this, this package can then be used without project references or a TypeScript build step (either via tsc or esbuild etc) as long as you adhere to 2 rules:
The consuming application of an internal package must transpile and typecheck it.
You should never publish an internal package to NPM.
...
**Next.js
If you use Next.js, you can satisfy these constraints with the next-transpile-modules plugin which will tell Next.js to run certain dependencies through its Webpack/Babel/TypeScript pipelines.
So make sure you're meeting the constraints outlined in the previous excerpt. Since you're using Next, check your next.config.js and confirm that you're using next-transpile-modules for your internal dependencies.
Take a look at the default project of Turborepo as it is explained here: Getting Started. The repository itself can be found here: GitHub.
This project comes with 3 different packages and two plain NextJS apps (docs/web) that use a (Button-)component from the UI repository.
Use this project to understand the structure of a Turborepo and adjust it to your needs.
I did exactly what I described above and my NextJs apps just work fine sharing (tsx-)components from the UI package.
add this to your app's package.json should resolve it:
"bundledDependencies": [
"ui"
]
Since Next.js 13, you can just do the following:
// next.config.js
module.exports = {
transpilePackages: ['ui'],
}
Next.js doc
I have a vuetify project (Windows / VSCODE).
Our plan is to create components for our internal teams to use - no NPM.
I created a hello-world.vue component and ran a script (below) from package.json to create a dist folder with that component. This works fairly well, but in another application demo.html or such the Vuetify Button v-btn does not have any of the styling from vuetify... The script creates the individual components based off the vue file.
script executed to generate components "buildSFC": "cross-env vue-cli-service build --target wc --name jcdc-sfc 'src/components/*.vue'"
What am I missing to get VUETIFY styling and such?
See GIT HUB for code: https://github.com/wlafrance/jcdc-sfc
If you pull the git down, in a vue command line execute this script: npm run buildSFC
Then look for a dist folder in the project and open the html file in chrome to see the issue.
So see what it is suppose to look like (the button) execute: nmp run serve
Your publicPath in vue.config.js probably defaults to / which is you root drive. So if you have it running on Windows and on your C: drive then your demo.html will look in C:\ for the files.
Add a publicPath: "./" to your vue config.
Also check your package-json scripts. buildLib has a ./src/ but buildSFC does not.
In the Next.js 9 tutorial the suggested way to import shared components is by relative paths, like
import Header from '../components/Header';
I want to use absolute imports, like
import Header from 'components/Header';
How do I make this work both locally and when I deploy using the Now CLI?
Using the suggested setup from the tutorial, my project structure is:
my-project
├── components
├── pages
└── package.json
Next.js 9.4 and later
If you're using Next.js 9.4 or later, see Black's answer.
Next.js 9.3 and earlier
There are different ways of achieving this, but one way – that requires no additional dependencies and not too much config – is to set the environment variable NODE_PATH to the current directory, i.e. NODE_PATH=..
1. Make it work locally
I think the easiest way to set NODE_PATH=. when running the dev/build scripts in your package.json locally (e.g. $ npm run dev or $ yarn dev), is to add it to each script in package.json:
"scripts": {
"dev": "NODE_PATH=. next",
"build": "NODE_PATH=. next build",
"start": "next start"
},
2. Make it work when you deploy
When you deploy to ZEIT Now, NODE_PATH must be set in a different way.
You can add a Deployment Configuration by adding a now.json file (it should be in the same directory as your package.json). If you don't have a now.json file already, create it and add the following contents:
{
"version": 2,
"build": {
"env": {
"NODE_PATH": "."
}
}
}
This tells Now to use NODE_PATH=. when buildnig your app (see build.env).
(It also tells Now that we use Now platform version 2 which is currently the newest version (see version). Omitting the version will give you a warning when you deploy using $ now.)
In Next.js 9.4 it is possible to do it by adding the baseUrl config to jsconfig.json (JS projects) or tsconfig.json (TS projects).
// jsconfig.json or tsconfig.json
{
"compilerOptions": {
"baseUrl": "."
}
}
This will allow imports from the root directory. It also integrates well with IDE such as VS Code. See documentation for more information.
Change web pack configuration:
//next.config.js file
module.exports = {
webpack(config) {
config.resolve.modules.push(__dirname)
return config;
},
}
Then use it like this:
import TopBar from 'components/TopBar' // for components
import "public/baseLine.css" // for any public resources
Using Ubuntu 16.04 and Nginx I am trying to deploy a Vue project to production but keep running against a white wall- literally.
I cloned my project to
/var/www/html/maak-web/maak_web/
Installed all needed dependencies with npm install and ran the following build script:
node build/build.js
This started the building for production which was successful and the project deployed.
In my nginx default config I changed the root to point to the correct folder like so:
root /var/www/html/maak-web/maak_web;
When I now visit my domain/IP I see that the project loads (e.g. favicon and site name loads) as well as I can access my static files from here:
https://mysitedomain.com/static
It seems the Vue project works but the problem is that it doesn't actually display anything and visiting sub views like /oneview and /anotherview throw 404 page not found errors.
Since Vue doesn't seem to throw any errors I suspect its the nginx configuration problem!?
The solution was to build the production into /dist/ folder and publish only the /dist/ folder content. Once I copied the content to /www/html/ it worked fine.
seeing that this was an error with not getting the right files to the output folder, i suggest you update your config/index.js file to include the correct production location there by setting index and assetsRoot for the build object
build: {
// Template for index.html
index: path.resolve(__dirname, '../../srv/www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../srv/www'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...
I'm making a Vue 2 component. But when I npm link it in other project and imported (I'm importing it in a random component doing: import InputTag from 'vue-input-tag' ) I'm seeing this:
Failed to mount component: template or render function not defined.
(found in component <input-tag>)
Any ideas? I'm going crazy.
Here is the repo: https://github.com/matiastucci/vue-input-tag/tree/wtf
Thanks!
I hit this same issue when upgrading an old (v0.11.x) Vue.js app. Vue.js 2.x introduces compiled (render-function) templates. Additionally, these are the new default.
Here's more info from the 2.x docs:
http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build
In my case, I was using browserify and partialify to include the templates (as strings), so there was no pre-compilation to render function happening.
To fix this, I used aliasify to make sure the vue requirement was fulfilled with the "Standalone" copy of Vue.js rather than the "Runtime-only" version.
I did the following:
npm install --save-dev aliasify
edited the package.json to include this code:
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.js"
}
}
added -t aliasify to my browserify command, which now reads:
browserify -e src/main.js -t aliasify -t partialify -o build/bundle.js
You can do this with webpack also--and there's info in the Vue.js docs for that.
I hope that helps!