I am using react-static and I also want to use sass.
This is my package.json:
"dependencies": {
"#reach/router": "^1.2.1",
"axios": "^0.19.0",
"bulma": "^0.8.0",
"bulma-start": "^0.0.3",
"node-sass": "^4.13.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-icons": "^3.8.0",
"react-router-dom": "^5.1.2",
"react-slick": "^0.25.2",
"react-static": "^7.2.0",
"react-static-plugin-reach-router": "^7.2.0",
"react-static-plugin-sass": "^7.2.2",
"react-static-plugin-sitemap": "^7.2.0",
"react-static-plugin-source-filesystem": "^7.2.0",
"slick-carousel": "^1.8.1"
}
As I know, to use sass add node-sass and import SCSS file.
But it doesn't work.
It looks like they have a plugin on SASS integration. Follow their installation and after that you can import your SASS files.
you can use webpack for this.
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
}
add this in your "rules" array under "module" object.
Related
I got an error with trying to compile css
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'syntax')
Here is like the main css file looks looks like.
/**
* This injects Tailwind's base styles and any base styles registered by
* plugins.
*/
#import "tailwindcss/base";
/**
* Application styles
*/
/* Shared/Global */
#import "./shared/fonts.css";
#import "./shared/typography.css";
#import "./shared/global.css";
#import "./shared/grid.css";
#import './shared/vue-transitions.css';
#import './shared/cards.css';
#import './shared/forms.css';
#import './shared/pages.css';
/* Vendors */
#import "./vendors/simplebar.css";
#import "./vendors/vue-scrollbar.css";
/* Components */
#import "./components/button.css";
#import "./components/rte.css";
#import "./components/footer.css";
#import "./components/social-buttons.css";
#import "./components/navbar.css";
#import "./components/header.css";
#import "./components/breadcrumbs.css";
#import "./components/content-nav.css";
#import "./components/text.css";
#import "./components/text-image.css";
#import "./components/card.css";
#import "./components/crops.css";
#import './components/search-bar.css';
#import './components/custom-select.css';
#import './components/modal.css';
#import "./components/login.css";
#import "./components/download.css";
/**
* This injects Tailwind's component classes and any component classes
* registered by plugins.
*/
#import "tailwindcss/components";
/**
* This injects Tailwind's utility classes and any utility classes registered
* by plugins.
*/
#import "tailwindcss/utilities";
/**
* Use this directive to control where Tailwind injects the responsive
* variations of each utility.
*
* If omitted, Tailwind will append these classes to the very end of
* your stylesheet by default.
*/
#import "tailwindcss/screens";
what is strange compiler goes ok when all the imports except tailwind ones are commented. So this is definitely some issue with the css import.
and here package.json for some reference what is used in the project
{
"name": "sg",
"version": "1.0.0",
"description": "sg",
"main": "src/main.js",
"private": true,
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --open",
"startproxy": "cross-env webpack-dev-server --open --mode development --env.development --env.useProxy --env.proxyUrl",
"build": "cross-env NODE_ENV=build webpack",
"publish": "cross-env NODE_ENV=publish webpack",
"test": "jest"
},
"keywords": [],
"author": "TC",
"devDependencies": {
"#babel/core": "^7.11.4",
"#babel/preset-env": "^7.11.0",
"#vue/babel-preset-app": "^4.5.4",
"#vue/test-utils": "^1.0.4",
"autoprefixer": "^10.0.2",
"axios": "^0.23.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^25.5.1",
"babel-loader": "^7.1.5",
"clean-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^5.1.0",
"cross-env": "^6.0.3",
"css-loader": "^1.0.1",
"cssnano": "^4.1.10",
"dotenv-webpack": "^1.8.0",
"eslint": "^5.10.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.2",
"file-loader": "^2.0.0",
"find-config": "^1.0.0",
"fs": "0.0.1-security",
"glob-all": "^3.2.1",
"html-loader": "^0.5.5",
"html-replace-webpack-plugin": "^2.5.5",
"html-webpack-plugin": "^3.2.0",
"imagemin": "^5.3.1",
"imagemin-webp": "^6.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"img-loader": "^3.0.0",
"jest": "^25.5.4",
"mini-css-extract-plugin": "^0.8.0",
"path": "^0.12.7",
"postcss": "^8.3.9",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-mixins": "^7.0.2",
"postcss-nested": "^5.0.1",
"postcss-simple-vars": "^6.0.2",
"purgecss-webpack-plugin": "^1.6.0",
"stylelint": "^13.6.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-webpack-plugin": "^1.2.3",
"url-loader": "^1.1.1",
"vue": "^2.6.12",
"vue-click-outside": "^1.1.0",
"vue-custom-scrollbar": "^1.4.1",
"vue-jest": "^3.0.6",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-fix-style-only-entries": "^0.4.0"
},
"dependencies": {
"#tailwindcss/typography": "^0.3.1",
"core-js": "^3.8.3",
"micromodal": "^0.4.10",
"regenerator-runtime": "^0.13.7",
"simplebar": "^5.3.6",
"tailwindcss": "^2.0.1",
"vuex": "^3.6.0"
}
}
any ideas?
downgrading to "postcss": "^8.2.1" solved the issue :)
Storybook only loads stories when I make changes.
So when I yarn start my storybook it shows up with:
Sorry, but you either have no stories or none are selected somehow.
Please check the Storybook config. Try reloading the page. If the problem persists, check the browser console, or the terminal you've run Storybook from.
When I make a change in one of the *.stories.jsx files it shows all the stories suddenly. I am coming over from storybook in 2015 where everything was previously added as StoriesOf().
The inspection tools in chrome showed:
index.js:49 Unexpected error while loading ./broadcast.stories.jsx: TypeError: Cannot read properties of undefined (reading 'extend')
I am really confused about what type of error this even is. As I said the stories appear once you make any change at all even a space or delete a space somewhere or change a letter and the stories load up.
In side the main.js file I have tried changing: stories: ['../src/stories/**/*.stories.#(js|jsx|ts|tsx)'], into all sorts of suggestions I found on the internet.
const path = require("path");
const resolve = uri => path.resolve(__dirname, uri);
module.exports = {
stories: ['../src/stories/**/*.stories.#(js|jsx|ts|tsx)'],
addons: ['#storybook/addon-docs', '#storybook/addon-knobs', '#storybook/addon-actions', '#storybook/addon-viewport'],
rules: [{
test: /\.(scss|sass)$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../")
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]',
include: path.resolve(__dirname, "../src/fonts")
},
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
}
},
],
watch: true,
resolve: {
alias: {
i18n: resolve('../src/i18n'),
},
extensions: ['.js', '.jsx'],
modules: ['node_modules'],
}
}
An example of a story:
export default {
title: 'ScalableWrapper',
component: ScalableWrapper,
decorators: [],
parameters: {},
}
export const Background = () => <ScalableWrapper style={{ overflow: 'scroll' }}>
<AnimatedBackground
disableAnimationBG={boolean("Disable Animation", false)}
background={text("Background", backgroundImage)}
brushPattern={repeatableBrush}
/></ScalableWrapper>
Package.JSON:
"devDependencies": {
"#babel/cli": "^7.16.0",
"#babel/core": "^7.16.0",
"#babel/plugin-proposal-object-rest-spread": "^7.16.0",
"#babel/plugin-transform-runtime": "^7.16.0",
"#babel/preset-env": "^7.16.0",
"#babel/preset-react": "^7.16.0",
"#storybook/addon-actions": "^6.3.12",
"#storybook/addon-docs": "^6.3.12",
"#storybook/addon-knobs": "^6.3.1",
"#storybook/addon-viewport": "^6.3.12",
"#storybook/react": "^6.3.12",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.3.1",
"babel-loader": "^8.2.3",
"babel-plugin-styled-components": "^1.13.3",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-plugin-transform-react-stateless-component-name": "^1.1.2",
"chai": "^4.3.4",
"css-loader": "^6.5.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"jest": "^27.3.1",
"jest-enzyme": "^7.1.2",
"node-sass": "^6.0.1",
"postcss-loader": "^6.2.0",
"react-test-renderer": "^17.0.2",
"sass-loader": "^12.3.0",
"storybook-addon-specifications": "^2.2.0",
"style-loader": "^3.3.1",
"webpack": "^5.61.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-dev-middleware": "^5.2.1",
"webpack-dev-server": "^4.4.0"
},
"dependencies": {
"#babel/runtime-corejs3": "^7.16.0",
"chart.js": "^3.6.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-click-outside": "^3.0.1",
"react-dom": "^17.0.2",
"react-pose": "^4.0.10",
"react-spring": "^9.3.0",
"react-textfit": "^1.1.1",
"styled-components": "^5.3.3",
"styled-tools": "^1.7.2"
},
"chart.js": "^3.6.0",
Chart JS, when it has an error, instead of throwing an error message, sometimes it just silently breaks.
I guess storybook had no handle for this odd case and loaded nothing without an error in the console. Which is fine because storybook was not the one with the error, this seems like Chart's fault.
When i deploy my vue application with firebase deploy i get a error in de console. I only use the firebase firestore and deployment.
t.INTERNAL.registerService is not a function
has someone a solution?
package.json
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/vue-fontawesome": "^0.1.6",
"core-js": "^2.6.5",
"firebase": "^6.4.0",
"moment": "^2.24.0",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-firestore": "^0.3.22",
"vue-izitoast": "^1.2.1",
"vue-moment": "^4.0.0",
"vue-router": "^3.0.3",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.1.1",
"vuexfire": "^3.0.0-alpha.18"
},
"devDependencies": {
"#tailwindcss/custom-forms": "^0.2.0",
"#vue/cli-plugin-babel": "^3.10.0",
"#vue/cli-plugin-eslint": "^3.10.0",
"#vue/cli-plugin-pwa": "^3.10.0",
"#vue/cli-service": "^3.10.0",
"#vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"tailwindcss": "^1.1.2",
"vue-template-compiler": "^2.6.10"
}
That particular error is usually a problem in the import of the firebase/app library dependency.
Try running the following command and it should fix the issue:
npm install #firebase/app --save
I'm trying to use Bootstrap with a SSR React app. I installed several bootstrap npm packages, but when importing the css into a React component I get an unexpected token error. I made sure that I have css loaders in webpack, and from examples online it doesn't seem like I need to do anything other than importing the css into a component. I'm not sure what I'm doing wrong.
error:
C:\Users\aw030085\OneDrive - Cerner Corporation\Desktop\test2\myssr\node_modules\bootstrap\dist\css\bootstrap.min.css:6
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:
SyntaxError: Unexpected token :
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Object.newLoader [as .js] (C:\Users\aw030085\OneDrive - Cerner Corporation\Desktop\test2\myssr\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
package.json dependencies:
"dependencies": {
"bootstrap": "^4.4.1",
"compression": "^1.7.4",
"express": "^4.17.1",
"immer": "^6.0.2",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-toastify": "^5.5.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/node": "^7.8.7",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/polyfill": "^7.8.7",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"css-loader": "^3.4.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-react": "^7.19.0",
"jest": "^25.1.0",
"nodemon": "^2.0.2",
"npm-run-all": "^4.1.5",
"serialize-javascript": "^3.0.0",
"style-loader": "^1.1.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
}
webpack:
const path = require("path");
const webpack = require('webpack');
module.exports = {
entry: "./src/components/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /(\.css)$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".js", ".jsx", ".json", ".wasm", ".mjs", "*"]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
},
}),
]
};
Header.js
import React from 'react';
import { Navbar, Nav} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const Header = () => {
return (
<>
<Navbar bg="light" variant="light">
<Navbar.Brand href="/">Brand</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/world">World</Nav.Link>
</Nav>
</Navbar>
</>
)
}
export default Header;
Also you write you only use css bootstrap.js requires jQuery. So
npm install jquery#latest
might be the step you missed
I have a meteor app that follows this file structure, https://guide.meteor.com/structure.html#example-app-structure.
In /client/main.js my code looks like this
import '/imports/startup/client';
console.log("this ran in client/main.js");
When I run meteor, the log shows, however, when I start the service with meteor --production, the log does not show.
Any idea or headings would be greatly appreciated!
FYI: This is a meteor react app with server-side rendering. Here is my package.json if it helps.
{
"dependencies": {
"#babel/runtime": "^7.0.0-beta.54",
"autoprefixer": "^7.1.6",
"aws-sdk": "^2.282.1",
"bcrypt": "^1.0.3",
"core-js": "^2.5.1",
"desandro-matches-selector": "^2.0.2",
"ev-emitter": "^1.1.1",
"fizzy-ui-utils": "^2.0.7",
"get-size": "^2.0.3",
"history": "^4.7.2",
"jquery": "^3.3.1",
"marked": "^0.3.19",
"meteor-node-stubs": "~0.2.11",
"moment": "^2.21.0",
"outlayer": "^2.1.1",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.5",
"react-helmet": "^5.2.0",
"react-markdown": "^3.3.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"s-grid": "^1.2.1"
},
"devDependencies": {}
}
Just to close this question, I believe my usage of --production flag is not correct in evaluating why client's logs are not shown in prod vs --production vs local.