I'm getting a compilation error when trying to run nuxt with vuetify. It says that vuetify.css was not found with the dependency absolute path. I checked in buildDir/App.js and vuetify.css is the only dependency to reference a fullpath. Is there a reason to that ?
What do I miss ?
yarn dev
This dependency was not found: friendly-errors 10:34:11
friendly-errors 10:34:11
* .\full\path\to\myproject\src\node_modules\vuetify\dist\vuetify.css in ./myproject/prod/server/nuxt/App.js
friendly-errors 10:34:11
To install it, you can run: npm install --save .\full\path\to\myproject\src\node_modules\vuetify\dist\vuetify.css
buildDir/App.js
...
import '..\\..\\..\\src\\assets\\main.css'
import '..\\..\\..\\src\\assets\\variables.scss'
import '.\\full\\path\\to\\myproject\\src\\node_modules\\vuetify\\dist\\vuetify.css'
import _6f6c098b from '..\\..\\..\\src\\layouts\\default.vue'
...
package.json
"dependencies": {
"#nuxtjs/axios": "^5.9.2",
"#nuxtjs/firebase": "^4.1.0",
"firebase": "^7.10.0",
"lodash": "^4.17.15",
"nuxt": "^2.0.0",
"nuxt-i18n": "^6.5.0"
},
"devDependencies": {
"#babel/runtime-corejs3": "^7.8.7",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/vuetify": "^1.11.0",
"#vue/test-utils": "^1.0.0-beta.27",
"babel-jest": "^24.1.0",
"core-js": "3",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-prettier": "^3.0.1",
"jest": "^24.9.0",
"prettier": "^1.16.4",
"vue-jest": "^4.0.0-0"
}
nuxt.config.js
import webpack from 'webpack'
require('dotenv').config({ path: '../.env' })
export default {
mode: 'universal',
server: {
host: process.env.HOST_NAME,
port: process.env.HOST_PORT
},
env: process.env,
head: {
titleTemplate: '%s - ' + process.env.npm_package_name,
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' },
]
},
loading: { color: '#fff' },
css: [
'#/assets/main.css',
'#/assets/variables.scss'
],
plugins: [],
buildModules: [
['#nuxtjs/vuetify', { }],
['#nuxtjs/dotenv', { path: '../', filename: '.env' }]
],
modules: [],
vuetify: {
customVariables: ['~/assets/variables.scss'],
optionsPath: "./vuetify.options.js",
},
buildDir: "../prod/server/nuxt",
build: {
plugins: [
new webpack.ProvidePlugin({
'_': 'lodash'
})
],
extractCSS: true,
extend (config, ctx) {},
babel: {
presets({ isServer }) {
return [
[
require.resolve('#nuxt/babel-preset-app'),
{
buildTarget: isServer ? 'server' : 'client',
corejs: { version: 3 }
}
]
]
}
}
}
}
Related
This is my nuxt.config.js file
env: {
baseUrl: process.env.BASE_URL || "http://localhost:3000"
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
baseURL: process.env.baseUrl,
browserBaseURL: "http://localhost:3000"
},
Heroku logs
Listening on: http://localhost:21411/
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch.
What's env variable I need to add to heroku admin for it to work, the port heroku is hosting on keeps changing each time I try to run it.
EDIT here is my Nuxt config:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
script: [
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-core.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-service.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-ui.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-clustering.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-data.js"
}
],
title: "Restaurants-D-System",
htmlAttrs: {
lang: "en"
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" }
],
link: [
{
rel: "stylesheet",
type: "text/css",
href: "https://js.api.here.com/v3/3.1/mapsjs-ui.css"
},
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
href: "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
rel: "stylesheet"
},
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
href: "https://fonts.googleapis.com/css2?family=Ribeye&display=swap",
rel: "stylesheet"
}
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
CSS: ["~/assets/normalize.css"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
"#nuxtjs/style-resources",
// https://go.nuxtjs.dev/buefy
"nuxt-buefy",
// https://go.nuxtjs.dev/axios
"#nuxtjs/axios"
],
styleResources: {
scss: ["./assets/main.scss"],
CSS: ["./assets/normalize.css"]
},
axios: {
baseURL: "http://localhost:4000" // Used as fallback if no runtime config is provided
},
publicRuntimeConfig: {
axios: {
browserBaseURL: process.env.BROWSER_BASE_URL
}
},
privateRuntimeConfig: {
axios: {
baseURL: process.env.BASE_URL
}
},
serverMiddleware: [{ path: "/api", handler: "~/api/index.js" }],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {}
};
and here is my json:
{
"version": "1.0.0",
"engines": {
"node": "14.16.1"
},
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.1",
"#nuxtjs/style-resources": "^1.0.0",
"#vonage/server-sdk": "^2.10.8",
"core-js": "^3.9.1",
"express": "^4.17.1",
"firebase-admin": "^9.8.0",
"infobip-nodejs": "^0.1.0-alpha.1",
"lodash.debounce": "^4.0.8",
"normalize.css": "^8.0.1",
"nuxt": "^2.2.0",
"nuxt-buefy": "^0.4.4"
},
"devDependencies": {
"fibers": "^5.0.0",
"sass": "^1.34.0",
"sass-loader": "^10.2.0"
}
}
and here is my Express javascript file API:
const express = require("express");
const sms = require("./infoSms/index");
const router = require("../api/routes/routesIndex");
const { db, auth, timestamp } = require("./dataBase/index");
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
port = process.env.PORT || 3000;
app.use(router);
if (require.main === module) {
app.listen(port, () => {
console.log(`server is up ` + port);
});
} else {
console.log("server is up by Nuxtjs");
}
module.exports = app;
The setup is explained pretty well in the official #nuxtjs/axios documentation
export default {
modules: [
'#nuxtjs/axios'
],
axios: {
baseURL: 'http://localhost:4000', // Used as fallback if no runtime config is provided
},
publicRuntimeConfig: {
axios: {
browserBaseURL: process.env.BROWSER_BASE_URL
}
},
privateRuntimeConfig: {
axios: {
baseURL: process.env.BASE_URL
}
},
}
Also, as explained there
The use of runtime config is mandatory in case of using environment variables in production, otherwise, the values will be hard coded during build and won't change.
Usually, webservices are running on port 80 (https) or 443 (https), double-check that this is what you do have in your dashboard (https://dashboard.heroku.com/apps/<your-app>/settings). Even tho you probably don't even need to specify it.
Give a read to the deployment page to see the few steps required so far aka
heroku create myapp
heroku buildpacks:set heroku/nodejs
heroku config:set HOST=0.0.0.0
git push heroku master // git push heroku develop:master if working on develop and not master
Moreover, prefer using this approach for env variables in Nuxt: https://stackoverflow.com/a/67705541/8816585
New to webpack,and, learning curve is fun. But my need is simply do the following (which I'm doing using bash today)
node-sass ./src/styles/default.scss > ./dist/assets/default.css
I don't need to include it in the html.
I don't want to include the css into javascript file.
Just plain conversion from scss to css.
Nvm, got the following working for me:
webpack.config.js
var path = require('path');
const HtmpWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: 'default.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: 'babel-loader' }
}, {
test: /\.(png|svg|jpe?g|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}, {
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
new HtmpWebPackPlugin({
path: __dirname + '/dist/assets',
filename: 'default.html',
template: 'src/index.html',
inject: false,
hash: false
}),
new MiniCssExtractPlugin({
filename: 'default.css',
outputPath: 'dist/assets'
})
]
}
package.json
"scripts": {
"build": "rm -rf ./dist && webpack --mode production"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
}
I started getting this error once I upgraded to Webpack and related dependencies to v4: [Vue warn]: Failed to mount component: template or render function not defined.
Here's the relevant snippets of my package.json and webpack.config.js before and after:
Before upgrade:
package.json
{
"dependencies": {
"vue": "^2.5.0",
"vue-template-compiler": "^2.5.0"
},
"devDependencies": {
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-es2015-block-scoping": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-without-strict": "^0.0.4",
"babel-preset-es2017": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"css-loader": "^0.26.0",
"eslint": "^4.3.0",
"husky": "^0.14.3",
"lint-staged": "^4.0.2",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^4.0.1",
"stats-webpack-plugin": "^0.2.1",
"style-loader": "^0.13.1",
"uglifyjs-webpack-plugin": "^1.1.6",
"vue-loader": "^12.1.0",
"webpack": "3.10.0",
"webpack-dev-server": "^2.3.0",
"webpack-monitor": "^1.0.13"
}
}
webpack.config.js
{
resolve: {
modules: [
path.join(__dirname, '..', 'webpack'),
'node_modules/'
],
alias: {
vue: process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',
libs: 'libs/'
}
},
plugins: [
new StatsPlugin('manifest.json', {
chunkModules: false,
source: false,
chunks: false,
modules: false,
assets: true
})],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['es2015']
}
}
]
}, {
test: /\.vue$/,
exclude: /node_modules/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.js$/,
include: [
path.resolve(process.cwd(), 'node_modules/')
],
use: [
{
loader: 'babel-loader',
options: {
plugins: ['transform-es2015-block-scoping'],
cacheDirectory: true
}
}
],
},
]
}
};
After upgrade:
package.json
{
"dependencies": {
"vue": "^2.5.13",
"vue-template-compiler": "^2.5.13"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.6.1",
"babel-preset-latest": "^6.24.1",
"css-loader": "^0.26.0",
"eslint": "^4.3.0",
"husky": "^0.14.3",
"lint-staged": "^4.0.2",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^4.0.1",
"stats-webpack-plugin": "^0.2.1",
"style-loader": "^0.13.1",
"uglifyjs-webpack-plugin": "^1.1.6",
"vue-loader": "^14.1.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0",
"webpack-monitor": "^1.0.13"
}
}
webpack.config.js
{
resolve: {
modules: [
path.join(__dirname, '..', 'webpack'),
'node_modules/'
],
alias: {
vue: process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',
libs: 'libs/'
}
},
plugins: [
new StatsPlugin('manifest.json', {
chunkModules: false,
source: false,
chunks: false,
modules: false,
assets: true
})],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
}, {
test: /\.vue$/,
exclude: /node_modules/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.js$/,
include: [
path.resolve(process.cwd(), 'node_modules/')
],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
],
},
]
}
};
What is expected?
Vue components work without errors after upgrading
What is actually happening?
Most Vue components show an error and fail to load: [Vue warn]: Failed to mount component: template or render function not defined.
Figured this out (h/t #skribe). Basically I was declaring components like this:
Vue.component('thing', require('libs/components/thing.vue'));
I had to change that to:
Vue.component('thing', require('libs/components/thing.vue').default);
I'm building an app using webpack, react, babel, and Sass. I've been trying to get Sass working, but it's not playing ball. It's not throwing any errors, it just doesn't seem to be compiling properly, and when I examine the element in Dev Tools, it simply says "invalid property value" where I've referenced a variable. Is there something glaringly obvious I'm doing wrong?
My app.scss:
#import '../../../node_modules/normalize.css/normalize.css';
#import '../variables.scss';
/*
* Base styles
* ========================================================================== */
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
text-align: center;
margin: 0;
}
p {
color: $blue;
}
My variables.scss:
/*
* Colors
* ========================================================================== */
$blue: #334c6a;
$yellow: #f6d463;
$white: #ffffff;
$black: #000000;
/*
* Typography
* ========================================================================== */
$font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
/*
* Layout
* ========================================================================== */
$container-margin: 55px;
Webpack.config:
var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build/',
filename: "bundle.js"
},
resolve: {
extensions: ['*', '.js', '.jsx', '.png', '.json']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
context: __dirname,
postcss: [
autoprefixer
]
}
})
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot-loader', 'babel-loader']
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
Package.json:
{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"author": "test",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"node-sass": "^4.5.2",
"postcss": "^5.2.17",
"postcss-loader": "^1.3.3",
"precss": "^1.4.0",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.16.1",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"normalize.css": "^6.0.0",
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}
This config is working with webpack 2 and sass.
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
And then in the App.js file
import './app.scss'
The complete webpack.config
var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./index.js'
],
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build',
filename: "bundle.js"
},
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'build'),
publicPath: '/',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// new webpack.NoErrorsPlugin(), not needed any more
new webpack.LoaderOptionsPlugin({
options: {
context: __dirname,
postcss: [
autoprefixer
]
}
})
],
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loaders: ['babel-loader']
},
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader' , 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
}
]
}
};
WEBPACK # 2.2
WEBPACK-MERGE # 2.4
I am using webpack merge to do a smart dev or production config.
My start script looks like
}
"scripts": {
"start": "webpack --env=production & node start.js",
"dev": "webpack-dev-server --env=dev",
},
and my webpack-config looks like this:
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = function(env) {
return {
output: {
path: '/public/',
filename: 'index.js',
publicPath: '/public/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader",
publicPath: "/public/",
}),
},
],
},
resolve: {
extensions: ['.js', '.css'],
},
plugins: [
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(env) },
}),
new ExtractTextPlugin({
filename: "bundle.css",
disable: false,
allChunks: true,
}),
],
}
}
module.exports = function(env) {
return webpackMerge(baseConfig(env), env === 'dev' ? {
devtool: 'cheap-module-source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./app/index.js',
],
devServer: {
hot: true,
publicPath: '/public/',
proxy: {
"/api/**": "http://localhost:3333",
"/auth/**": "http://localhost:3333",
},
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
} : {
devtool: 'inline-source-map',
entry: [
'./app/index.js',
],
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: false,
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
new webpack.optimize.AggressiveMergingPlugin(),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
],
})
}
Webpack successfully compiles locally but when I attempt to deploy it to heroku, the output in papertrail is as seen below:
> webpack --env=production & node start.js
Config did not export an object.
Any ideas?
I had the same issue, I forgot to install webpack dev server:
npm install --save-dev webpack-dev-server
Hope it helps!