Related
I'm using nuxt 3 and i18n v.9.
I wanna to use new feature in i18n v.9 that allows you to make a block next to
script and template block and put translates there .
like this :
<template>
{{ $t('hi') }}
</template>
<i18n>
{
"en": {
"hi": "hello world!"
},
"ja": {
"hi": "こんにちは、世界！"
}
}
</i18n>
and this is nuxt.config.ts
import VueI18nVitePlugin from '#intlify/unplugin-vue-i18n/vite'
import path from 'path'
export default defineNuxtConfig({
modules: [
'#pinia/nuxt','#nuxtjs/tailwindcss' ,'#nuxt-hero-icons/outline/nuxt','#nuxt-hero-icons/solid/nuxt'
],
runtimeConfig: {
public: {
captchaKey: 'a',
apiUrl:'z'
}
},
vite: {
plugins: [
VueI18nVitePlugin({
include: [
path.resolve(__dirname, './components/*.*'),
path.resolve(__dirname, './pages/*.*'),
]
})
]
}
})
and this is the package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"#intlify/unplugin-vue-i18n": "^0.7.0",
"#intlify/vite-plugin-vue-i18n": "^6.0.3",
"#nuxtjs/tailwindcss": "^5.3.3",
"nuxt": "3.0.0-rc.10",
"sass": "^1.55.0",
"sass-loader": "10.1.1",
"tailwindcss-flip": "^1.0.0",
"vue-i18n": "^9.2.2"
},
"dependencies": {
"#heroicons/vue": "^2.0.11",
"#kyvg/vue3-notification": "^2.4.1",
"#nuxt-hero-icons/outline": "^1.0.1",
"#nuxt-hero-icons/solid": "^1.0.1",
"#pinia/nuxt": "^0.4.2",
"#vueform/multiselect": "^2.5.2",
"axios": "^0.27.2",
"daisyui": "^2.28.0",
"jenesius-vue-modal": "^1.7.2",
"sweetalert2": "^11.4.33",
"vee-validate": "^4.6.7",
"vue-recaptcha-v3": "^2.0.1",
"vue3-loading-overlay": "^0.0.0",
"yup": "^0.32.11"
}
}
The problem is that translates doesn't come. How can I fix this?
I tried to build my Next.js Commerce with Swell storefront integration. It uses turbo and the result of build is
ERROR: task public not found in turbo pipeline in "turbo.json". Are you sure you added it?
I looked at configuration options of turbo documentation, but I don't have any idea where to put public in turbo.json. I tweaked around with it for a while, but no chance to fix it myself.
/turbo.json:
{
"baseBranch": "origin/main",
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
},
"next-commerce#build": {
"dependsOn": [
"^build",
"$COMMERCE_PROVIDER",
"$BIGCOMMERCE_STOREFRONT_API_URL",
"$NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN",
"$NEXT_PUBLIC_SWELL_STORE_ID"
],
"outputs": [".next/**"]
},
"test": {
"dependsOn": ["^build"],
"outputs": []
},
"lint": {
"outputs": []
},
"prettier-fix": {
"outputs": []
},
"dev": {
"cache": false
},
"start": {
"cache": false
},
"types": {
"outputs": ["dist/**/*.d.ts"]
}
}
}
/package.json
{
"name": "commerce",
"license": "MIT",
"private": true,
"workspaces": [
"site",
"packages/*"
],
"scripts": {
"build": "turbo run build --filter=next-commerce..." ,
"dev": "turbo run dev",
"start": "turbo run start",
"types": "turbo run types",
"prettier-fix": "prettier --write ."
},
"devDependencies": {
"husky": "^7.0.4",
"prettier": "^2.5.1",
"turbo": "^1.2.16"
},
"husky": {
"hooks": {
"pre-commit": "turbo run lint"
}
},
"packageManager": "yarn#1.22.17"
}
/site/package.json
{
"name": "next-commerce",
"version": "0.0.1",
"license": "MIT",
"scripts": {
"dev": "next dev",
"build": "next build public",
"start": "next start",
"analyze": "BUNDLE_ANALYZE=both next build",
"lint": "next lint",
"prettier-fix": "prettier --write .",
"find:unused": "npx next-unused"
},
"sideEffects": false,
"dependencies": {
"#radix-ui/react-dropdown-menu": "^0.1.6",
"#react-spring/web": "^9.4.1",
"#vercel/commerce": "^0.0.1",
"#vercel/commerce-bigcommerce": "^0.0.1",
"#vercel/commerce-commercejs": "^0.0.1",
"#vercel/commerce-kibocommerce": "^0.0.1",
"#vercel/commerce-local": "^0.0.1",
"#vercel/commerce-ordercloud": "^0.0.1",
"#vercel/commerce-saleor": "^0.0.1",
"#vercel/commerce-shopify": "^0.0.1",
"#vercel/commerce-spree": "^0.0.1",
"#vercel/commerce-swell": "^0.0.1",
"#vercel/commerce-vendure": "^0.0.1",
"autoprefixer": "^10.4.2",
"body-scroll-lock": "^4.0.0-beta.0",
"clsx": "^1.1.1",
"email-validator": "^2.0.4",
"js-cookie": "^3.0.1",
"keen-slider": "^6.6.3",
"lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1",
"next": "^12.0.8",
"next-themes": "^0.0.15",
"postcss": "^8.3.5",
"postcss-nesting": "^8.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-fast-marquee": "^1.3.1",
"react-merge-refs": "^1.1.0",
"react-use-measure": "^2.1.1",
"tabbable": "^5.2.1",
"tailwindcss": "^3.0.13"
},
"devDependencies": {
"#next/bundle-analyzer": "^12.0.8",
"#types/body-scroll-lock": "^3.1.0",
"#types/js-cookie": "^3.0.1",
"#types/lodash.random": "^3.2.6",
"#types/lodash.throttle": "^4.1.6",
"#types/node": "^17.0.8",
"#types/react": "^17.0.38",
"eslint": "^8.6.0",
"eslint-config-next": "^12.0.8",
"eslint-config-prettier": "^8.3.0",
"lint-staged": "^12.1.7",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.2.3",
"prettier": "^2.5.1",
"typescript": "4.3.4"
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"eslint",
"prettier --write",
"git add"
],
"**/*.{md,mdx,json}": [
"prettier --write",
"git add"
]
},
"next-unused": {
"alias": {
"#lib/*": [
"lib/*"
],
"#assets/*": [
"assets/*"
],
"#config/*": [
"config/*"
],
"#components/*": [
"components/*"
],
"#utils/*": [
"utils/*"
]
},
"debug": true,
"include": [
"components",
"lib",
"pages"
],
"exclude": [],
"entrypoints": [
"pages"
]
}
}
Hello guys can anybody help with Nextjs v10 build ? it builds without styles :|
here is my package.json and next.config.js
I import all styles in _app.js, it also comes in chrome network -> preview without styles
On vercel everything is ok, but when i try to build on my computer, it's without styles :|
**
next.config.js
**
module.exports = {
images: {
domains: ['localhost','assets.vercel.com','via.placeholder.com','mine-front-new.vercel.app'],
},
}
package.json
{
"name": "mine",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start",
"prod:build": "SET NODE_ENV=production && next build && next export",
"export": "next build && next export"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#fortawesome/fontawesome-free": "^5.13.1",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.57",
"add": "^2.0.6",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"date-fns": "^2.16.1",
"draft-js": "^0.11.7",
"es6-shim": "^0.35.6",
"js-cookie": "^2.2.1",
"jwt-decode": "^3.0.0",
"moment": "^2.27.0",
"next": "10.0.0",
"react": "17.0.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "17.0.1",
"react-facebook": "^8.1.4",
"react-lottie": "^1.2.3",
"react-transition-group": "^4.4.1",
"yarn": "^1.22.10"
},
"devDependencies": {
"#types/cookie": "^0.4.0",
"clsx": "^1.1.1",
"cookie": "^0.4.1",
"prop-types": "^15.7.2",
"react-date-range": "^1.0.3",
"react-reveal": "^1.2.2",
"react-slick": "^0.26.1",
"react-toastify": "^6.0.8",
"slick-carousel": "^1.8.1",
"sweetalert2": "^9.15.2"
}
}
Make sure u use appropriate css loaders. I faced the same issue and resolved using this,
loaders: ['style-loader', 'css-loader', 'less-loader']
My next.config.js
module.exports = withImages({
target: 'serverless',
webpack: function (config, { webpack }) {
config.module.rules.push({
test: /\.(eot|svg|gif|md)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
})
return config
},
})
Below is my code of gruntjs css file is not getting generated even after the scss is compiled successfully with no error
I have tried using the different version and i am using the windows 8
Grunt file:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat:{
js:{
src: 'C:/Local_code/js/*.js',
dest: 'C:/Local_code/src/build.js',
reporterOutput:''
},
css: {
src: 'css/*.css',
dest: 'build/main.css'
}
},
autoprefixer:{
dist:{
files:{
'css/foundation.css':'css/foundation.css'
}
}
},
sass: {
dist: {
options: {
compass: true,
sourceMap:true
},
files: [{
expand: true,
cwd: 'C:/Local-code/Scss/',
src: 'C:/Local-code/Scss/*.scss/',
dest: 'C:/Local-code/build/pratik.css',
ext: '.css'
}]
}
},
postcss: {
options: {
map: true,
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
require('pixrem')(),
//require('autoprefixer')({browsers: 'last 2 versions'}),
require('cssnano')()
]
},
dist: {
src: 'css/*.css'
}
},
})
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-postcss'); //The “src” folder will hold your unprocessed CSS files, and PostCSS will write your compiled CSS files into the “dest” folder.
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify-es');
grunt.loadNpmTasks('grunt-contrib-watch');
//grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('default', ['watch']);
//grunt.registerTask('build', ['autoprefixer']);
};
Package.json
{
"name": "project",
"version": "1.0.0",
"description": "Aem Project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "pratik",
"license": "ISC",
"dependencies": {
"autoprefixer": "^9.6.1",
"compass": "^0.1.1",
"cssnano": "^4.1.10",
"express": "^4.17.1",
"pixrem": "^5.0.0",
"uglify-js": "github:mishoo/UglifyJS2#harmony"
},
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"devDependencies": {
"grunt": "^1.0.4",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^4.0.1",
"grunt-contrib-uglify-es": "^3.3.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-postcss": "^0.9.0",
"ng-packagr": "^5.3.0",
"uglifyjs-webpack-plugin": "^1.3.0"
}
}
Expected result it should generate the valid css file in destination path.
Actual result css file i not getting generated and no error are coming.
(I'm still new to Angular 5 / Webpack, so I apologize for any misunderstandings!) When I run 'webpack-dev-server', it loads all my styles except for my global style sheet, styles.scss, which contains code that resets the margins and padding to 0. But it's able to load all the other html and css, and can update as I change the code. What's weird though is when I run 'ng serve', the global style sheet applies just fine and the margins and padding are gone!
From what I understand, the loaders are transpiling the scss down to css properly, but for some reason the bundling is getting messed up. Perhaps I'm doing something wrong with how I bundle the files together?? I've messed around with the rules in the config files quite a bit, so I might have accidentally screwed with the interactions between some modules and made the bundling a mess.
I've looked for people who've had similar errors with not being able to get their global styles working on a dev server about a whole day now, but I think I might be looking for the wrong thing. Any help is appreciated!
Below is my webpack config files (webpack.common.js, webpack.dev.js -- the actual webpack.config.js file only contains a one-liner that says it requires webpack.dev.js), my index.html file, my package.json, and a picture of my file tree.
webpack.common.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
node: {
fs: 'empty'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
],
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('tsconfig.json') }
} , 'angular2-template-loader'
],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.json$/,
use: 'json-loader'
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/\#angular(\\|\/)core(\\|\/)esm5/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new ExtractTextPlugin({
filename: 'style.css',
disable: false,
})
]
};
webpack.dev.js
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css')
],
devServer: {
historyApiFallback: true,
stats: 'minimal',
port: 3000
}
});
package.json
{
"name": "project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --config config/webpack.dev.js --progress --color --hot",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.1",
"#angular/common": "^5.0.1",
"#angular/compiler": "^5.0.1",
"#angular/core": "^5.0.1",
"#angular/forms": "^5.0.1",
"#angular/http": "^5.0.1",
"#angular/platform-browser": "^5.0.1",
"#angular/platform-browser-dynamic": "^5.0.1",
"#angular/router": "^5.0.1",
"core-js": "^2.5.1",
"es6-shim": "^0.35.3",
"lodash": "^4.17.4",
"rxjs": "^5.5.2",
"ts-loader": "^3.1.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.5.0",
"#angular/compiler-cli": "^5.0.1",
"#angular/language-service": "^5.0.1",
"#types/core-js": "^0.9.43",
"#types/jasmine": "^2.5.54",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^6.0.92",
"#types/webpack": "^3.8.1",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.3.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"codelyzer": "~3.2.0",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"style-loader": "^0.19.0",
"to-string-loader": "^1.1.5",
"ts-node": "^3.2.2",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4",
"webpack-merge": "^4.1.1"
}
}
file tree
Thank you very much for your help!
Aha! It seems that the issue was I was both using #import in my global stylesheet to include other styles and also using styleUrls in my components. I got rid of styleUrls, kept the #imports in my global stylesheet :)