I am working on a website and I am trying use tailwind with EJS as the viewer and it's not loading the CSS (It's what I am assuming) I have watched several Youtube videos and non of them have worked.
Tailwind Config file
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./views/*.{html,js,css} ",
"./views/index.ejs",
],
theme: {
extend: {},
},
plugins: [ {
tailwindcss: {},
autoprefixer: {},
}
]
}
Server.js File
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./views/*.{html,js,css} ",
"./views/index.ejs",
],
theme: {
extend: {},
},
plugins: [ {
tailwindcss: {},
autoprefixer: {},
}
]
}
Package.json file
{
"name": "person-website",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "nodemon server.js",
"build-tail": "SET NODE_ENV=production tailwindcss build -i /styles/tailwindcss.css -o /assets/styles.css"
},
"author": "Thomas Murray",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.8",
"express": "^4.18.2"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"nodemon": "^2.0.20",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4"
}
}
My file structure
It just keeps loading the HTML/EJS file and the CSS
Related
I have a webpack project 3 and I want to run it on my local system.
Here is my webpack config file and the package.json
{
"private": true,
"name": "XXx",
"version": "Xxx",
"description": "X",
"main": "index.js",
"dependencies": {
"babel": "^6.23.0",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"findandreplacedomtext": "^0.4.6",
"raw-loader": "^0.5.1",
"style-loader": "^0.19.1",
"text-loader": "0.0.1"
},
"devDependencies": {
"nodemon": "^1.19.4",
"sass": "^1.58.0",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0"
},
"scripts": {
"min.js": "make min.js",
"min.css": "make min.css",
"serve": "webpack"
},
"author": "",
"license": "ISC"
}
Makefile
const UglifyJs = require('uglifyjs-webpack-plugin')
const isWatching = process.argv[2] === '-w'
const plugins = [
function() {
this.plugin('watch-run', function(watching, callback) {
console.log('Begin compile at ' + new Date())
callback()
})
}
]
if (!isWatching) {
plugins.unshift(
new UglifyJs({
extractComments: false,
sourceMap: true,
})
)
}
module.exports = {
entry: {
'bundle': './js/bundle.js'
},
devtool: isWatching ? 'source-map' : false,
output: {
path: `${__dirname}/js`,
filename: '[name].min.js',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'raw-loader',
}
},
{
test: /\.s?css$/,
use: [
{
loader: "css-loader",
options: {
url: false, // do not bundle images
},
},
{loader: "sass-loader"},
],
}
]
},
plugins,
}
There is a makefile but I dont think this is required for this problem.
I have tried
webpack -p , webpack -w , and webpack .
webpack -p is giving an error : ERROR in bundle.min.js from UglifyJs Unexpected token: punc ({) [bundle.min.js:1,976]
while webpack -w works fine I am unable to find any url for the website.
the last command runs and ends.
Problem
I'm making custom eslint plugin referencing working with plugins and generator-eslint. Then I make a monorepo using yarn workspace and turbo repo like following structure:
file structure
apps
service
.eslintrc.js
index.ts (written to throw eslint error)
package.json
packages
eslint-plugin-custom
lib
rules
func-prefix-matching.js
index.js
.eslintrc.js
package.json
package.json
turbo.json
The key files of it is:
apps/service/.eslintrc.js
module.exports = {
root: true,
extends: ['eslint:recommended'],
plugins: ['eslint-plugin-custom'],
env: {
node: true,
es6: true,
},
rules: {
"custom/func-prefix-matching": ['error']
}
};
apps/service/package.json
{
"name": "service",
"version": "0.0.0",
"private": true,
"scripts": {
"lint": "eslint ."
},
"dependencies": {},
"devDependencies": {
"eslint": "8.22.0",
"eslint-plugin-custom": "*",
"typescript": "^4.5.3"
}
}
packages/eslint-plugin-custom/lib/rules/func-prefix-matching.js
"use strict";
//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------
const rulePrefix = ["is", "pre", "on", "post", "get", "set"];
const isValidName = (name, { prefix, exclude }) => {
const isValid = (prefix) => name.indexOf(prefix) === 0;
return exclude.some(isValid) || prefix.some(isValid);
};
/** #type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
type: 'suggestion', // `problem`, `suggestion`, or `layout`
docs: {
description: 'exmaple',
recommended: false,
url: null, // URL to the documentation page for this rule
},
fixable: null, // Or `code` or `whitespace`
schema: [], // Add a schema if the rule has options
messages: {
example: 'example',
},
},
create(context) {
const { options } = context;
const {include = [], exclude = [] } = options[0]||{};
return {
Identifier: (node) => {
if (node.parent.init && node.parent.init.type === 'ArrowFunctionExpression'
// You can add more checks here
) {
const { name } = node;
const allPrefix = [...include, ...rulePrefix].sort();
// Sorting is optional
if (!isValidName(name, { prefix: allPrefix, exclude })) {
context.report({
node,
messageId: `${name} should start with ${allPrefix.join(", ")}.`,
});
}
}
},
};
},
};
packages/eslint-plugin-custom/package.json
{
"name": "eslint-plugin-custom",
"version": "1.0.0",
"description": "ESLint plugin",
"keywords": [
"eslint",
"eslintplugin",
"eslint-plugin"
],
"author": "inflab",
"main": "./lib/index.js",
"exports": "./lib/index.js",
"files": [
"lib",
"README.md"
],
"scripts": {
"lint": "eslint .",
"test": "mocha tests --recursive --watch"
},
"dependencies": {
"requireindex": "^1.2.0"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-plugin-eslint-plugin": "^5.0.0",
"eslint-plugin-node": "^11.1.0",
"mocha": "^10.0.0"
},
"engines": {
"node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
},
"peerDependencies": {
"eslint": ">=7"
},
"license": "ISC"
}
package.json
{
"name": "custom-lint",
"version": "0.0.0",
"private": true,
"workspaces": [
"apps/*",
"packages/*"
],
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev --parallel",
"lint": "turbo run lint",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"test": "turbo run test"
},
"devDependencies": {
"prettier": "latest",
"turbo": "latest"
},
"engines": {
"node": ">=14.0.0"
},
"dependencies": {},
"packageManager": "yarn#1.22.19"
}
turbo.json
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {},
"lint": {
"outputs": []
},
"dev": {
"cache": false
},
"test": {}
}
}
issue
Now, eslint make output:
[Error - 10:34:20 PM] TypeError: context.report() called with a messageId of 'function1 should start with get, is, on, post, pre, set.' which is not present in the 'messages' config: {
"example": "example"
}
Occurred while linting /custom-lint/apps/service/index.ts:1
So I edit code like:
"use strict";
//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------
const rulePrefix = ["is", "pre", "on", "post", "get", "set"];
const isValidName = (name, { prefix, exclude }) => {
const isValid = (prefix) => name.indexOf(prefix) === 0;
return exclude.some(isValid) || prefix.some(isValid);
};
/** #type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
...
messages: {
messageId: 'message',
},
},
create(context) {
...
return {
Identifier: (node) => {
if (node.parent.init && node.parent.init.type === 'ArrowFunctionExpression'
// You can add more checks here
) {
const { name } = node;
const allPrefix = [...include, ...rulePrefix].sort();
// Sorting is optional
if (!isValidName(name, { prefix: allPrefix, exclude })) {
context.report({
node,
messageId: 'messageId',
});
}
}
},
};
},
};
Then yarn workspace automatically make symlink to the eslint-plugin-custom package and I can see the latest edited code in (project root)/node_modules/eslint-plugin-custom. But the same error is occurred.
[Error - 10:34:20 PM] TypeError: context.report() called with a messageId of 'function1 should start with get, is, on, post, pre, set.' which is not present in the 'messages' config: {
"example": "example"
}
Occurred while linting /custom-lint/apps/service/index.ts:1
what I tried
It looks like cache problem, so I run yarn cache clean. But not work
I change the plugin version like
packages/eslint-plugin-custom/package.json
{
"name": "eslint-plugin-custom",
"version": "1.0.1",
...
}
apps/service/package.json
{
"name": "service",
"version": "0.0.0",
"private": true,
"scripts": {
"lint": "eslint ."
},
"dependencies": {},
"devDependencies": {
"eslint": "8.22.0",
"eslint-plugin-custom": "1.0.1",
"typescript": "^4.5.3"
}
}
to match exact version, but it does not work.
removing node_modules dirs and re-install, not work.
what I expect
I expect
the plugin work correctly
to see the output of eslint change when I edit plugin code
Is there any help... :(
I'm currently learning webpack with the following tutorial on YouTube: https://www.youtube.com/watch?v=MpGLUVbqoYQ&t=1337s&ab_channel=freeCodeCamp.org, i'm on minute 43.
I want that Webpack loads my css, but when I run "node start", and the error "Cannot find module css-loader" occurs, although I have it installed properly.
This is my webpack.config.js:
const path = require('path');
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["css-loader"]
},
],
}
}
package.json:
{
"name": "webpack_tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0"
},
"devDependencies": {
"css-loader": "^5.0.1",
"style-loader": "^2.0.0"
}
}
index.js:
import { run } from "./app/app";
import "./main.css";
import { AlertService } from "./app/alert.service";
import { ComponentService } from "./app/component.service";
const alertService = new AlertService();
const componentService = new ComponentService();
run(alertService, componentService);
Folder structure:
dist
node_modules
src
app
some other files...
index.js
main.css
package.json
webpack.config.js
Has anyone an idea why webpack is not finding this package?
I get the following output when I transpile a javascript file with Babel 7.
I don't understand the presence of the cov_5hsavp2s2() function. It seems to be some metadata.
Is there a way (a flag or config) to prevent it from being generated as it has nothing to do with the functionality of the module.
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _useMuiTheme = _interopRequireDefault(require("./useRepl"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function cov_5hsavp2s2() {
var path = "/home/me/use-repl/src/index.js";
var hash = "8995b4e9d98ed443cd65fa7d3cf9e2594de820db";
var global = new Function("return this")();
var gcv = "__coverage__";
var coverageData = {
path: "/home/me/use-repl/src/index.js",
statementMap: {},
fnMap: {},
branchMap: {},
s: {},
f: {},
b: {},
_coverageSchema: "1a1c01bbd47fc00a2c39e90264f33305004495a9",
hash: "8995b4e9d98ed443cd65fa7d3cf9e2594de820db"
};
var coverage = global[gcv] || (global[gcv] = {});
if (!coverage[path] || coverage[path].hash !== hash) {
coverage[path] = coverageData;
}
var actualCoverage = coverage[path];
{
// #ts-ignore
cov_5hsavp2s2 = function () {
return actualCoverage;
};
}
return actualCoverage;
}
cov_5hsavp2s2();
var _default = _useMuiRepl.default;
exports.default = _default;
Package.json
{
"name": "#devskope/use-repl",
"version": "1.0.0",
"main": "./lib/index.js",
"files": [
"/lib"
],
"scripts": {
"build": "babel --delete-dir-on-start --copy-files src --out-dir lib ",
"test": "nyc mocha"
},
"babel": {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-react"
],
"plugins": [
"istanbul"
]
},
"nyc": {
"require": [
"#babel/register"
]
},
"engines": {
"node": ">=.10.0.0"
},
"author": "devskope",
"repository": {
"type": "git",
"url": "git+https://github.com/devskope/use-mui-theme.git"
},
"bugs": {
"url": "https://github.com/devskope/use-mui-theme/issues"
},
"homepage": "https://github.com/devskope/use-mui-theme#readme",
"license": "MIT",
"keywords": [
"hook",
"hooks",
"material-ui",
"material ui",
"mui",
"react",
"theme"
],
"peerDependencies": {
"#material-ui/core": "^4.4.0",
"react": "^16.8.0",
"react-dom": "^16.8.0"
},
"devDependencies": {
"#babel/cli": "^7.10.1",
"#babel/core": "^7.10.1",
"#babel/preset-env": "^7.10.1",
"#babel/preset-react": "^7.10.1",
"#babel/register": "^7.10.1",
"babel-plugin-istanbul": "^6.0.0",
"chai": "^4.2.0",
"dotenv": "^8.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jsdom": "^16.2.2",
"mocha": "^7.2.0",
"nodemon": "^2.0.4",
"nyc": "^15.0.1",
"prop-types": "^15.7.2"
},
"dependencies": {
"#material-ui/core": "^4.4.0"
}
}
Solved by adding an env stanza to the babel config to restrict Istanbul to the test environment.
{ //...rest of package.json
"babel": {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-react"
],
"env": {
"test": {
"plugins": [
"istanbul"
]
}
}
},
}
I don't quite know what happened to my build, Currently gatsby develop is returning TypeError: Cannot read property 'allMarkdownRemark' of undefined pointing to this file
gatsby-node.js:19 graphql.then.results
C:/Users/Anders/sites/gatsby-netlify-cms/gatsby-node.js:19:20
and gatsby info is returning after it returns info about the project error The system cannot find the path specified.
Here is the gatsby-node.js file
const path = require('path')
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return new Promise((resolve, reject) => {
graphql(`
{
allMarkdownRemark {
edges {
node {
frontmatter {
slug
}
}
}
}
}
`).then(results => {
results.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: `/posts${node.frontmatter.slug}`,
component: path.resolve('./src/components/postLayout.js'),
context: {
slug: node.frontmatter.slug,
},
})
})
resolve()
})
})
}
I don't quite understand what is going on, I rolled back to changes that were working fine a minute ago, and now getting this weird error. I have tried upgrading node, I have tried reinstalling the gatsby cli. I am stuck. Thanks in advance.
Also including my package.json in case there is incompatibilities
{
"name": "gatsby-starter-default",
"description": "Gatsby default starter",
"version": "1.0.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"babel-plugin-styled-components": "^1.9.2",
"gatsby": "^2.0.53",
"gatsby-image": "^2.0.22",
"gatsby-plugin-manifest": "^2.0.9",
"gatsby-plugin-netlify": "^2.0.6",
"gatsby-plugin-netlify-cms": "^3.0.9",
"gatsby-plugin-offline": "^2.0.16",
"gatsby-plugin-react-helmet": "^3.0.2",
"gatsby-plugin-sharp": "^2.0.15",
"gatsby-plugin-sitemap": "^2.0.3",
"gatsby-plugin-styled-components": "^3.0.4",
"gatsby-source-filesystem": "^2.0.10",
"gatsby-transformer-remark": "^2.1.15",
"gatsby-transformer-sharp": "^2.1.9",
"netlify-cms": "^2.3.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-helmet": "^5.2.0",
"react-spring": "^6.1.10",
"styled-components": "^4.1.2"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"format": "prettier --write \"src/**/*.js\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"prettier": "^1.15.2"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
}
}
Gatsby -v returns 2.4.7 and I am running node v10.14.2
Here is my gatsby-config file
module.exports = {
siteMetadata: {
title: 'Project Name',
content: 'your name is weird',
siteUrl: 'https://zealous-wright-0d00e0.netlify.com',
},
plugins: [
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
'gatsby-plugin-sitemap',
'gatsby-transformer-sharp',
'gatsby-plugin-styled-components',
'gatsby-plugin-sharp',
{
resolve: `gatsby-plugin-manifest`,
options: {
name: 'project-name',
short_name: 'project-name',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/logo.png', // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.app/offline
'gatsby-plugin-offline',
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/team`,
name: 'team',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/images`,
name: 'images',
},
},
'gatsby-transformer-remark',
'gatsby-plugin-netlify-cms',
],
}
and I have a file in the gatsby-source-filesystem at src/team/riels-first-post.md
I had a very stupid bug, inside my markdown file there was no slug attribute which was being referenced across my code. This is what it should of looked like
---
title: Riel's First post
bio: I am a monkey with a dog
slug: "test"
---
Testing
You haven't posted your gatsby-config file but, judging by the error, I would say that your node file failed to find any markdown files which results in an undefined results.data.
In your gatsby config file there should be a directive similar to this one:
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/static/content/collections/posts`,
},
}
The above code instructs gatsby to look for markdown files in the specified path so make sure you have this directive inside your config and that the path contains at least one valid markdown file.