I’m using NextJS, TailwindCSS and Typescript. When running in development, everything works as expected, but when running in production, no tailwindcss classes are applied. Here is a link to the repo: https://github.com/Capsule-app/next.
This problems occurred because of Purge. Please check the official page
Few possible way to fixed this issues.
Option A (Quick & Dirty Plus Lazy) :
In tailwind.config.js file try purge: false
Option B:
If you are using purge: ["./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,ts,jsx,tsx}"], Or If you have custom css class or third-party lib class then follow Safelisting with `install #fullhuman/postcss-purgecss first then try
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production'
? {
'#fullhuman/postcss-purgecss': {
// added sections folder and changed extension to jsx
content: ['./src/components/**/*.jsx', './src/pages/**/*.js'],
defaultExtractor: content =>
content.match(/[\w-/:]+(?<!:)/g) || [],
},
}
: {}),
},
}`
Note: Each solution depend on it's context. I request to you read official docs carefully.
Related
I'm trying to set up plotly.js in nuxt but whatever I do I get this cryptic error
self is not defined
I tried to install plotly.js and plotly.js-dist same error shows.
I would prefer to make custom build so I tried like this in nuxt plugins:
// here we use custom partial bundle
import plotly from 'plotly.js/lib/core';
import barpolar from 'plotly.js/lib/barpolar';
export default function (_, inject) {
plotly.register([barpolar]);
inject('plotly', plotly);
}
but whenever I register nuxt plugin site crashes with aforementioned error.
Even not going down custom bundle route, and using dist lib still fails just the same.
I also tried not to employ nuxt plugins system but to import manually and to set up, same things happen.
I also added ify-loader as recommended here: https://github.com/plotly/plotly-webpack
and this is my nuxt.config.js in regards to webpack plugin:
build: {
extend(config, { isClient }) {
console.log('config :>> ', config);
config.module.rules.push({
test: /\.js$/,
use: [
'ify-loader',
'transform-loader?plotly.js/tasks/compress_attributes.js',
],
});
},
},
still no luck.
I presume this is problem with webpack 5 and plotly.js not working well together in default setup but I have no idea how to solve this.
Help appreciated.
The reason why this wasn't working is that plotly tried to access document, and in SSR that would obviously fail.
So to fix this I just had to assign plugin in client only mode like this:
plugins: [
// other plugins
{ src: '~/plugins/plotly', mode: 'client' },
],
and it worked.
I'm learning Nuxt. I've set up a project, with ESLint included. Here's my index.vue:
<template>
<h1 class=reddo>Hello, world</h1>
</template>
<script>
export default {
head() {
// Set Meta Tags for this Page
}
// ...
}
</script>
<style>
.reddo {
color: red;
}
</style>
When I run this I get this:
(It doesn't say this is from ESLint, but I assume it is). The first error complains about the indentation before the <h1>. Do I need to do something to make it understand .vue files so it validates only the <script> part or something?
Thank you in advance.
Since you followed the Nuxt intro video, you likely have a .eslintrc.js file in your project folder that extends a config from #nuxt/eslint-config that adds this parser and some default rules (source code).
The default configuration is linting the entire .vue file, as the Vue parser understands them. There are some limitations to the parser as well which may be triggering your linter if there were any changes not from the Nuxt config.
You can change or disable this configuration by editing your .eslintrc.js file; however, there are many advantages to statically analyzing your code using a linter. So consider finding or making a config that has few stylistic rules (or ones that you like) so you can still catch possible errors, including ones specific to Vue.
If you want to revert to a working .eslintrc.js file, try copying the changes from a new create-nuxt-app.
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'#nuxtjs',
'plugin:nuxt/recommended'
],
plugins: [
],
// add your custom rules here
rules: {}
}
The Vuetify document says:
Blockquote
Once installed, locate your webpack.config.js file and copy the snippet below into the rules array. If you have an existing sass rule configured, you may need to apply some or all of the changes below. If you are you looking to utilize the vuetify-loader for treeshaking, ensure that you are on version >=4 of Webpack. You can find more information on setting it up with webpack on the A-la-carte page.
// webpack.config.js
module.exports = {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
],
}
However, there is no webpack.config.js in my project. And I did create my project using webpack.
Could anyone tell me where should I add the specified code into?
Thanks!
Edited:
The reason why I need to add the mentioned code is that I encountered an error:
webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined" found in ---> <VToolbar> <VCard> <StudentInfo> at src/components/StudentInfo.vue <App> at src/App.vue <Root>
I googled it and it is said it is because Vuetify is not installed correctly.
Please take a look at this link, which my problematic file:
https://github.com/powerseed/Test/blob/master/client/src/components/StudentInfo.vue
The v-toolbar is the part that causes the error. And if you remove it, the error disappears.
I think if I add the mentioned code into webpack.congif.js, it may solve the error, because it is the only part on the Vuetify document that I didn't do. Otherwise I don't know how to solve it...
I have also had difficulty trying to 'vue add vuetify' to my project retrospectively. From now on, when I start a new project I install it from the beginning. If your project is already in dev, you could try doing it via the vue GUI, I've done that in the past for existing projects and had no issues with them breaking.
My solution to using vuetify has always been to do the following in your src/main.js
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify) //Add any theme modifications here
Check out https://vuetifyjs.com/en/getting-started/quick-start/ just below where you found the webpack.config.js
You can set it up using a plugin.js like how it is done in the documentation or how I have above. In my example the webpack.config is not needed!
I upgraded webpacker from (4.0.0.pre.3) to (4.0.2) and it doesn't seem to be emitting my CSS any longer. The screenshot shows the emit log with (4.0.0.pre.3) and(4.0.2) on the right.
My App.jsx is my entry point and it's importing a app.scss. I have the following in my babel.rc
{
presets: [
'#babel/preset-react',
['#babel/preset-env', {
targets: "last 2 versions"
}]
],
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-export-default-from',
['react-css-modules', {
'filetypes': {
'.scss': {
'syntax': 'postcss-scss'
}
},
'generateScopedName': '[name]__[local]--[hash:base64:5]'
}]
]
}
config/webpack/environment.js:
const { environment } = require('#rails/webpacker')
const merge = require('webpack-merge')
const customCssLoaderOptions = {
localIdentName: '[name]__[local]--[hash:base64:5]',
// minimize: environment.NODE_ENV === 'production',
modules: true
}
const CSSLoader = environment.loaders.get('sass').use.find(el => el.loader === 'css-loader')
CSSLoader.options = merge(CSSLoader.options, customCssLoaderOptions)
environment.config.set('entry.App', './app/javascript/packs/App.jsx')
module.exports = environment
I commented out the minimize option because it was causing the new version to break but I don't think that's causing my CSS to not be emitted altogether?
config/webpack/development.js:
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
Not sure if this is the exact issue, but according to the Webpacker 4.x upgrade guide you're meant to replace a .babelrc file with a babel.config.js (amongst other changes).
I'm upgrading to 4.x also, however, and still not getting CSS emits even after all the steps described in that guide. If you managed to solve the issue, please return to share how.
EDIT:
My colleague just informed me that CSS files (in our Rails + Webpacker codebase, at least) now need to be filename.module.css, with the import statement updated to match of course.
Hope that helps someone else!
Not sure why Webpacker 4+ doesn't emit CSS files but you can emit them by updating line 20 in your config/webpacker.yml setting extract_css as true.
19 # Extract and emit a css file
20 extract_css: true
I have read of issues with transpiling node_modules with Nuxt, but the new Nuxt 2 is said to have solved this with a transpile option in the nuxt.config.js file.
https://nuxtjs.org/api/configuration-build/#transpile
Here is what I have:
export default {
router: {
base: '/',
},
build: {
transpile: [
'choices.js',
'lazysizes',
'swiper',
'vee-validate'
],
extractCSS: true
},
srcDir: 'src/',
performance: {
gzip: true
},
render: {
compressor: {
threshold: 100
}
},
dev: false
}
I removed a few things that are unrelated to make it easier to read.
When I run npm run build (nuxt build) the compiled JS files contain references to es6 and es7 code such as const and let etc when it should be var.
I have isolated this issue to be coming from Swiper. It appears to internally depend on something called Dom7 that seems to be causing the problem.
I am wanting to compile these node_modules dependencies to es5 if possible. I'm not sure my current setup is actually doing anything at all in that regard.
I believe Nuxt uses vue-app for Babel, but I even tried the following to no success:
babel: {
presets: [
'#babel/preset-env'
],
plugins: [
'#babel/plugin-syntax-dynamic-import'
]
}
Not much joy there either. Nothing appears differently in the final build.
I am using Nuxt 2.1.0
Any help appreciated. Thanks!
You also need to transpile Dom7, so the Nuxt config should have:
build: {
transpile: [
'swiper',
'dom7',
],
}
I have the exact same issue.
The vendor option under build is deprecated, so it's simply ignored I believe from what I read here https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67#a688
I managed to isolate my case to the "swiper" library. If I remove that from my project, all references to let, const or class are gone. I've tried the transpile option too, but it does not seem to have any effect.
Will you try to exclude swiper from your project to see if we can isolate the issue?