Develop Reference

Storybook with TailwindCSS in React (CRACO) and PostCSS does nothing

I've been trying to get Storybook to work with TailwindCSS in a CRA. However, I am unable to use any TailwindCSS classes and am getting this message when I start Storybook:
44% building 284/307 modules 23 active ...Documents\GitHub\<my project name>\node_modules\core-js\internals\set-to-string-tag.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
44% building 287/307 modules 20 active ...Documents\GitHub\<my project name>\node_modules\core-js\internals\set-to-string-tag.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
51% building 347/375 modules 28 active ...cuments\GitHub\<my project name>\node_modules\core-js\modules\es.symbol.unscopables.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
69% building 1065/1075 modules 10 active ...uments\GitHub\<my project name>\node_modules\core-js\modules\es.number.is-integer.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js
I've followed this guide. I've also checked the question here, and here's package.json:
{
"name": "some-project-name",
"version": "0.1.0",
"private": true,
"engine": {
"node": "^16.5.0"
},
"dependencies": {
"#craco/craco": "6.2.0",
"#testing-library/jest-dom": "5.11.4",
"#testing-library/react": "11.1.0",
"#testing-library/user-event": "12.1.10",
"express": "4.17.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"styled-components": "5.3.0",
"web-vitals": "1.0.1"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"prod:test": "yarn build && node server.js",
"prod:start": "yarn build && pm2-runtime server.js",
"dev:up": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up",
"dev:force": "docker-compose down && docker-compose -f docker-compose.yml -f docker-compose.dev.yml up",
"prod:up": "docker-compose -f docker-compose.yml -f docker-compose.prod.yml up",
"prod:force": "docker-compose down && docker-compose -f docker-compose.yml -f docker-compose.prod.yml up",
"docker:build": "docker build .",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#storybook/addon-actions": "6.3.5",
"#storybook/addon-essentials": "6.3.5",
"#storybook/addon-links": "6.3.5",
"#storybook/node-logger": "6.3.5",
"#storybook/preset-create-react-app": "3.2.0",
"#storybook/react": "6.3.5",
"autoprefixer": "9",
"postcss": "7",
"tailwindcss": "npm:#tailwindcss/postcss7-compat"
},
"resolutions": {
"babel-loader": "8.1.0"
}
}
Here's the craco.config.js:
module.exports = {
style: {
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
};
.storybook/main.js:
const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: ['#storybook/addon-links', '#storybook/addon-essentials', '#storybook/preset-create-react-app'],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
// HERE: OPTIONS
postcssOptions: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
},
],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
postcss.config.js (which I don't think matters here but just in case):
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.config.js'),
require('autoprefixer'),
],
};
tailwind.config.js:
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
sans: ['Montserrat'],
},
extend: {
screens: {
mx: '2048px',
},
},
variants: {
extend: {},
},
plugins: [],
},
};
I'm not able to use TailwindCSS styles in my stories components.
Here's the demo Button component:
import React from 'react';
import PropTypes from 'prop-types';
import './button.css';
/**
* Primary UI component for user interaction
*/
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
return (
<button type="button" className="bg-gray-900" {...props}>
{label}
</button>
);
};
Button.propTypes = {
/**
* Is this the principal call to action on the page?
*/
primary: PropTypes.bool,
/**
* What background color to use
*/
backgroundColor: PropTypes.string,
/**
* How large should the button be?
*/
size: PropTypes.oneOf(['small', 'medium', 'large']),
/**
* Button contents
*/
label: PropTypes.string.isRequired,
/**
* Optional click handler
*/
onClick: PropTypes.func,
};
Button.defaultProps = {
backgroundColor: null,
primary: false,
size: 'medium',
onClick: undefined,
};
The Button:
HTML in DOM:
<button type="button" class="bg-gray-900">Button</button>
Not sure where to go from here...
Update:
Went to webpack and postcss docs, and removed the options from .storyboard/main.js so use just looks like this:
use: [
{
loader: 'postcss-loader',
},
],
Now it's actually grabbing the plugins from postcss.config.js:
module.exports = {
plugins: [require('autoprefixer'), require('tailwindcss')],
};
So the warning about no plugins found went away. But still no visible change on the website.

VueJs + Nuxt + Jest : Could not locate module

