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.
Related
Here is my package.js file
{
"name": "cabed",
"version": "0.1.0",
"private": false,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"electron-forge": "^5.2.4",
"electron-is-dev": "^2.0.0",
"electron-packager": "^17.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"main": "public/electron.js",
"homepage": "./",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"",
"electron": "wait-on tcp:3000 && electron .",
"eb": "electron-packager C:/Users/user/cabed cddf --platform=win32 --arch=x64"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^7.6.0",
"cross-env": "^7.0.3",
"electron": "^22.1.0",
"wait-on": "^7.0.1"
},
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "stock_trading_app"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin",
"linux",
"win32"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
}
}
The generated exe with electron builder which i ran with
npm run eb
the exe generated by code above
does not render the react app inside the opened windows app.
Here is my app js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div style={{justifyContent:'center',alignContent:'center',alignItems:'center'}}>
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
<p>
Sasdsad
</p>
<p>
Sasdsad
</p>
</div></div>
);
}
export default App;
my electron.js looks like this under public directory.
const path = require('path');
const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
// and load the index.html of the app.
// win.loadFile("index.html");
win.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, "./index.html")}`
);
// Open the DevTools.
if (isDev) {
win.webContents.openDevTools({ mode: 'detach' });
}
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
When running npm start first, then the exe renders react page inside window.
I need some configuration probably but i could not found it yet.
Since you said it works when you start your server first, I assume you're using the localhost URL both in dev and in prod. When your app is packaged, you should load the file in your window and not the local URL:
const { app } = require("electron");
const windowURL = app.isPackaged
? `file://${path.join(__dirname, "./index.html")}`
: "http://localhost:3000/";
mainWindow.loadURL(windowURL);
The path when your app is packaged might be different depending on your file structure and your build/package configurations. Also, don't forget to add "homepage": "./" on your package.json or you may get a blank page.
I have the nuxt application which works fine in chrome and all other browser but it is getting failed in the internet explorer.
I tried so many solutions on the internet but had no luck yet so asking for help from someone who got in the same problem while supporting the internet explorer.
Below are my nuxt.config and package.json.
nuxt.config.js
require('dotenv').config()
export default {
mode: 'universal',
head: {
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'
}],
script: [{
src: 'https://cdn.polyfill.io/v2/polyfill.js?features=es5,es2015,Array.from,es6,Object.entries,Object.defineProperty,IntersectionObserver,gated&flags=gated&unknown=polyfill&callback=onPolyfillsLoad'
}]
},
/*
** Customize the progress-bar color
*/
loading: {
color: '#fff'
},
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js dev-modules
*/
buildModules: [
'#nuxtjs/vuetify',
'#nuxtjs/dotenv'
// Doc: https://github.com/nuxt-community/eslint-module
// '#nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/stylelint-module
// '#nuxtjs/stylelint-module'
],
/*
** Nuxt.js modules
*/
modules: [
'#nuxtjs/pwa',
'#nuxtjs/axios',
'#nuxtjs/proxy',
// Doc: https://github.com/nuxt-community/dotenv-module
'cookie-universal-nuxt',
'bootstrap-vue/nuxt'
],
bootstrapVue: {
components: ['BTabs', 'BTab']
},
axios: {
proxyHeaders: true,
init(axios, ctx) {
axios.defaults.headers.post['Content-Type'] = 'application/json;'
}
},
env,
/*
** Build configuration
*/
build: {
transpile: [],
vendor: ['axios'],
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
};
package.json
{
"name": "repo",
"version": "1.0.0",
"description": "repo",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint - ext .js,.vue - ignore-path .gitignore .",
"lint:fix": "eslint - fix - ext .js,.vue - ignore-path .gitignore .",
"lint:css": "stylelint - fix ./**/*.{vue,scss,css}"
},
"lint-staged": {
"*.{js,vue}": "npm run lint:fix",
"*.{css,vue}": "npm run lint:css"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"#nuxtjs/axios": "⁴.5.2",
"#nuxtjs/dotenv": "¹.4.0",
"#nuxtjs/proxy": "².0.1",
"#nuxtjs/pwa": "³.0.0–0",
"#nuxtjs/vuetify": "¹.11.3",
"axios": "⁰.21.0",
"bootstrap-vue": "².21.2",
"cookie-universal-nuxt": "².1.4",
"cross-env": "⁵.2.1",
"jsonwebtoken": "⁸.5.1",
"lodash": "⁴.17.20",
"moment": "².29.1",
"nuxt": "².0.0",
"vuex-persist": "³.1.3"
},
"devDependencies": {
"#nuxtjs/eslint-config": "².0.0",
"#nuxtjs/eslint-module": "¹.0.0",
"#nuxtjs/stylelint-module": "³.1.0",
"babel-eslint": "¹⁰.0.1",
"eslint": "⁶.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-vue": "⁶.2.2",
"eventsource-polyfill": "⁰.9.6",
"lint-staged": "¹⁰.0.0",
"node-sass": "4.14.0",
"sass-loader": "8.0.2",
"stylelint": "¹⁰.1.0",
"stylelint-config-standard": "²⁰.0.0"
},
"config": {
"nuxt": {
"host": "0.0.0.0"
}
},
"engines": {
"node": "¹⁰.x"
}
}
Error:
which I am getting after so many changes,
HTML1300: Navigation occurred.
testpage
polyfill-eventsource added missing EventSource to window
[HMR] connected
SCRIPT5078: Cannot redefine non-configurable property 'values'
polyfill.js (3,2023)
Kindly help me to figure out how I can debug or fix this thing so I can run the nuxt application in the internet explorer.
I am having a problem with #popperjs/core not working in my normal javascript environment.
Here is some code that demos my problem
index.js
import { createPopper } from '#popperjs/core';
console.log("Hello world!");
package.json
{
"name": "popperjsproblem",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"dependencies": {
"#popperjs/core": "^2.10.2"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/plugin-proposal-class-properties": "^7.14.5",
"#babel/preset-env": "^7.15.8",
"#babel/eslint-parser": "^7.15.8",
"babel-loader": "^8.2.2",
"eslint": "^8.0.1",
"eslint-import-resolver-webpack": "^0.13.1",
"eslint-webpack-plugin": "^3.0.1",
"eslint-plugin-import": "^2.20.0",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0"
},
"babel": {
"presets": [
"#babel/preset-env"
]
},
"eslintConfig": {
"extends": [
"eslint:recommended"
],
"root":true,
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-debugger": "off",
"no-console": "off",
"no-unused-vars": "warn"
},
"settings": {
"import/resolver": "webpack"
}
}
}
webpack.config.js
const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const esLintLoaderOptions = {
extensions: [`js`, `jsx`],
exclude: [
`/node_modules/`
]
};
module.exports = {
entry: "./index.js",
mode: "development",
target:"web",
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/",
},
stats: {
colors: true,
},
devtool: "cheap-module-source-map",
plugins: [
new ESLintPlugin(esLintLoaderOptions)
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
],
}
};
When I run "npm run build" I get the following error
ERROR in Failed to load config "./.config/eslint.config" to extend from.
Referenced from: {project directory}\node_modules\#popperjs\core\package.json
If I were to import another 3rd party library instead of #popperjs/core in index.js and run "npm run build" no errors are displayed, the code is correctly transpiled and put in a file called main.bundle.js which is found in the dist folder. I would expect exactly the same to happen with #popperjs/core. So my question is is it possible to change something so that I can import #popperjs/core and get the same behaviour as you get with other libraries. The problem appears to be to do with ESLint. I would ideally like to keep ESLint because it is obviously a very useful tool in development.
When researching the problem I came across this link https://github.com/popperjs/popper-core/issues/1105 which appears to describe a problem similar to mine. However I can't see how I would apply the solutions given my set up.
Strangely the solution appears to be to remove node_modules from the eslint-webpack-plugin options. I.e. change
const esLintLoaderOptions = {
extensions: [`js`, `jsx`],
exclude: [
`/node_modules/`
]
};
to
const esLintLoaderOptions = {
extensions: [`js`, `jsx`]
};
The eslint-webpack-plugin docs say that node_modules are excluded by default so must be something to do with that.
I have a monorepo that is set according to this tutorial: tutorial.
This project is composed by a main folder (series4) that holds three packages, which are focused on web, mobile applications and common code - they are named web, app and common folders respectively.
Summarizing ... these folders are:
/series4/packages/web
/series4/packages/common
/series4/packages/app
I am trying to use the Modal module, however I get this error:
SyntaxError: series4/node_modules/react-native-modal/src/index.js:
Support for the experimental syntax 'classProperties' isn't currently
enabled (25:20)
I have read the documentation that is here: Babel.
However I was not able to solve this error.
The package.json that is in "series4" directory is:
{
"name": "#wow/common",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"build": "rimraf dist && tsc",
"watch": "tsc --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "16.8.2",
"react-native": "0.59.0-rc.1",
"react-native-elements": "^1.1.0",
"react-native-image-slider-box": "^1.0.5",
"react-native-snap-carousel": "^3.8.0"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#types/react-native": "0.57.36",
"rimraf": "^2.6.3",
"typescript": "3.3.3"
}
}
The babel.config.js file (it is in series4 directory) is:
module.exports = {
presets: [
"#babel/preset-env",
"#babel/preset-react"
],
plugins: [
'#babel/proposal-class-properties',
'#babel/plugin-proposal-class-properties'
],
babelrcRoots: [
".",
"packages/*",
],
};
I have configured the following babelrc in web and common folders.
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties"
]
]
}
The package.json in common folder is:
{
"name": "#wow/common",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"build": "rimraf dist && tsc",
"watch": "tsc --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "16.8.2",
"react-native": "0.59.0-rc.1",
"react-native-elements": "^1.1.0",
"react-native-image-slider-box": "^1.0.5",
"react-native-snap-carousel": "^3.8.0"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#types/react-native": "0.57.36",
"rimraf": "^2.6.3",
"typescript": "3.3.3"
}
}
The package.json in web folder is:
{
"name": "react-native-web-workout-series",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "24.0.5",
"#types/node": "11.9.4",
"#types/react": "16.8.3",
"#types/react-dom": "16.8.1",
"#wow/common": "1.0.0",
"react": "^16.8.2",
"react-art": "16.8.2",
"react-dom": "^16.8.2",
"react-native": "0.55.4",
"react-native-modal": "^11.3.1",
"react-native-web": "0.10.0",
"react-scripts": "2.1.5",
"typescript": "3.3.3"
},
"scripts": {
"start": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#types/react-native": "0.55.4",
"babel-plugin-module-resolver": "^3.2.0",
"cross-env": "^5.2.0"
}
}
I get the error when I run the
yarn start
command in web folder (the command works perfectly when I execute it without the Modal module).
What am I missing?
This is probably caused by react-native-modal not transpiling class property syntax. And, by default, node_modules will not be transpiled. When js engine read the class property syntax, it bails.
You need babel.config.js to affect the node_modules
module.exports = function (api) {
api.cache(true);
return {
babelrcRoots: [
'.',
'./modules/*'
],
ignore: [/node_modules/(?!react-native-modal)/],
presets: ["#babel/preset-env"]
};
}
'classProperties' isn't currently enabled also implies that the JS engine support class property syntax with some configuration, maybe there is a way to make the engine accept this syntax
See this
TL;DR
To have a custom config for babel in create-react-app, you need to first eject and work on the config directly after that.
Run npm run eject, go to config/webpack.config.js, find and replace the babel-loader with test: /\.(js|mjs|jsx|ts|tsx)$/.
...
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: [paths.appSrc, paths.appNodeModules],
exclude: /node_modules\/(?!react-native-modal|react-native-animatable)/,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
presets: [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
],
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'#svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
['#babel/plugin-proposal-class-properties', { loose: true }],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
...
What I said is partially true, babel is not transpiling react-native-modal. And, why creating a babel.cofig.js doesn't work is, create-react-app uses a config that lives in another universe (see this SO).
At first I noticed there is a syntax error in your babel.config.js but building the project is not complaining anything about that. So I suspect it is not being used and come across the above SO post.
It now compiles successfully but throws some runtime error because some packages are built for mobile app and expo.
out of scope
One notable one is in react-native-modal.
// react-native-modal
import { DeviceEventEmitter } from 'react-native';
However, in react-native,
module.exports = {
get DeviceEventEmitter() { ... }
};
// which is approximately
export default {
DeviceEventEmitter,
}
Using named import as object destructuring is considered wrong by babel. You could workaround this by
presets: [
["#babel/preset-env", { module: 'commonjs' }],
"#babel/preset-react",
"#babel/preset-typescript",
],
However, DeviceEventEmitter will be undefined then. Other export works fine tho.
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"
]
}