I have a file structure like so app(main) and dashboard(secondary) being the different pages
but when trying to open the secondary app at /
vite.config.js
import * as path from "path";
import { defineConfig } from "vite";
import react from "vite-preset-react";
import svgr from 'vite-plugin-svgr'
import rollupReplace from "#rollup/plugin-replace";
const outDir = path.resolve(__dirname, 'build')
export default defineConfig({
plugins: [
rollupReplace({
preventAssignment: true,
values: {
__DEV__: JSON.stringify(true),
"process.env.NODE_ENV": JSON.stringify("development")
}
}),
react(),
svgr()
],
root: 'app',
build: {
root: outDir,
rollupOptions: {
input: {
app: path.resolve(__dirname, "app/index.html"),
dashboard: path.resolve(__dirname, "dashboard/index.html"),
}
}
},
});
and the server.js file is just an empty file not used
Related
I need excute 'twilio-client' on electron project
import Twilio from 'twilio-client';
// this line broken when run electron-vite preview or builded app version
const device = new Twilio.Device();
device.setup('xyls', {
debug: true
});
console.log(device);
When I run my app with electron-vite preview or after build, I got an error:
Uncaught TypeError: Failed to resolve module specifier "events"
This also happened when it was executed:
electron-vite dev --watch
I added nodePolifill plugins now it works in dev mode, but on preview or build doesn't
The plugin 'rollup-plugin-node-polyfills' doesn't works on build.rollupOptions.plugins
I need help
My electron.vite.configs.ts:
import { resolve, normalize, dirname } from 'path'
import { defineConfig } from 'electron-vite'
import injectProcessEnvPlugin from 'rollup-plugin-inject-process-env'
import tsconfigPathsPlugin from 'vite-tsconfig-paths'
import reactPlugin from '#vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '#esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '#esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import { main, resources } from './package.json'
const [nodeModules, devFolder] = normalize(dirname(main)).split(/\/|\\/g)
const devPath = [nodeModules, devFolder].join('/')
const tsconfigPaths = tsconfigPathsPlugin({
projects: [resolve('tsconfig.json')],
})
export default defineConfig({
main: {
plugins: [tsconfigPaths],
build: {
rollupOptions: {
input: {
index: resolve('src/main/index.ts'),
},
output: {
dir: resolve(devPath, 'main'),
},
},
},
},
preload: {
plugins: [tsconfigPaths],
build: {
outDir: resolve(devPath, 'preload'),
},
},
renderer: {
define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.platform': JSON.stringify(process.platform),
},
server: {
port: 4927,
},
publicDir: resolve(resources, 'public'),
plugins: [
tsconfigPaths,
reactPlugin(),
],
resolve: {
alias: {
util: 'rollup-plugin-node-polyfills/polyfills/util',
sys: 'util',
stream: 'rollup-plugin-node-polyfills/polyfills/stream',
path: 'rollup-plugin-node-polyfills/polyfills/path',
querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
url: 'rollup-plugin-node-polyfills/polyfills/url',
string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
http: 'rollup-plugin-node-polyfills/polyfills/http',
https: 'rollup-plugin-node-polyfills/polyfills/http',
os: 'rollup-plugin-node-polyfills/polyfills/os',
assert: 'rollup-plugin-node-polyfills/polyfills/assert',
constants: 'rollup-plugin-node-polyfills/polyfills/constants',
_stream_duplex: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
_stream_passthrough: 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
_stream_readable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
_stream_writable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
_stream_transform: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
timers: 'rollup-plugin-node-polyfills/polyfills/timers',
console: 'rollup-plugin-node-polyfills/polyfills/console',
vm: 'rollup-plugin-node-polyfills/polyfills/vm',
zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
tty: 'rollup-plugin-node-polyfills/polyfills/tty',
domain: 'rollup-plugin-node-polyfills/polyfills/domain',
events: 'rollup-plugin-node-polyfills/polyfills/events',
buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6', // add buffer
process: 'rollup-plugin-node-polyfills/polyfills/process-es6', // add process
}
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
]
}
},
worker: {
format: "es",
},
build: {
outDir: resolve(devPath, 'renderer'),
rollupOptions: {
plugins: [
injectProcessEnvPlugin({
NODE_ENV: 'production',
platform: process.platform,
}),
rollupNodePolyFill() //this line doesn't works
],
input: {
index: resolve('src/renderer/index.html'),
},
output: {
format: "esm",
dir: resolve(devPath, 'renderer'),
},
},
},
},
})
and the is my project repostitory:
https://github.com/caioregatieri/app-electron
I tried add many polyfills, add twilio import on preload and export to render with
contextBridge.exposeInMainWorld('Twilio', Twilio)
I solved it with:
electron.vite.config.ts
build: {
outDir: resolve(devPath, 'renderer'),
rollupOptions: {
plugins: [
injectProcessEnvPlugin({
NODE_ENV: 'production',
platform: process.platform,
}),
rollupNodePolyFill,
],
},
},
and this:
index.html
<script>
global = globalThis;
</script>
For my multi page app i cannot have html assets imports pointing to the root as i need to upload my project inside a sub-folder.
Using -
module.exports = defineConfig({
base: "./",
});
resolves this issue for root pages but cause a wrong import for nested pages.
Example
- assets
- index.html
- nested
- nested.html
Imports for index.html will point to ./assets which is correct.
Imports for nested.html will also point to ./assets which is incorrect. It needs to point to ../assets instead.
You can set an alias to point to the assets folder :
alias: {
"#": resolve(__dirname, './assets'),
},
Based on your tree sample, with this following example of multipage vite.config.js, you can import assets
from components with: import logo from '#/logo.png' (assuming there is a logo.png file in folder assets)
import vue from "#vitejs/plugin-vue";
import { join, parse, resolve } from "path";
export default {
base: '',
root: './',
plugins: [vue()],
alias: {
"#": resolve(__dirname, './assets'), // will resolve to `/assets/`
},
build: {
rollupOptions: {
input: entryPoints(
"index.html",
"nested/nested.html",
"foo/index.html",
"foo/bar/index.html",
),
},
},
};
function entryPoints(...paths) {
const entries = paths.map(parse).map(entry => {
const { dir, base, name, ext } = entry;
const key = join(dir, name);
const path = resolve(__dirname, dir, base);
return [key, path];
});
const config = Object.fromEntries(entries);
return config;
}
Example code of the nested FooBar component :
<template>
<img alt="Vue logo" :src="logo" />
<Nav/>
<h1>Foo Bar</h1>
</template>
<script setup>
import Nav from "~/components/Nav.vue";
import logo from '#/logo.png'
import "#/style/style.scss"
</script>
I have a problem with images importing using vanilla-extract and esbuild
my build file:
const { build } = require("esbuild");
const { vanillaExtractPlugin } = require("#vanilla-extract/esbuild-plugin");
(async () => {
await build({
entryPoints: ["src/entry.tsx"],
bundle: true,
minify: true,
sourcemap: true,
platform: "browser",
outfile: "dist/entry.js",
plugins: [vanillaExtractPlugin()],
loader: {
".svg": "file",
},
});
})();
my entry.tsx
import { someStyle } from "./style.css";
console.log(someStyle);
When i importing my image in "css" way
import { style } from "#vanilla-extract/css";
export const someStyle = style({
backgroundColor: "url(./x.svg)",
});
The compiler return error
Could not resolve "./x.svg" (the plugin "vanilla-extract" didn't set a resolve directory)`
If i am trying to import x.svg using the typescript import
import { style } from "#vanilla-extract/css";
import svg from "./x.svg";
export const someStyle = style({
backgroundColor: `url(${svg})`,
});
I have other error
src/style.css.ts:5:16: error: No loader is configured for ".svg" files: src/x.svg'
Is it possible to import images with vanilla-extract modules without marking them as external?
It not working now. Workaround is to use babel
import babel from 'esbuild-plugin-babel';
plugins: [
babel({
filter: /.*.css.ts/,
config: {
presets: ['#babel/preset-typescript'],
plugins: ['#vanilla-extract/babel-plugin'],
},
}),
],
I can't figure out how to import html files with webpack 2! I am using angular 1.6.0 and typescript.
I would like to import a template and use it as a router state template:
import * as angular from 'angular';
import * as uiRouter from 'angular-ui-router';
import theView from './theView.html';
import appComp from './app.component';
export default angular
.module('app.main', [uiRouter])
.component('myAppComp', appComp)
.config(($stateProvider, $urlRouterProvider, $locationProvider) => {
'ngInject';
$locationProvider.hashPrefix('');
$stateProvider
.state('main', {
url: '/main',
template: '<p>main state template</p>'
})
.state('main.cardList', {
url: '/cardList',
template: theView
});
}
It gives:
error:
ERROR in ./src/app/module.ts
(3,22): error TS2307: Cannot find module './theView.html'.
What (wierd) I don't understand is if I import the template same as above and use it in a component template, it does gives same error "cannot find module './theView.html'" but it works!
This works (with ts compilation error):
import template from './theView.html';
.component(appComp, {
template
})
webpack.config:
module.exports = {
entry: './src/app/module.ts',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
}
]
},
output: {
filename: 'bundle.js',
path: __dirname + "/dist"
}
};
What is going on here..?
For the people who can come across this problem in the future; it is solved as follows:
declare const require: any;
$stateProvider
.state('main.cardList', {
url: '/cardList',
template: require('./theView.html').default
});
Credits to #yadejo for the answer above!
My team updated the Rails version of our application to 5.1 so we could use Webpacker, a wrapper to use Webpack with Rails and then use Angular 2 properly.
We started setting up the test suite for the Angular 2 modules using Karma + Jasmine + Webpack following this article.
If I write simple test cases, without Angular Component, TestBed and ComponentFixture, everything looks fine. However, if I try to import Angular modules and test some components, Karma raises the following error message for every component and module:
ERROR in ./app/javascript/app/app.module.ts
Module parse failed: /[application path omitted]/app/javascript/app/app.module.ts Unexpected character '#' (17:0)
You may need an appropriate loader to handle this file type.
| import { AppRoutingModule } from './app-routing.module';
|
| #NgModule({
| imports: [
| BrowserModule,
The project structure is:
- app
-- ...
-- javascript (webpacker create this folder in the first time running)
---- app (where all modules are stored)
------ ...
------ app.routing.module.ts
------ app.component.ts
------ app.module.ts
------ echo.pipe.ts (a file created just to test the Karma suite)
---- packs
---- test
------ echo.pipe.spec.ts
------ main.js (entry point of tests)
------ main.spec.ts
The karma.conf.js file:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
{ pattern: './app/javascript/app/**/*.ts', watched: false, served: true },
{ pattern: './app/javascript/test/main.js', watched: false }
],
plugins: [
require('karma-webpack'),
require('karma-jasmine'),
require('karma-phantomjs-launcher'),
require('karma-chrome-launcher'),
require('karma-sourcemap-loader'),
require('karma-babel-preprocessor'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter')
],
exclude: [
],
preprocessors: {
'app/javascript/**/*.ts': ['webpack', 'sourcemap'],
'app/javascript/test/main.js': ['webpack', 'sourcemap']
},
mime: { 'text/x-typescript': ['ts','tsx'] },
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
singleRun: true,
concurrency: Infinity
})
}
The echo.pipe.ts file:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'echo'
})
export class EchoPipe implements PipeTransform {
transform(value: any): any {
return value;
}
}
The main.js file:
describe('Meaningful Test', () => {
it('1 + 1 => 2', () => {
expect(1 + 1).toBe(2);
});
});
require('./main.spec.ts');
The main.spec.ts file:
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/jasmine-patch';
import 'rxjs/Rx';
import { TestBed } from '#angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '#angular/platform-browser-dynamic/testing';
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
describe('Meaningful Test 2', () => {
it('1 + 1 => 2', () => {
expect(1 + 1).toBe(2);
});
});
The echo.pipe.spec.ts file:
import { Component } from '#angular/core';
import { TestBed, ComponentFixture, async } from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { DebugElement } from '#angular/core';
import { EchoPipe } from '../app/echo.pipe';
describe('EchoPipe', () => {
let comp: EchoPipe;
let fixture: ComponentFixture<EchoPipe>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ EchoPipe ],
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(EchoPipe);
comp = fixture.componentInstance;
comp.name = 'foo';
});
it('works well', () => {
fixture.detectChanges();
el = fixture.debugElement.nativeElement as HTMLElement;
expect(el.querySelector('p').textContent).toBe('foo');
});
});
const context = require.context('./', true, /\.spec\.ts$/);
context.keys().map(context);