I am getting errors while setting up Amplify Authentication with React and Vite.
This is what I have tried already.
Packages used:
"#aws-amplify/ui-react": 4.2.0
"aws-amplify": 5.0.5
Main.jsx
import Amplify from "aws-amplify"
import awsExports from "./aws-exports"
Amplify.configure(awsExports)
vite.config.js
import { defineConfig } from 'vite'
import postcss from './postcss.config.js'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
define: {
'process.env': process.env,
'global': {}
},
css: {
postcss,
},
plugins: [react()],
resolve: {
alias: [
{
find: /^~.+/,
replacement: (val) => {
return val.replace(/^~/, "");
},
},
{
find: './runtimeConfig', replacement: './runtimeConfig.browser',
}
],
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
}
}
})
Running, npm run dev, app crashes and console has this error:
'Uncaught SyntaxError: The requested module '/node_modules/.vite/aws-amplify.js?v=d4f24853' does not provide an export named 'default' (at main.jsx:5:1)'
Related
I'm trying to load vuetify or element plus components directly into #app.
It only works if I import all components, which of course means a huge file.
If I do manual or automatic import then I get :
Failed to resolve component:
I'm probably missing something in Vite but I can't figure it out.
If I load demo.vue then it works fine.
//Main.js
import { createApp } from 'vue/dist/vue.esm-bundler';
app.component('demo', Demo);
app.mount('#app');
//demo.vue
<el-collapse v-model="activeName" accordion>
<el-collapse-item :title="test" name="1">
<div>
AAA
</div>
<div>
AAA
</div>
</el-collapse-item>
</el-collapse>
If I load the contents of demo.vue in root #conatiner then error, but if I load all components then it works.
import { createApp } from 'vue/dist/vue.esm-bundler';
const app = createApp({
mounted() {
console.log('The app is working')
}
});
const app2 = createApp(App)
app2.mount('#container')
My vite-config
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
//base: '/dist/',
plugins: [
vue({
}), AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
], resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler',
},
}, build: {
outDir: '../wwwroot/distback',
rollupOptions: {
input: {
front: fileURLToPath(new URL('./qasar/index.html', import.meta.url)),
},
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
}
},
define: { 'process.env': {} },
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
],
},
server: {
port: 5000,
},
})
Started a vue2 project from scratch, which is using Vite. I would like to force the user to log in to Cognito via Amplify.
When I run npm run dev I receive the following error:
VITE v3.1.3 ready in 405 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
✘ [ERROR] Could not read from file: /Users/thename/dev/mwt-notification-backend/example-vue/vue/dist/vue.runtime.esm.js
node_modules/#aws-amplify/ui-vue/dist/index.js:1:496:
1 │ ...ss, createTextVNode, Fragment, renderList, onBeforeMount, useAttrs, withModifiers, h as h$2, onUnmounted } from "vue";
╵ ~~~~~
/Users/reikschatz/dev/mwt-notification-backend/example-vue/node_modules/esbuild/lib/main.js:1566
let error = new Error(`${text}${summary}`);
Not sure why this happens but here are my files:
package.json
"dependencies": {
"#aws-amplify/core": "^4.7.5",
"#aws-amplify/ui-vue": "^2.4.22",
"aws-amplify": "^4.3.36",
"buefy": "^0.9.22",
"vue": "^2.7.10"
},
main.js
import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
import App from './App.vue';
import Amplify from '#aws-amplify/core';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Vue.use(Buefy);
new Vue({
render: (h) => h(App),
}).$mount('#app');
App.vue
<script>
import { Authenticator } from '#aws-amplify/ui-vue';
import '#aws-amplify/ui-vue/styles.css';
export default {
components: { Authenticator },
};
</script>
<template>
<authenticator> ... </authenticator>
</template>
vite.config.js
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import legacy from '#vitejs/plugin-legacy';
import vue2 from '#vitejs/plugin-vue2';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue2(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
}),
],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
},
},
});
The version of #aws-amplify/ui-vue you're using in your project requires Vue v3 and does not support your version of Vue. To use Vue v2, you'll need to work with the legacy #aws-amplify/ui-components package: https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue
I'm trying to migrate my React project from CRA to Vite, this is my vite.config.js:
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
import envCompatible from 'vite-plugin-env-compatible'
import relay from "vite-plugin-relay"
import macrosPlugin from "vite-plugin-babel-macros"
import path from 'path';
import fs from 'fs/promises';
export default defineConfig({
resolve: {
alias: {
'~': path.resolve(__dirname, 'src'),
'#material-ui/core': path.resolve(__dirname, 'node_modules/#material-ui/core')
}
},
esbuild: {
loader: "tsx",
include: /src\/.*\.[tj]sx?$/,
exclude: [],
},
optimizeDeps: {
esbuildOptions: {
plugins: [
{
name: "load-js-files-as-jsx",
setup(build) {
build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
loader: "tsx",
contents: await fs.readFile(args.path, "utf8"),
}));
},
},
],
},
},
define: {
global: {},
},
plugins: [
envCompatible(),
react(),
relay,
//macrosPlugin(),
],
})
My GraphQL query files are like this:
import graphql from 'babel-plugin-relay/macro'
const getQuery = () => graphql`
query UserQuery($id: ID!) {
user(id: $id) {
id
fullName
}
}
`
export default getQuery
When I tried to run the project in dev mode (command $ vite), I got this error:
So I did some search and replaced vite-plugin-relay to vite-plugin-babel-macros like this:
// others import
import relay from "vite-plugin-relay"
import macrosPlugin from "vite-plugin-babel-macros"
export default defineConfig({
// configs like bellow
plugins: [
envCompatible(),
react(),
//relay,
macrosPlugin(),
],
})
So I started to get a new error:
How can I configure Relay to work on Vite.JS?
Might be a bit late, but the issue has been fixed in Relay#13 and you can find some workarounds in this thread for older versions of Relay :
https://github.com/facebook/relay/issues/3354
You can also try adding the option eagerEsModules: true to your relay babel plugin configuration.
Unless you have some specific usecase that requires the use of babel-plugin-relay, your issue should be resolved if you change your imports from
import graphql from 'babel-plugin-relay/macro'
to
import { graphql } from "react-relay";
You should only need the relay vite plugin at that point, and can remove vite-plugin-babel-macros
There's a few things wrong with your setup.
1. Don't use vite-plugin-babel-macros:
Use #vitejs/plugin-react instead.
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import relay from "vite-plugin-relay";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [relay, react({
babel: {
plugins: ['babel-plugin-macros']
},
})],
});
You can probably get it to work with vite-plugin-babel-macros, but the later is an official plugin.
2. Don't use 'babel-plugin-relay/macro':
Use the following instead:
import { graphql } from "react-relay";
It's unclear to me why the official docs suggest using babel-plugin-relay/macro, but that just doesn't work.
3. Configure relay.config.js correctly:
{
"src": "./src",
"language": "typescript",
// Change this to the location of your graphql schema
"schema": "./src/graphql/schema.graphql",
"exclude": [
"**/node_modules/**",
"**/__mocks__/**",
"**/__generated__/**"
],
"eagerEsModules": true
}
In particular, make sure you use language: typescript and eagerEsModules.
4. Sample repository
I wrote a sample repository showing how to properly configure React Relay with Vite.js and TypeScript, you can find it here.
I've started a Vue 3 project (currently not much more than a boilerplate with TypeScript) and tried to add i18n to it.
As far as I've got, vue-i18n does not work properly with Vue 3; but vue-i18n-next should.
here is my main.ts
import { createApp } from "vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import { createI18n } from 'vue-i18n'
import App from "./App.vue";
//import en from "./locale/en.json"
//import ru from "./locale/ru.json"
const messages = {
en: {
message: {
hello: 'hello world'
}
},
ru: {
message: {
hello: 'Таки здравствуйте'
}
}
}
const i18n = createI18n({
locale: 'ru',
/* messages: {
en,
ru
},*/
messages,
fallbackLocale: 'en'
})
const app = createApp(App)
.use(store)
.use(router)
.use(i18n);
.mount("#app");
here is my App.vue
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<div>{{ $t("message.hello") }}</div>
<router-view />
</template>
However, I get a warning
[intlify] The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format. So translate function return 'message.hello'.
Indeed I've found and installed #intlify/message-compiler - but don't have any idea on using it.
my webpack.config.js is taken from examples
const path = require("path");
module.exports = {
rules: [
{
test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
type: "javascript/auto",
loader: "#intlify/vue-i18n-loader",
include: [
// Use `Rule.include` to specify the files of locale messages to be pre-compiled
path.resolve(__dirname, "./src/locale"),
],
},
],
};
my vue.config.js seems to be pretty simple
module.exports = {
chainWebpack: (config) => {
config.plugin("html").tap((args) => {
args[0].template = "./resources/index.html";
return args;
});
},
configureWebpack: {
devServer: {
watchOptions: {
ignored: ["/node_modules/", "/public/", "**/.#*"],
},
},
},
parallel: true,
devServer: {
disableHostCheck: true,
public: process.env.DEV_PUBLIC ?? "mlb.ru",
port: process.env.DEV_PORT ?? 8080,
},
};
and I've even found that my messages has been compiled into bundle.
Maybe anyone has any success with vue-18n-next or maybe some other i18n solution for Vue 3?
The repo & docs have moved:
https://github.com/intlify/vue-i18n-next
I have tried a very similar code and import { createI18n } from 'vue-i18n' should work for you as long as you are in vue-i18n#9.0.0-beta.16
... [code]
import { createI18n } from 'vue-i18n'
const messages = {
es: {
message: {
value: 'Hola Español.',
},
},
en: {
message: {
value: 'Hello English.',
},
},
}
const i18n = createI18n({
locale: 'es',
messages,
})
app
.use(i18n)
.mount('#app')
[code] ...
Like Vue itself, the i18n package comes with various versions. Like Vue, they have a version with and without a runtime compiler. From the docs:
vue-i18n.esm-bundler.js: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings)
The warning you received is apparently telling you that you need this compiler version. The docs are slightly less clear about this but you need to point the import to the runtime compiler version of the package, like this:
import { createI18n } from "vue-i18n/dist/vue-i18n.esm-bundler.js";
I use i18n in external file (i18n.js) I hope it helps you.
i18n.js
import { createI18n } from 'vue-i18n'
const messages = {
en: {
message: {
hello: 'hello world'
}
},
ru: {
message: {
hello: 'Таки здравствуйте'
}
}
}
const i18n = createI18n({
locale: 'en',
messages
})
export default i18n
main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from "#/i18n"
const app = createApp(App)
app.use(i18n)
app.mount('#app')
App.vue
<template>
<span><div>{{ $t("message.hello") }}</div></span>
</template>
'DragulaModule' is not exported by node_modules\ng2-dragula\index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
app\app.module.js (13:9)
11: import { BrowserModule } from '#angular/platform-browser';
12: import { AppComponent } from './app.component';
13: import { DragulaModule } from 'ng2-dragula';
^
14: import { FileUploadModule } from "ng2-file-upload";
rollup.config.js
import rollup from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
export default {
entry: 'app/main.js',
dest: 'dist/build.js',
sourceMap: false,
format: 'iife',
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: 'node_modules/rxjs/**',
}),
uglify()
]
}
Using Rollup for tree-shaking and build gives me the above error after successfully generating files with aot. Any suggestion is highly appreciated.
Try add a named export in your rollup.config
commonjs({
include: 'node_modules/rxjs/**',
namedExports: {
'node_modules/ng2-dragula/ng2-dragula.js': [ 'DragulaModule', 'DragulaService' ]
}
})
You can read more about custom named exports here: https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports
if u r using angular 6
adding this line in to pollyfills.ts fixed my problem
(window as any).global = window;