I just have basic nuxt3 starter code but it doesnt work due to cryptic error.
How do I troubleshoot this error? Nuxt troubleshooting is really hard with no relevant messages and no stack trace for the code I wrote.
ℹ Vite client warmed up in 2929ms 10:20:14
ℹ Vite server warmed up in 1633ms 10:20:15
✔ Vite server built in 4061ms 10:20:17
✔ Nitro built in 336 ms nitro 10:20:17
[nuxt] [request error] File is not defined
at $id_a2da3f49 (./.nuxt/dist/server/server.mjs:18735:20)
at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:26247:3)
nuxt.config
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
buildModules: ['#pinia/nuxt'],
css: ['assets/css/main'],
})
assets/css/
#import "tailwind/_base.css";
#import "tailwind/_components.css";
#import "tailwind/_utilities.css";
#import "_checkbox-radio-switch.css";
#import "_app.css";
#import "_scrollbars.css";
#import "_progress.css";
#import "_table.css";
Layouts -> default.vue
<template>
<div>
<side-menu/>
<slot />
<footer-bar />
</div>
</template>
Pages -> index.vue
Related
The main problem is under the after tag. You can ignore the other parts above.
origin
I want to insert a chart (linechart) into my vuepress page.
first
I chose echart, use <script src="echarts.js"></script> to include it in my .md file, But failed.
[vite] Internal server error: Tags with side effect (<script> and <style>) are ignored in client component templates.
It seems that I can't use <script> in it? But I looked up Markdown and Vue SFC , It just says that you should avoid using more than one <script> in VuePress markdown. Does it mean I can use just a single <script> in .md file?
after
I tried to use echart vue component. Followed the tutorial, I just use register-components plugin to register it. These are my config:
.vuepress/config.ts
const { registerComponentsPlugin } = require('#vuepress/plugin-register-components')
const { path } = require('#vuepress/utils')
export default defineUserConfig({
...
plugins: [
...
registerComponentsPlugin({
componentsDir: path.resolve(__dirname, './components')
}),
]
})
.vuepress/components/TestMe.vue
<template>
<h1>Test my component</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
Isn't it a simplest component for test?
Then I add <TestMe /> to my .md file. But it failed again. The h1 title couldn't show and my web gave out a warning:
to see the warning information
I have no idea about that.
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 added a semantic-ui-css-only npm module in a svelte app project. Imported the module import "../node_modules/semantic-ui-css/semantic.css"; in main.js file. When I run npm run dev I get this error Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript) Not sure what the solution is. My hypothesis is the # characters in the CSS causing issues no.
Semantic development is dead but you can replace it with Fomantic
read this issue Is Semantic UI development dead ?
and this The future of Fomantic as v3.0
After talking about this, how about this rollup plugin ?
https://www.npmjs.com/package/rollup-plugin-css-only
main.js
import App from './App.svelte';
import 'fomantic-ui-css/semantic.min.css';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
rollup.config.js
...
import css from 'rollup-plugin-css-only';
...
plugins: [
svelte({
dev: !production,
css: css => {
css.write('public/build/bundle.css');
}
}),
css({ output: './public/build/base.css' }),
...
...
]
index.html
<link rel='stylesheet' href='/build/base.css'>
<link rel='stylesheet' href='/build/bundle.css'>
yarn encore dev fail after setting up material-components
I installed material-components using yarn add material-components-web --dev
and then configured app.js like this :
/* --- CSS --- */
import "../css/normalize.scss";
import "material-components-web/material-components-web.scss"
import "../css/layout.scss";
import "../css/style.scss";
/* --- RESOURCES ---*/
import $ from "jquery";
import * as mdc from "material-components-web";
When running yarn encore dev, I get the following error :
ERROR Failed to compile with 1 errors 22:30:40
error in ./node_modules/material-components-web/material-components-web.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
#import "#material/elevation/mixins";
^
File to import not found or unreadable: #material/elevation/mixins.
in /var/www/vhosts/salon-virtuel/node_modules/#material/button/_mixins.scss (line 23, column 1)
at runLoaders (/var/www/vhosts/salon-virtuel/node_modules/webpack/lib/NormalModule.js:301:20)
at /var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.render [as callback] (/var/www/vhosts/salon-virtuel/node_modules/sass-loader/lib/loader.js:52:13)
at Object.done [as callback] (/var/www/vhosts/salon-virtuel/node_modules/neo-async/async.js:8077:18)
at options.error (/var/www/vhosts/salon-virtuel/node_modules/node-sass/lib/index.js:294:32)
# ./assets/js/app.js 7:0-62
Entrypoint app [big] = runtime.js vendors~app.js app.css app.js
error Command failed with exit code 2.
Imports in files :
node_modules/material-components-web/material-components-web.scss
#import "#material/elevation/mdc-elevation";
node_modules/#material/elevation/mdc-elevation.scss
#import "./mixins";
#include mdc-elevation-core-styles;
node_modules/#material/elevation/_mixins.scss
#import "#material/feature-targeting/functions";
#import "#material/feature-targeting/mixins";
#import "#material/theme/variables";
#import "./variables";
Any idea about why it's happening, and how to fix this?
I think you are very close. Try to edit your encore config to include node_modules to sass loader like this:
// enables Sass/SCSS support
.enableSassLoader(function(options) {
// https://github.com/sass/node-sass#options
options.includePaths = ['./node_modules'];
}, {
// set optional Encore-specific options
// resolve_url_loader: true
});
explained here
For the case, someone else stumbles over this.
It may would have also solved your issue, if you changed the way how you import the scss/sass files.
#import "~#material/feature-targeting/functions";
#import "~#material/feature-targeting/mixins";
#import "~#material/theme/variables";
#import "./variables";
The ~ references the node_modules as well. That is at least how I do it and it works without any special config for the sass-loader.
I am trying to install and use the Salesforce Lightning Design System for my apps styles. But it just doesn't work. My steps (I am using vue-cli 3.4.0 + typescript):
npm install #salesforce-ux/design-system --save
At first I imported it into the styles of my App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
#import url("/node_modules/#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css");
body {
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg stroke='%23CCC' stroke-width='0' %3E%3Crect fill='%23F5F5F5' x='-60' y='-60' width='110' height='240'/%3E%3C/g%3E%3C/svg%3E");
}
</style>
Then I added the classes to a simple button:
<button class="slds-button slds-button_brand" #click="createTask">Save</button>
This does nothing. Classes are applied, but no styling.
I tried adding it to my main.ts:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import '../node_modules/#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css'
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
This makes the whole build fail because it says it can't resolve the module:
./src/main.ts
Module not found: Error: Can't resolve '../node_modules/#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css' in '/usr/src/app/src'
This happens even though the dependency is in my package.json and the autocomplete in vscode shows me the relative path. I've tried diferent relative paths and none of them work. What's going on here?