[SOLVED] See edit at the bottom.
I'm learning to use vuejs and I want to use good practices from the start.
So I'm usin nuxtjs for SSR and Jest to unit test my components.
I can't figure how to configure jest to point on my root directory instead of some src/ somewhere...
In my test fil, if I change the component path and add a simple ../, it works, but it's not how it's supposed to be.
And the moduleNameMapper in jest.config.json does not seems to work...
Note that I don't have an src/ directory, just a client/ one with my component, tests, pages, etc.
Here are my files, if you what i'm missing :
./package.json
{
"private": true,
"scripts": {
"dev": "nuxt -c client/nuxt.config.js",
"build": "nuxt build -c client/nuxt.config.js",
"start": "nuxt start -c client/nuxt.config.js",
"lint": "eslint --fix --ext .js,.vue client/",
"test": "jest"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^2.0.2",
"#nuxtjs/router": "^1.6.1",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"dotenv": "^8.2.0",
"jquery": "^3.6.0",
"js-cookie": "^2.2.1",
"nuxt": "^2.15.3",
"popper.js": "^1.16.1",
"sweetalert2": "^10.15.6",
"typescript": "^4.2.3",
"vform": "^1.0.1",
"vue-i18n": "^8.24.2"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/eslint-parser": "^7.13.10",
"#babel/preset-env": "^7.13.12",
"#nuxtjs/eslint-config": "^5.0.0",
"#vue/cli-plugin-unit-jest": "^4.5.12",
"#vue/test-utils": "^1.1.3",
"eslint": "^7.22.0",
"fs-extra": "^9.1.0",
"jest": "^26.6.3",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"ts-jest": "^26.5.4",
"ts-node": "^9.1.1",
"vue-jest": "^3.0.7"
}
}
./client/nuxt.config.js
require('dotenv').config()
const { join } = require('path')
const { copySync, removeSync } = require('fs-extra')
module.exports = {
ssr: false,
srcDir: __dirname,
env: {
apiUrl: process.env.API_URL || process.env.APP_URL + '/api',
appName: process.env.APP_NAME || 'Laravel Nuxt',
appLocale: process.env.APP_LOCALE || 'en',
githubAuth: !!process.env.GITHUB_CLIENT_ID
},
head: {
title: process.env.APP_NAME,
titleTemplate: '%s - ' + process.env.APP_NAME,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#007bff' },
router: {
middleware: ['locale', 'check-auth']
},
css: [
{ src: '~assets/sass/app.scss', lang: 'scss' }
],
plugins: [
'~components/global',
'~plugins/i18n',
'~plugins/vform',
'~plugins/axios',
'~plugins/fontawesome',
'~plugins/nuxt-client-init',
{ src: '~plugins/bootstrap', mode: 'client' }
],
modules: [
'#nuxtjs/router'
],
build: {
extractCSS: true
},
watchers: {
webpack: {
ignored: /node_modules/
}
},
hooks: {
generate: {
done (generator) {
// Copy dist files to public/_nuxt
if (generator.nuxt.options.dev === false && generator.nuxt.options.mode === 'spa') {
const publicDir = join(generator.nuxt.options.rootDir, 'public', '_nuxt')
removeSync(publicDir)
copySync(join(generator.nuxt.options.generate.dir, '_nuxt'), publicDir)
copySync(join(generator.nuxt.options.generate.dir, '200.html'), join(publicDir, 'index.html'))
removeSync(generator.nuxt.options.generate.dir)
}
}
}
}
}
./jest.config.ts
// Sync object
module.exports = {
preset: '#vue/cli-plugin-unit-jest/presets/no-babel',
moduleNameMapper: {
"/^#\/(.*)$/": "<rootDir>/$1"
},
};
./jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"#/*": ["./*"],
"~~/*": ["./*"],
"##/*": ["./*"]
}
},
"exclude": ["node_modules", ".nuxt", "dist"]
}
And here is the error I get, no matter what I set in moduleNameMapper :
❯ node .\node_modules\jest\bin\jest.js --no-cache
FAIL client/__tests__/demo.spec.js
● Test suite failed to run
Configuration error:
Could not locate module #/client/components/Navbar mapped as:
C:\laragon\www\laravel-nuxt\src\$1.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^#\/(.*)$/": "C:\laragon\www\laravel-nuxt\src\$1"
},
"resolver": undefined
}
1 | import { mount } from '#vue/test-utils'
2 |
> 3 | import Navbar from '#/client/components/Navbar'
| ^
4 |
5 | test('Navbar', () => {
6 | // restitue le composant
at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:551:17)
at Object.<anonymous> (client/__tests__/demo.spec.js:3:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 3.972 s
Ran all test suites.
[EDIT] : the problem was in the jes.conf.js file, just had to remove the / in the line : "/^#/(.)$/" => "^#/(.)$".

Gatsby site isn't rendering gifs

Summary
Hello, I come asking for help – I've spent two whole days now trying to figure it out now.
I can't seem to crack how to get gifs to load on my site. (I'm pretty new to coding so forgive me if this something obvious)
js location: src/page/volvic
bring them in like so:
import volvic from "../../content/assets/projects/volic.gif"
and call it like so:
<img src={volvic} />
gives me this error:
(terminal)
ERROR #98123 WEBPAC
Generating development JavaScript bundle failed
Unexpected character '' (1:6)
File: content/assets/projects/volvic.gif:1:6
–––––
(localhost)
./content/assets/projects/volvic.gif 1:6Module parse failed: Unexpected character '' (1:6)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders(Source code omitted for this binary file)
Can someone point me the right direction please, any help would be greatly appreciated.
Environment (if relevant)
https://github.com/supnim/new-port - repo
OS: macOS 10.16
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU # 2.30GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.4.0 - /usr/local/bin/node
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 81.0.4044.138
Safari: 14.0
npmPackages:
gatsby: ^2.23.4 => 2.23.4
gatsby-image: ^2.4.12 => 2.4.12
gatsby-plugin-feed: ^2.5.5 => 2.5.5
gatsby-plugin-google-analytics: ^2.3.4 => 2.3.4
gatsby-plugin-manifest: ^2.4.11 => 2.4.11
gatsby-plugin-netlify: ^2.3.5 => 2.3.5
gatsby-plugin-offline: ^2.1.0 => 2.2.10
gatsby-plugin-postcss: ^2.3.4 => 2.3.4
gatsby-plugin-purgecss: ^3.1.1 => 3.1.1
gatsby-plugin-react-helmet: ^3.3.4 => 3.3.4
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-sass: ^2.3.4 => 2.3.4
gatsby-plugin-sharp: ^2.6.17 => 2.6.17
gatsby-plugin-smoothscroll: ^1.1.0 => 1.1.0
gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
gatsby-remark-copy-linked-files: ^2.3.10 => 2.3.10
gatsby-remark-embed-video: ^2.0.1 => 2.0.1
gatsby-remark-images: ^2.0.6 => 2.0.6
gatsby-remark-prismjs: ^3.5.4 => 3.5.4
gatsby-remark-responsive-iframe: ^2.4.5 => 2.4.5
gatsby-remark-smartypants: ^2.3.4 => 2.3.4
gatsby-source-filesystem: ^2.3.11 => 2.3.11
gatsby-transformer-remark: ^2.8.16 => 2.8.16
gatsby-transformer-sharp: ^2.5.10 => 2.5.10
npmGlobalPackages:
gatsby-cli: 2.12.58
File contents (if changed)
gatsby-config.js:
const siteConfig = require("./siteConfig");
//ive just added this
module.exports = {
module: {
rules: [
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
"file-loader",
{
loader: "image-webpack-loader",
options: {
bypassOnDebug: true, // webpack#1.x
disable: true // webpack#2.x and newer
}
}
]
}
]
}
};
module.exports = {
siteMetadata: {
title: siteConfig.name,
author: siteConfig.author,
description: siteConfig.description,
siteUrl: urljoin(siteConfig.url, siteConfig.prefix),
social: {
twitter: siteConfig.twitter
}
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/blog`,
name: `blog`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets`,
name: `assets`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets/photography`,
name: `photography`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets/heros`,
name: `heros`
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1360,
withWebp: true,
showCaptions: true,
quality: 75,
wrapperStyle: `margin: 7vw 0;`
}
},
{
resolve: "gatsby-remark-embed-video",
options: {
width: 800,
height: 450,
related: false,
noIframeBorder: true,
allowfullscreen: true
}
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [`gatsby-remark-responsive-iframe`]
}
},
`gatsby-remark-prismjs`,
`gatsby-remark-copy-linked-files`,
`gatsby-remark-smartypants`
]
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-remark-embed-video`,
`gatsby-remark-responsive-iframe`,
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
require("postcss-easy-import")(),
require("postcss-custom-properties")({ preserve: false }),
require("postcss-color-function")(),
require("autoprefixer")({ browsers: ["last 2 versions"] })
]
}
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true // Print removed selectors and processed file names
// develop: true, // Enable while using `gatsby develop`
// tailwind: true, // Enable tailwindcss support
// whitelist: ['whitelist'], // Don't remove this selector
// ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
// purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
}
},
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: `-`
}
},
`gatsby-plugin-feed`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: siteConfig.name,
short_name: siteConfig.shortName,
start_url: siteConfig.prefix,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `content/assets/sup.png`
}
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/ // See below to configure properly
}
}
},
`gatsby-plugin-netlify`,
`gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
`gatsby-plugin-smoothscroll`
]
};
package.json:
"name": "supnim.com",
"private": true,
"description": "Product designer based in London",
"version": "1.0.0",
"author": "Nimesh Reghunandanan <hello#supnim.com>",
"bugs": {
"url": "https://github.com/ImedAdel/gatsby-london/issues"
},
"dependencies": {
"acorn": "^7.3.1",
"acorn-dynamic-import": "^4.0.0",
"core-js": "^3.6.5",
"framer": "^1.2.3",
"framer-motion": "^1.11.1",
"gatsby": "^2.23.4",
"gatsby-image": "^2.4.12",
"gatsby-plugin-feed": "^2.5.5",
"gatsby-plugin-google-analytics": "^2.3.4",
"gatsby-plugin-manifest": "^2.4.11",
"gatsby-plugin-netlify": "^2.3.5",
"gatsby-plugin-offline": "^2.1.0",
"gatsby-plugin-postcss": "^2.3.4",
"gatsby-plugin-purgecss": "^3.1.1",
"gatsby-plugin-react-helmet": "^3.3.4",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-sass": "^2.3.4",
"gatsby-plugin-sharp": "^2.6.17",
"gatsby-plugin-smoothscroll": "^1.1.0",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-remark-copy-linked-files": "^2.3.10",
"gatsby-remark-embed-video": "^2.0.1",
"gatsby-remark-images": "^2.0.6",
"gatsby-remark-prismjs": "^3.5.4",
"gatsby-remark-responsive-iframe": "^2.4.5",
"gatsby-remark-smartypants": "^2.3.4",
"gatsby-source-filesystem": "^2.3.11",
"gatsby-transformer-remark": "^2.8.16",
"gatsby-transformer-sharp": "^2.5.10",
"jshint": "^2.11.1",
"motion": "^5.0.0-beta26",
"node-sass": "^4.14.1",
"open": "^7.0.4",
"path": "^0.12.7",
"prismjs": "^1.20.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^5.2.1",
"react-icons": "^3.10.0",
"react-images": "^1.1.7",
"react-photo-gallery": "^8.0.0",
"react-refresh": "^0.8.3",
"sharp": "^0.25.4",
"stream": "0.0.2",
"tsutils": "^3.17.1",
"typescript": "^3.9.5",
"url-join": "^4.0.0",
"url-loader": "^4.1.0"
},
"devDependencies": {
"autoprefixer": "^9.8.4",
"file-loader": "^6.0.0",
"husky": "^2.2.0",
"image-webpack-loader": "^6.0.0",
"postcss-color-function": "^4.1.0",
"postcss-custom-properties": "^8.0.10",
"postcss-easy-import": "^3.0.0",
"prettier": "^1.19.1",
"pretty-quick": "^1.10.0"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [
"gatsby",
"ghost",
"gallery",
"blog",
"starter"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/ImedAdel/gatsby-london.git"
},
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write src/**/*.{js,jsx}",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
}```
Once again any help would be highly appreciated :)

You don't need to do any extra loader to load a .gif file. It's exactly the same than render any image. You just need to import the component and use that as an image source.
I would suggest removing that configuration in your gatsby-config.js (the whole first module.exports) because if you want to add any webpack loader, that's not the place, you'll need to create it in gatsby-node.js file and using Gatsby's API for custom configuration (onCreateWebpackConfig, etc). It's advanced stuff and I don't think that it's what you need right now.
According to Gatsby's docs about .gifs files:
In Markdown posts and pages, including an animated GIF is the same as
a static image:
import React from 'react';
import Layout from '../components/templates/Layout/Layout';
import test from '../assets/test.gif';
const Index = props => {
return <Layout>
<h1>Hi people</h1>
<img src={test}/>
</Layout>;
};
And as I said, your gatsby-config.js should look like:
module.exports = {
siteMetadata: {
title: siteConfig.name,
author: siteConfig.author,
description: siteConfig.description,
siteUrl: urljoin(siteConfig.url, siteConfig.prefix),
social: {
twitter: siteConfig.twitter
}
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/blog`,
name: `blog`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets`,
name: `assets`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets/photography`,
name: `photography`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets/heros`,
name: `heros`
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1360,
withWebp: true,
showCaptions: true,
quality: 75,
wrapperStyle: `margin: 7vw 0;`
}
},
{
resolve: "gatsby-remark-embed-video",
options: {
width: 800,
height: 450,
related: false,
noIframeBorder: true,
allowfullscreen: true
}
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [`gatsby-remark-responsive-iframe`]
}
},
`gatsby-remark-prismjs`,
`gatsby-remark-copy-linked-files`,
`gatsby-remark-smartypants`
]
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-remark-embed-video`,
`gatsby-remark-responsive-iframe`,
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
require("postcss-easy-import")(),
require("postcss-custom-properties")({ preserve: false }),
require("postcss-color-function")(),
require("autoprefixer")({ browsers: ["last 2 versions"] })
]
}
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true // Print removed selectors and processed file names
// develop: true, // Enable while using `gatsby develop`
// tailwind: true, // Enable tailwindcss support
// whitelist: ['whitelist'], // Don't remove this selector
// ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
// purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
}
},
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: `-`
}
},
`gatsby-plugin-feed`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: siteConfig.name,
short_name: siteConfig.shortName,
start_url: siteConfig.prefix,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `content/assets/sup.png`
}
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/ // See below to configure properly
}
}
},
`gatsby-plugin-netlify`,
`gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
`gatsby-plugin-smoothscroll`
]
};
I've just checked it out in my local machine and works.
If you need to add extra controls, you may need to check out some external libraries such as react-gif-player.

Vue.js - Invalid CSS after

I am trying to compile Vue.js based front-end application, but each time I do try to run it, I receive following error message:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
^
Invalid CSS after "": expected 1 selector or at-rule, was "import './ProjectM"
in /app/src/components/ProjectMenuButton/ProjectMenuButton.vue (line 1, column 1)
I used to see this error before whenever I was including .css files with wrong path delivered.
The problem is that there literally has not been any .css file included into this file:
/app/src/components/ProjectMenuButton/ProjectMenuButton.vue:
<template>
<button :class="buttonClass" #click="changed()">
<h3>{{ this.ProjectMenuButton.text }}</h3>
</button>
</template>
<script>
export default {
name: "ProjectMenuButton",
props: {
ProjectMenuButton: {
type: Object,
default: () => ({
id: '',
text: '',
page: '',
class: 'btn'
})
},
ProjectMenuButtonClass: {
type: Object,
default: () => ({
class: ''
})
}
},
computed: {
buttonClass() {
if(typeof this.ProjectMenuButtonClass.class === undefined
|| this.ProjectMenuButtonClass.class === undefined)
return `ui basic button menu-button`;
else
return `ui basic button menu-button ${this.ProjectMenuButtonClass.class}`;
},
},
methods: {
changed: function(event) {
store.commit('current_menu', this.ProjectMenuButton.page);
}
}
};
</script>
I've tried different commands, like:
npm install --save-dev webpack
npm rebuild node-sass
But none of above worked.
Moreover, I do start Vue.js with following docker-container configuration:
frontend:
image: node:10-alpine
command: npm run serve
volumes:
- ./.env:/app/.env:ro
- ./frontend:/app
working_dir: /app
restart: on-failure
postgres:
image: postgres:10-alpine
volumes:
- postgres_data:/var/lib/postgresql/data
env_file: .env
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm i && vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"register-service-worker": "^1.5.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vue-raven": "^1.0.0",
"vue-analytics": "^5.16.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.1",
"#vue/cli-plugin-eslint": "^3.0.1",
"#vue/cli-plugin-pwa": "^3.0.1",
"#vue/cli-plugin-unit-jest": "^3.0.1",
"#vue/cli-service": "^3.0.1",
"#vue/eslint-config-standard": "^3.0.1",
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-jest": "^23.4.2",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
]
}
}

build nuxtjs with babel-node and babel 7

I'm working on a nuxtjs project with express,
in my back end I'm using all es6 features and rendering them with babel-node and babel 7.
on development environment or testing environment (ava) I've managed to run my project with babel 7 and babel node
but when I'm trying to build and run my server in production mode (nuxt build) from some reason all my back end URL routes returns 404 with the following error
Error: Request failed with status code 404
at createError (/Users/elonsalfati/devel/misc/astralink/painter/node_modules/axios/lib/core/createError.js:16:15)
at settle (/Users/elonsalfati/devel/misc/astralink/painter/node_modules/axios/lib/core/settle.js:18:12)
at Unzip.handleStreamEnd (/Users/elonsalfati/devel/misc/astralink/painter/node_modules/axios/lib/adapters/http.js:201:11)
at Unzip.emit (events.js:187:15)
at endReadableNT (_stream_readable.js:1081:12)
at process._tickCallback (internal/process/next_tick.js:63:19)
statusCode: 500,
name: 'NuxtServerError'
/*
- createError.js:16 createError
[painter]/[axios]/lib/core/createError.js:16:15
- settle.js:18 settle
[painter]/[axios]/lib/core/settle.js:18:12
- http.js:201 Unzip.handleStreamEnd
[painter]/[axios]/lib/adapters/http.js:201:11
- events.js:187 Unzip.emit
events.js:187:15
- _stream_readable.js:1081 endReadableNT
_stream_readable.js:1081:12
- next_tick.js:63 process._tickCallback
internal/process/next_tick.js:63:19
I only assume it's because of the babel thing that can't complete the rendering or is there another way I should render nuxt if I'm using express?
This is my nuxt.config.js
const pkg = require('./package')
const nodeExternals = require('webpack-node-externals')
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#8bc34a' },
/*
** Global CSS
*/
css: [
'vuetify/src/stylus/main.styl'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'#/plugins/vuetify'
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'#nuxtjs/axios'
],
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
if (ctx.isServer) {
config.externals = [
nodeExternals({
whitelist: [/^vuetify/]
})
]
}
}
}
}
my package.json
{
"name": "painter",
"version": "1.0.0",
"description": "JS Painter",
"author": "Elon Salfati",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
"build": "npm run test && nuxt build",
"start": "cross-env NODE_ENV=production nuxt start",
"build-start": "cross-env NODE_ENV=production npm run build && npm run start",
"test": "nyc ava --verbose"
},
"dependencies": {
"#nuxtjs/axios": "^5.3.1",
"body-parser": "^1.18.3",
"express": "^4.16.3",
"express-sanitizer": "^1.0.4",
"firebase": "^5.0.4",
"firebase-admin": "^5.12.1",
"morgan": "^1.9.0",
"nuxt": "^1.4.1",
"vue-color": "^2.4.6",
"vuetify": "^0.17.7"
},
"devDependencies": {
"#babel/cli": "^7.0.0-beta.51",
"#babel/core": "^7.0.0-beta.51",
"#babel/node": "^7.0.0-beta.51",
"#babel/plugin-transform-runtime": "^7.0.0-beta.51",
"#babel/polyfill": "^7.0.0-beta.51",
"#babel/preset-env": "^7.0.0-beta.51",
"#babel/preset-stage-0": "^7.0.0-beta.51",
"#babel/register": "^7.0.0-beta.51",
"#babel/runtime": "^7.0.0-beta.51",
"ava": "^1.0.0-beta.6",
"cross-env": "^5.2.0",
"node-sass": "^4.9.0",
"nodemon": "^1.17.5",
"nyc": "^12.0.2",
"sass-loader": "^7.0.3",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"supertest": "^3.1.0"
},
"ava": {
"require": [
"#babel/register",
"#babel/polyfill"
]
}
}
and finally my .babelrc file
{
"presets": [
[
"#babel/preset-env", {
"targets": {
"node": "current"
}
}
],
[
"#babel/preset-stage-0",
{
"decoratorsLegacy": true
}
]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}