I just wanted to setup my vue project with the full webpack template, use vue router and link different urls to different components.
The src/router/index.html is the following:
import Vue from 'vue';
import Router from 'vue-router';
// eslint-disable-next-line
import Home from '../pages/home.vue';
// eslint-disable-next-line
import Config from '../pages/config.vue';
Vue.use(Router);
export default new Router({
mode: 'hash',
routes: [
{ path: '/', component: Home },
{ path: '/config', component: Config },
],
});
When I run npm run dev and access the above routes, I have the following output:
Up to here, everything is working fine. The problem is when I use the history mode, I can’t access to localhost:8080/config:
And the console doesn’t show any error:
Another thing I tried was switching the mode to history using the simple-webpack template. The worst part is that it worked! So, the problem is in the webpack-template, but I don't know how to make this work.
I'll appreciate any help.
Related
After setting up a proxy using Vite, it only proxies GET and HEAD requests.
I need other methods to also be proxied.
on a fresh vite react project - only thing I touched was vite.config.ts
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/test': {
target: 'http://jsonplaceholder.typicode.com',
rewriteHost: true,
}
}
}
})
curl -X POST localhost:3000/test causes the following log message when run with vite --debug
vite:html-fallback Not rewriting POST /test because the method is not GET or HEAD. +1ms
But instead I expected this to POST to https://google.com/test
I solved it. The above config actually works. I found the error at the very top of the logs when starting the server. (in my case it was a bunch of DNS stuff I did not understand when proxying to Google - changeing to the example on vite's page worked)
I think as soon as you use a Regex - it only allows GET or HEAD. (unsure - but not using a regex fixed it for me)
For the past several months, I've been building my app with Create React App.
However, Ionic now supports Vite and I am attempting to migrate my app from CRA to Vite.
Originally, I made a CKEditor 5 Custom Build and set it up in a React app like this:
import React from 'react';
// eslint-disable-next-line #typescript-eslint/ban-ts-comment
// #ts-ignore Ckeditor does not supply TypeScript typings.
import { CKEditor } from '#ckeditor/ckeditor5-react';
// eslint-disable-next-line #typescript-eslint/ban-ts-comment
// #ts-ignore Ckeditor does not supply TypeScript typings.
import Editor from 'ckeditor5-custom-build/build/ckeditor';
Before building my app, I build the custom CKEditor like this:
cd ckeditor5; npm run build
The CKEditor build command is webpack --mode production.
Now, after configuring Vite, when I run npm run build, I get the following error:
'default' is not exported by ckeditor5/build/ckeditor.js, imported by
src/components/contentTypeCard/CKEditorInput.tsx
The CKEditor issue queue has a thread on a lack of documentation on issues with Vite, but there's nothing in particular about how to resolve this issue.
What I tried
I tried building CKEditor in development mode (webpack --mode development) and examining the ckeditor.js file to try to export Editor, but the file has over 100,000 lines of code and I am totally lost.
In my cause its:
"react": "18.2.0",
"vite": "2.9.10",
Here is solution what i found:
package.json
"ckeditor5-custom-build": "file:libs/ckeditor5",
vite.config.ts
export default defineConfig(() => {
return {
plugins: [react()],
optimizeDeps: {
include: ['ckeditor5-custom-build'],
},
build: {
commonjsOptions: { exclude: ['ckeditor5-custom-build'], include: [] },
},
};
});
RichTextEditor.tsx
import { CKEditor, CKEditorProps } from '#ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build';
export function RichTextEditor({
defaultValue,
...props
}: RichTextEditorProps) {
return (
<EditorContainer>
<CKEditor editor={Editor} data={defaultValue || ''} {...props} />
</EditorContainer>
);
}
I know little about bundler and I'm using vite to build project, I got a error when import some package to configure dev server :
SyntaxError: Cannot use import statement outside a module
So here is the thing:
import pinyin from 'pinyin/esm/pinyin-web.js'
export const somePlugin = {
name: 'someplugin',
configureServer(server) {
server.middlewares.use('/somepath', (req, res, next) => {
const foo = pinyin('foo')
next()
})
},
}
I don't use the normal way(import pinyin from 'pinyin') , because that need a package nodejieba which need to install unnecessary node-gyp, so I choose the web version that don't need nodejieba.
I've searched the error, some says add "type": "module" to package.json file. but it already exist in my package.json.
however, I make the change:
// import pinyin from 'pinyin/esm/pinyin-web.js'
import pinyin from 'pinyin/lib/pinyin-web.js'
and problem get solved,I was confused because I thought vite prefer ES module.
So,
1> what cause the problem above?
2> why should I import file with extensions ? eg: import pinyin from 'pinyin/lib/pinyin-web.js'
I have to add extensions .js or it will cause error. while in vite.config.ts I needn't add extensions.
3> I tried to add field optimizeDeps in vite.config.ts like this
export default defineConfig({
plugins: [vue(), somePlugin],
optimizeDeps: {
include: ['pinyin'],
},
})
but it seems to be useless, the offical doc says:
"During development, Vite's dev serves all code as native ESM. Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first."
did that work for the frontend part and package "pinyin" is for the dev server so whether add the
field optimizeDeps there is no difference.
codesandbox
Does server-side rendering with react-loadable work with Webpack 4 and Babel 7? I've been unable to get it working successfully while following the instructions.
After following just the client-side steps, Webpack correctly outputs separate chunks for each loadable component and this is reflected when I load the page in the browser (ie: the chunks are lazy-loaded).
After following all the SSR steps, however, the server throws the following error:
Error: Not supported
at loader (/Projects/test-project/web/routes/index.js:50:15)
at load (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:28:17)
at init (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:121:13)
at flushInitializers (/Projects/test-project//web/node_modules/react-loadable/lib/index.js:310:19)
at /Projects/test-project/web/node_modules/react-loadable/lib/index.js:322:5
at new Promise (<anonymous>)
at Function.Loadable.preloadAll (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:321:10)
at Object.preloadAll (/Projects/test-project/web/server.js:15:10)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Module._compile (/Projects/test-project/web/node_modules/pirates/lib/index.js:83:24)
My routes/index.js file:
import React from 'react';
import Loadable from 'react-loadable';
import Loading from '../components/Loading';
export default [
{
path: '/',
component: Loadable({
loader: () => import('./controllers/IndexController'),
loading: Loading,
}),
exact: true,
},
{
path: '/home',
component: Loadable({
loader: () => import('./controllers/HomeController'),
loading: Loading,
}),
exact: true,
},
...
];
This issue on SO is possibly related to the server error I'm seeing above, but provided even less info.
My .babelrc is already using #babel/plugin-syntax-dynamic-import, but I tried adding babel-plugin-dynamic-import-node. This fixes the server issue but Webpack then no longer builds the chunks.
I've been unable to find a definitive example to get this working. There is conflicting info out there about proper setup. For example, the react-loadable README says to use the included react-loadable/babel plugin, while this post by the lib author says to use babel-plugin-import-inspector. This PR seemed to be attempting to address Webpack 4 issues but was closed, and the forked lib appeared to have issues as well.
I am using:
Babel 7
Node 10.4
React 16.5
React-Loadable 5.5
Webpack 4
I had the exact same problem today. After adding dynamic-import-node to the plugins of my .babelrc the server worked, but webpack wasn't creating the chunks. I then removed it again from my .babelrc and moved it to my server script with #babel/register. My server script now looks like this:
require( "#babel/register" )({
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: ["dynamic-import-node"]
});
require( "./src/server" );
I hope this helps ;)
I'm currently getting my feet wet in angular4 with the angular cli environment, and I'm trying to import the bootstrap.css from my modules in a way that feels right.
I'm currently importing it from my app.component.css like so:
#import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
This works, but having a relative path to a folder that should really be hidden doesn't sit well with me.
In the past I've used node to get around this by using an express static route:
var express = require('express');
var app = express();
app.use('/scripts', express.static('node_modules'));
But since angular CLI seems to cut node out of the development process, I'm looking for an alternative way to do that.
I tried adding to my module.ts:
import { RouterModule } from '#angular/router';
imports: [
RouterModule.forRoot([
{ path: 'scripts', redirectTo: './node_modules', pathMatch: 'full' }
])
]
But this dosn't seem to be doing anything. I'm not sure if I'm referencing my paths incorrectly, or I'm misusing the router module all together.
Is there a better way to bring in 3rd part assets?
Angular CLI will compress all CSS code into a couple of files after the build. You don't have to expose bootstrap.min.css though angular routes for it to work.
Rather, you can include it in configuration file.