I am getting the error:
Unable to resolve path to module '#aws-amplify/ui-react/styles.css'
I am using the amplify authenticator component shown in the following link https://ui.docs.amplify.aws/components/authenticator#quick-start
I had already my backend configured as always and is fine and working.
npx create-react-app exampleapp
npm start
amplify init
amplify add api
amplify push
npm install aws-amplify #aws-amplify/ui-react
amplify add auth
amplify pus
The app.js is configured as follows
import { Amplify } from 'aws-amplify';
import { Authenticator } from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
Amplify.configure(awsExports);
export default function App() {
return (
<Authenticator>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
In general the application runs fine and is able to connect with the amplify backend. The problem is that it can not find the css style. It seems that is not in the'#aws-amplify/ui-react'. My Node version is 16.13.1. Also, I am using the last version of the packages at this moment in the package.json
"#aws-amplify/ui-react": "^2.1.5",
"aws-amplify": "^4.3.10"
When I initially saw #senju's answer (upvote it!) I thought, "that will just hide the problem". But no, in my case eslint was the cause of the problem.
Rather than #senju's solution of disabling warnings for all unresolved imports, I suggest just disabling it for the specific import with an eslint-specific comment:
// eslint-disable-next-line import/no-unresolved
import '#aws-amplify/ui-react/styles.css';
Try upgrading aws-amplify to 4.3.11 or above and upgrade to the latest version of #aws-amplify/ui-react. This version is compatible with the latest version of create-react-app which uses Webpack 5. This issue was fixed in aws-amplify here:
https://github.com/aws-amplify/amplify-js/pull/9358
I had the same issue. Changing my eslint setting worked for me.
Here is my .eslintrc
{
"extends": [
"next",
"next/core-web-vitals",
"prettier",
"plugin:testing-library/react",
"plugin:import/recommended",
"plugin:import/warnings",
"plugin:storybook/recommended"
],
"rules": {
"import/no-unresolved": "off", //add
"import/order": [
"error",
{
"alphabetize": {
"order": "asc"
}
}
]
},
"overrides": [
{
"files": ["*.stories.#(ts|tsx|js|jsx|mjs|cjs)"],
"rules": {
"storybook/hierarchy-separator": "error",
"storybook/default-exports": "off"
}
}
]
}
I used the latest version of aws-amplify and still got the error on build. Changing .eslintrc worked.
Related
everyone.
This is my first time here, and I apreciate your helps.
I'm new with Vuejs, student actually.
Overview:
I'm trying build a plugin component to show simple notifications.
Then I'm using Vue3 and vite. I created a demo and run npm link to test in local.
Problem:
In my demo project when I run npm run dev everything working correctly, but when I run npm build something stop working in my plugin componet. I found that v-for is not working inside of my plugin component, in my demo project it's working normal. I think could be some setup in my vite.config to render it correctly.
This is my vite config:
// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.js'),
name: 'Vue3SimpleNotification',
// the proper extensions will be added
fileName: (format) => `vue3-simple-notification.${format}.js`,
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue'
}
}
}
} ,
plugins: [vue()]
})
I'm currently trying to use amcharts 5 in a Nuxt3 app, and had a couple of graphs working fine. However at some point amcharts has randomly stopped working and I get the following error:
[h3] [unhandled] H3Error: am5 is not defined
at createError (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:196:15)
at Server.nodeHandler (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:386:21) {
statusCode: 500,
fatal: false,
unhandled: true,
statusMessage: 'Internal Server Error'
}
I tried using amcharts5 according to the docs by importing it and using it in lifecycle hooks.
And initially had an issue related to ESM modules which was resolved by adding "type" : "module" to package.json. After that I made a couple of graphs and they worked fine. However shortly after writing a third graph I changed the ssr setting in nuxt.config.js to false and shortly after got the above error.
I've tried adding amcharts to the transpile array in the nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
publicRuntimeConfig: {
VUE_APP_AUTH_COOKIE: process.env.VUE_APP_AUTH_COOKIE,
VUE_APP_ENV: process.env.VUE_APP_ENV,
VUE_APP_SESSION_HASH: process.env.VUE_APP_SESSION_HASH,
VUE_APP_USMART_ORIGIN: process.env.VUE_APP_USMART_ORIGIN,
MAP_BOX_ACCESS_TOKEN: process.env.MAP_BOX_ACCESS_TOKEN
},
css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
build: {
transpile: ["vuetify", "#amcharts/amcharts5"]
},
vite: {
define: {
"process.env.DEBUG": false
}
},
buildModules: [
// ...
'#pinia/nuxt',
],
})
but didn't have any joy.
I have also tried setting up a plugin:
plugins/amCharts.client.ts
import * as am5 from "#amcharts/amcharts5";
import * as am5xy from "#amcharts/amcharts5/xy";
import * as am5radar from "#amcharts/amcharts5/radar";
import am5themes_Animated from "#amcharts/amcharts5/themes/Animated";
export default defineNuxtPlugin(() => {
return {
provide: {
am5: am5,
am5xy: am5xy,
am5radar: am5radar,
am5themes_Animated: am5themes_Animated,
}
}
})
and I'm retrieving it in the component like so:
const { $am5, $am5radar, $am5themes_Animated, $am5xy } = useNuxtApp()
The issue was a solved by removing a remaining piece of code calling the am5 instance as explained here.
Happens to anybody!
I'm trying to use Next.js next/future/image experimental component.
I upgraded the Next.js version in package.json to "next": "^12.2.0".
Here's my next.config.js file:
/** #type {import('next').NextConfig} */
const nextConfig = {
strictMode: true,
experimental: {
images: {
allowFutureImage: true,
},
},
images: {
domains: ['firebasestorage.googleapis.com',],
},
};
module.exports = nextConfig;
It doesn't allow me to use this feature. Here's the error message in the browser console:
Error: The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include `experimental: { images: { allowFutureImage: true } }` in your next.config.js file.
For Next v13 users:
I believe next/future/image is now the default Image component. So no additional work necessary! Just import and use
import Image from 'next/image'
For Next v12.3 users(like the author of this question)
You don't need to add anything to the config to use future/image. The future image is now stable. Just use it directly by importing
import Image from 'next/future/image'
In fact, adding an images property to the config will cause an error, since the config schema has been updated. So don't do that.
// next.config.js
module.exports = {
experimental: {
images: { // This will cause an error
allowFutureImage: true,
},
},
}
The solution that worked for me was to add the experimental rule and stop the nextjs server and restart it. Then it would start working
module.exports = {
experimental: {
images: {
allowFutureImage: true,
},
},
}
I'm currently working with NextJS version 12.3.1, and if I enable it in the next.config.js then I get an ugly warning on the terminal. So it is best to just import Image from "next/future/image" and not add the config to avoid the Warning. Hope others using 12.3.1 find this useful ( using future/image gets rid of the nasty wrapper divs/spans around the )
Warning I'm seeing with config in place:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - Invalid next.config.js options detected:
- The value at .experimental has an unexpected property, images, which is not in the list of allowed properties (adjustFontFallbacks, amp, appDir, browsersListForSwc, cpus, craCompat, disableOptimizedLoading, disablePostcssPresetEnv, esmExternals, externalDir, fallbackNodePolyfills, forceSwcTransforms, fullySpecified, gzipSize, incrementalCacheHandlerPath, isrFlushToDisk, isrMemoryCacheSize, largePageDataBytes, legacyBrowsers, manualClientBasePath, modularizeImports, newNextLinkBehavior, nextScriptWorkers, optimizeCss, optimisticClientCache, outputFileTracingRoot, pageEnv, profiling, proxyTimeout, runtime, scrollRestoration, serverComponents, sharedPool, sri, swcFileReading, swcMinify, swcMinifyDebugOptions, swcPlugins, swcTraceProfiling, urlImports, workerThreads).
See more info here: https://nextjs.org/docs/messages/invalid-next-config
warn - You have enabled experimental feature (images) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
I am trying to import "../../node_modules/react-quill/dist/quill.snow.css"; in my next.js project but I get following error
[ error ] ./node_modules/react-quill/dist/quill.snow.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
Location: components\crud\BlogCreate.js
I managed to make it work with next.config.js. It worked with this configuration
// next.config.js
const withCSS = require('#zeit/next-css');
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
});
But now I am getting a warning,
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled
It seems my solution is not the best way to solve this problem. How could I get rid of this warning?
You may remove the #zeit/next-css plugin because the Next.js 9.3 is very simple. Then Next.js 9.3 is Built-in Sass Support for Global Stylesheets after removing the #zeit/next-css you may install
npm install sass
Then, import the Sass file within pages/_app.js.
Global CSS
Import any global CSS in the /pages/_app.js.
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Importing CSS in components or pages won't work with the built-in CSS support.
Component CSS
Next.js supports CSS Modules using the [name].module.css file naming convention.
components/Button.module.css
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
color: white;
background-color: red;
}
components/Button.js
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
Destroy
</button>
)
}
CSS Module files can be imported anywhere in your application.
Third-party CSS on Component / Page level
You can use <link> tag in the component.
const Foo = () => (
<div>
<link
href="third.party.css"
rel="stylesheet"
/>
</div>
);
export default Foo;
The loaded stylesheet won't be automatically minified as it doesn't go through build process, so use the minified version.
If none of the options doesn't fit your requirements consider using a custom CSS loader like #zeit/next-css.
In that case you will see a warning which is fine:
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled
Suggested reading:
Next.js Built-In CSS Support
Global SASS
CSS Modules
Install sass module by running following command.
npm install sass
You then need to remove all css-loader and sass-loader configuration from next.config.js.
For example, I had to remove the withSass() function (in your case withCSS()) and just return the configuration object.
Had to remove the following lines from next.config.js
{
test: /\.scss$/,
use: {
loader: "sass-loader",
options: {
data: '#import "./scss/_variables.scss"',
sourceMap: true,
},
},
}
Move your options to sassOptions in next config file.
sassOptions: {
data: '#import "./scss/_variables.scss"',
sourceMap: true,
}
Also remove the old #zeit/next-sass and #zeit/next-css from package.json
I had to remove following #zeit dependency from my package.json
"dependencies": {
"#zeit/next-sass": "1.0.1",
This worked for me.
For more details, visit https://nextjs.org/docs/basic-features/built-in-css-support
I have a nextjs app with redux.
When I try to use the ?? operator in my pages/index, it works as it should.
I then tried to load up a redux store with a bunch of reducers. When I hit the ?? in a reducer file, I get this error:
Support for the experimental syntax 'optionalChaining' isn't currently enabled (71:32):
I also get the error in any other file: component, actions and reducers. It is only directly in the pages/* that the plugin is working properly.
My app is using next#9.1.1 and redux#4.0.4. Here is my .babelrc file:
"env": {
"development": {
"presets": ["next/babel"],
"plugins": [
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-proposal-nullish-coalescing-operator",
[
"styled-components",
{ "ssr": true, "displayName": true, "preprocess": false }
]
]
}
}
}
Is there something that would override my babel config for certain files? If so, what am I missing? What else should I look at?