I am working on a project wherein I need to use --prod flag to build the angular code.
In one of our module there is a component which is being created at run-time.
The project works fine when build with dev environment.
But when --prod flag is used the project gets build successfully but throws a run-time exception at methos 'compileModuleAndAllComponentsSync()'.
I have googled a lot for this but didn't find any promising solution. Can anybody help me in this?
Excepton Details:
main.0c80be8a6ff7c0136620.bundle.js:1 ERROR Error: Runtime compiler is not loaded
at fe (main.0c80be8a6ff7c0136620.bundle.js:1)
at e.compileModuleAndAllComponentsSync (main.0c80be8a6ff7c0136620.bundle.js:1)
at e.addComponent (main.0c80be8a6ff7c0136620.bundle.js:1)
at e.onSubmit (main.0c80be8a6ff7c0136620.bundle.js:1)
at Object.handleEvent (main.0c80be8a6ff7c0136620.bundle.js:1)
at Object.handleEvent (main.0c80be8a6ff7c0136620.bundle.js:1)
at Object.handleEvent (main.0c80be8a6ff7c0136620.bundle.js:1)
at cn (main.0c80be8a6ff7c0136620.bundle.js:1)
at main.0c80be8a6ff7c0136620.bundle.js:1
at HTMLButtonElement.<anonymous> (main.0c80be8a6ff7c0136620.bundle.js:1)# main.0c80be8a6ff7c0136620.bundle.js:1
The JIT compiler is generally not available from AoT mode, here is a workaround taken from Angular's integration example.
import {Compiler, COMPILER_OPTIONS, CompilerFactory, NgModule} from '#angular/core';
import {JitCompilerFactory} from '#angular/platform-browser-dynamic';
#NgModule({
providers: [
{provide: COMPILER_OPTIONS, useValue: {}, multi: true},
{provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
{provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}
]
})
There is also an open feature request to include jit compiler in AoT mode.
Related
We have a Quasar 2 based project that makes use of vue-i18n for localising of strings, but are running into an issue whereby strings with replacement tokens aren't getting handled properly in our dev host and production deployments.
In our language file:
export default {
'label.deleteUserConfirm': 'Saisissez le {personId} pour confirmer la suppression'
}
In our Vue file, in the template section:
<template>
<div>
{{ $t('label.deleteUserConfirm', { personId: '12345' }) }}
</div>
</template>
When running in localhost the displayed text is:
Saisissez le 12345 pour confirmer la suppression
In our deployments
Saisissez le {personId} pour confirmer la suppression
Based on docs for #intlify/vite-plugin-vue-i18n we did try specifying compositionOnly: false in the quasar.conf.js, but that doesn't seem to have made a difference.
We are building our project with Vite. Looking in the dist/spa folder we don't see any evidence of corruption of the strings, as they appear in the js, in the assets folder.
The results of quasar build show this issue, while the dev version run by quasar dev don't. This is an SPA target.
Environment info:
vue-i18n 9.2.2
vite 2.9.15
#intlify/vite-plugin-vue-i18n 6.0.3
quasar 2.10.1
node 16.10.0
Update: I just tried creating a Quasar project from scratch using yarn create quasar and it shows the same issues. Trying this with new vue + vue-i18n project, using vite, only shows the issue once I use #intlify/unplugin-vue-i18n/vite, suggesting the issue is related to that.
If you are using Vue2 use this library Vue-i18n for Vue2
If you are using vue3 use this one Vue-i18n for Vue3.
It will work fine with these packages
These packages supported by nuxt and vue community so it will best solution
Turns out we need to provide the runtimeOnly: false option, to #intlify/vite-plugin-vue-i18n, to deal with this issue.
The documentation does cover this, but it isn't clear until you run into this problem:
Also, if you do a production build with vite, Vue I18n will automatically bundle the runtime only module. If you need on-demand compilation with Message compiler, you need to set the runtimeOnly option to false.
If I understand rightly, then without this option the messages are optimised at compile time and can't benefit from the token substitutions.
So, if you are using Quasar, in the quasar.conf.js
vitePlugins: [
['#intlify/vite-plugin-vue-i18n', {
// if you want to use Vue I18n Legacy API, you
// need to set `compositionOnly: false`
// compositionOnly: false,
runtimeOnly: false,
// you need to set i18n resource including paths !
include: path.resolve(__dirname, './src/i18n/**')
}]
],
If you are using pure Vue3, with Vite, then in the vite.config.ts file:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import VueI18nPlugin from '#intlify/unplugin-vue-i18n/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VueI18nPlugin({
runtimeOnly: false
})
],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
[docusaurus] Newbie question: I am attempting to get mermaid up and running on my website, but am struggling to implement https://docusaurus.io/docs/markdown-features/diagrams. My docusaurus.config.js file is structured as follows:
const config = {
...
presets: [
...
],
themeConfig:
({
...
}),
}
module.exports = config;
Where should the block
markdown: {
mermaid: true,
},
themes: ['#docusaurus/theme-mermaid'].
be included in this structure?
I have attempted to include the stated block at all different points in the config.js file, but I either get a compile fail, or compile succeed, but no mermaid behaviour.
Thanks!
It is now working - I think the issue here was that the project I was attempting to use mermaid on was a 2.1.0 project. Once I updated it to 2.2.0 then things work as the documentation suggests.
I have a vue project which uses Vite in place of Webpack, and when I try to use import x from './src/assets/my/path/to/image.png' to resolve an image to compile-time URL, I am greeted by the following error message:
✘ [ERROR] No loader is configured for ".png" files: src/assets/my/path/to/image.png
The entire project is pretty close to the scaffold project given by npm init vue#latest (using vue3) so my vite.config.js is pretty basic:
export default defineConfig({
plugins: [vue(), VitePWA({})],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
build: {
manifest: true,
polyfillModulePreload: true,
}
});
What am I missing? How can I configure this? I can't find anything in Vite documentation about loaders.
I had a quite similar issue with my project that I couldn't really solve. The issue seemed that only initially loaded png files were added. Because I am new to Vite, my efforts with the vite.config.js were fruitless.
Instead, I found a different solution to import the assets (import img from '/path/to/img.png' ) in respective js files directly instead of vite.config.js. Since I used these assets for replacement images for toggling buttons, it was a quick fix. Maybe it helps you, too.
I'm switching a SDK from Expo managed workflow to Expo bare workflow to reduce some of the unnecessary libraries included in Expo. I'm currently using some of the libraries such as Secure-store, Constants and Web browser from Expo instead of using the entire Expo package. I have some tests originally ran in jest, jest-expo and Expo. I removed expo from jest and trying to compile jest with only those three expo libraries above along with #unimodules. The tests files have import statements such as:
import * as SecureStore from 'expo-secure-store';
import * as WebBrowser from 'expo-web-browser';
import Constants from 'expo-constants';
However, when compiling jest, it keeps giving me
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. >SyntaxError: Unexpected token import at
import Constants from 'expo-constants'; >ScriptTransformer._transformAndBuildScript(node_modules/#jest/transform/build/ScriptTransformer.js:471:17)
Seems like I might have resolved unexpected imports for expo-secure-store since I was getting that error before. I switched from Babel6 to babel7, added a babel.config.js that looks like this:
module.exports = {
presets: [
'#babel/preset-env'
],
env: {
test: {
presets: [['#babel/preset-env']]
}
},
plugins: [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
]
};
And i'm switching from jest-preset: jest-expo to jest-preset: react-native.
Am I doing something wrong here with the workflow? Any help appreciated.
A bit late but I was having this problem and I fixed adding
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
following the guide from https://docs.expo.io/guides/testing-with-jest/
What is the correct way to import ractive and ractive-load to my rollup project? npm or github?
Currently I am using npm to install each one:
npm install --save-dev ractivejs/ractive
And
npm install --save-dev ractivejs/ractive-load
And I'm using rollup-plugin-commonjs with rollup-plugin-node-resolve to corretly bundle them (rollup.config.js in the end of the question):
import Ractive from 'ractive';
import load from 'ractive-load';
...
But it seems that ractive-load also imports other modules in its code, causing this error:
Error parsing /home/.../node_modules/rcu/src/make.js: 'import' and 'export' may only appear at the top level (2:0) in /home/.../node_modules/rcu/src/make.js
How can I correctly use Rollup and which are the right sources for this case (npm or github)?
Here is my rollup.config.js:
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
export default {
entry: 'src/main.js',
plugins: [
nodeResolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs({
sourceMap: false
}),
// uglify()
],
format: 'iife',
moduleName: 'Altiva',
dest: 'altiva.js'
};
ractive-load is intended to "read" link tags in the browser and then do AJAX requests for the component file, then it uses a library called rcu to convert the component files into usable javascript components.
What you need is a utility (that uses rcu or does equivalent work) to turn your component files into javascript files that you can run during build process then hand-off to rollup. Fortunately, it looks like there is a rollup plugin rollup-plugin-ractive designed to do just that:
rollup({
entry: 'src/main.js',
plugins: [
ractive({
// By default, all .html files are compiled
extensions: [ '.html', '.ract' ],
// You can restrict which files are compiled
// using `include` and `exclude`
include: 'src/components/**.html'
})
]
}).then(...)
There's also list of some of the available loaders here, among them are "plain vanilla js" variants as well.