I'm building an npm package that includes one react component as part of it. I originally developed the package as just a subfolder of the react app I was testing it on and it was all working. Now that I've extracted the code and turned it into it's own package, when I try to import it and build the react project it receives the error:
Support for the experimental syntax 'jsx' isn't currently enabled
...
Add #babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.
When I run build on the extracted package itself it builds with no issues, it's only when I try and incorporate it into the other project that it has issues. I've tried many of the other solutions from other threads with no luck.
package.json
{
"name": "my-tracing-project",
"version": "1.0.9",
"description": "tracing and instrumentation for react projects",
"main": "src/index.js",
"directories": {
"doc": "docs"
},
"scripts": {
"build": "webpack --mode=production --node-env=production",
"test": "echo \"Error: no test specified\" && exit 1",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
"watch": "webpack --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/plugin-transform-react-jsx": "^7.14.3",
"#babel/preset-flow": "^7.13.13",
"#babel/runtime": "^7.14.0",
"#opentelemetry/context-zone": "^0.19.0",
"#opentelemetry/exporter-collector": "^0.19.0",
"#opentelemetry/instrumentation": "^0.19.0",
"#opentelemetry/instrumentation-document-load": "^0.16.0",
"#opentelemetry/instrumentation-fetch": "^0.19.0",
"#opentelemetry/instrumentation-user-interaction": "^0.16.0",
"#opentelemetry/instrumentation-xml-http-request": "^0.19.0",
"#opentelemetry/plugin-react-load": "^0.16.0",
"#opentelemetry/tracing": "^0.19.0",
"#opentelemetry/web": "^0.19.0",
"babel-preset-react": "^6.24.1"
},
"devDependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/preset-react": "^7.13.13",
"#rollup/plugin-babel": "^5.3.0",
"#webpack-cli/generators": "^2.1.0",
"babel-loader": "^8.2.2",
"prettier": "^2.3.0",
"rollup": "^2.50.4",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
babel.config.js
module.exports = {
presets:[
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
webpack.config.js
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const isProduction = process.env.NODE_ENV == "production";
const config = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, "dist"),
},
plugins: [
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
} else {
config.mode = "development";
}
return config;
};
Development and build version not working in IE 11 and Edge. Here are my webpack config and package json file.
I have used below repo.
https://github.com/kriasoft/react-starter-kit
I have been trying to fix this issue using various babel packages and webpack configurations.
Arrow function seems not to be working.
Here's the error.
webpack.config.js
/**
* React Starter Kit (https://www.reactstarterkit.com/)
*
* Copyright © 2014-present Kriasoft, LLC. All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE.txt file in the root directory of this source tree.
*/
import fs from 'fs';
import path from 'path';
import webpack from 'webpack';
import WebpackAssetsManifest from 'webpack-assets-manifest';
import nodeExternals from 'webpack-node-externals';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import overrideRules from './lib/overrideRules';
import pkg from '../package.json';
const ROOT_DIR = path.resolve(__dirname, '..');
const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
const SRC_DIR = resolvePath('src');
const BUILD_DIR = resolvePath('build');
const isDebug = !process.argv.includes('--release');
const isVerbose = process.argv.includes('--verbose');
const isAnalyze =
process.argv.includes('--analyze') || process.argv.includes('--analyse');
const reScript = /\.(js|jsx|mjs)$/;
const reStyle = /\.(css|less|styl|sass|sss|scss)$/;
const reImage = /\.(bmp|gif|jpg|jpeg|png|svg)$/;
const staticAssetName = isDebug
? '[path][name].[ext]?[hash:8]'
: '[hash:8].[ext]';
//
// Common configuration chunk to be used for both
// client-side (client.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------
console.log('isDebug', isDebug)
const config = {
context: ROOT_DIR,
mode: isDebug ? 'development' : 'production',
output: {
path: resolvePath(BUILD_DIR, 'public/assets'),
publicPath: '/assets/',
pathinfo: isVerbose,
filename: isDebug ? '[name].js' : '[name].[chunkhash:8].js',
chunkFilename: isDebug
? '[name].chunk.js'
: '[name].[chunkhash:8].chunk.js',
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
// Allow absolute paths in imports, e.g. import Button from 'components/Button'
// Keep in sync with .flowconfig and .eslintrc
modules: ['node_modules', 'src'],
},
module: {
// Make missing exports an error instead of warning
strictExportPresence: true,
rules: [
// Rules for JS / JSX
{
test: reScript,
include: [SRC_DIR, resolvePath('tools')],
loader: 'babel-loader',
options: {
// https://github.com/babel/babel-loader#options
cacheDirectory: isDebug,
// https://babeljs.io/docs/usage/options/
babelrc: false,
configFile: false,
presets: [
// A Babel preset that can automatically determine the Babel plugins and polyfills
// https://github.com/babel/babel-preset-env
[
'#babel/preset-env',
{
targets: {
browsers: pkg.browserslist,
},
forceAllTransforms: !isDebug, // for UglifyJS
modules: false,
useBuiltIns: false,
debug: false,
},
],
// Flow
// https://github.com/babel/babel/tree/master/packages/babel-preset-flow
'#babel/preset-flow',
// JSX
// https://github.com/babel/babel/tree/master/packages/babel-preset-react
['#babel/preset-react', { development: isDebug }]
],
plugins: [
'relay',
// Experimental ECMAScript proposals
'#babel/plugin-proposal-class-properties',
'#babel/plugin-syntax-dynamic-import',
// Treat React JSX elements as value types and hoist them to the highest scope
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements
...(isDebug ? [] : ['#babel/transform-react-constant-elements']),
// Replaces the React.createElement function with one that is more optimized for production
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements
...(isDebug ? [] : ['#babel/transform-react-inline-elements']),
// Remove unnecessary React propTypes from the production build
// https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
...(isDebug ? [] : ['transform-react-remove-prop-types']),
],
},
},
// Rules for Style Sheets
{
test: reStyle,
rules: [
// Convert CSS into JS module
{
issuer: { not: [reStyle] },
use: 'isomorphic-style-loader',
},
// Process external/third-party styles
{
exclude: SRC_DIR,
loader: 'css-loader',
options: {
sourceMap: isDebug,
},
},
// Process internal/project styles (from src folder)
{
include: SRC_DIR,
loader: 'css-loader',
options: {
// CSS Loader https://github.com/webpack/css-loader
importLoaders: 1,
sourceMap: isDebug,
// CSS Modules https://github.com/css-modules/css-modules
modules: {
localIdentName: isDebug
? '[name]-[local]-[hash:base64:5]'
: '[hash:base64:5]',
},
},
},
// Apply PostCSS plugins including autoprefixer
{
loader: 'postcss-loader',
options: {
config: {
path: './tools/postcss.config.js',
},
},
},
// Compile Less to CSS
// https://github.com/webpack-contrib/less-loader
// Install dependencies before uncommenting: yarn add --dev less-loader less
// {
// test: /\.less$/,
// loader: 'less-loader',
// },
// Compile Sass to CSS
// https://github.com/webpack-contrib/sass-loader
// Install dependencies before uncommenting: yarn add --dev sass-loader node-sass
// {
// test: /\.(scss|sass)$/,
// loader: 'sass-loader',
// },
],
},
// Rules for images
{
test: reImage,
oneOf: [
// Inline lightweight images into CSS
{
issuer: reStyle,
oneOf: [
// Inline lightweight SVGs as UTF-8 encoded DataUrl string
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {
name: staticAssetName,
limit: 4096, // 4kb
},
},
// Inline lightweight images as Base64 encoded DataUrl string
{
loader: 'url-loader',
options: {
name: staticAssetName,
limit: 4096, // 4kb
},
},
],
},
// Or return public URL to image resource
{
loader: 'file-loader',
options: {
name: staticAssetName,
},
},
],
},
// Convert plain text into JS module
{
test: /\.txt$/,
loader: 'raw-loader',
},
// Convert Markdown into HTML
{
test: /\.md$/,
loader: path.resolve(__dirname, './lib/markdown-loader.js'),
},
// Return public URL for all assets unless explicitly excluded
// DO NOT FORGET to update `exclude` list when you adding a new loader
{
exclude: [reScript, reStyle, reImage, /\.json$/, /\.txt$/, /\.md$/],
loader: 'file-loader',
options: {
name: staticAssetName,
},
},
// Exclude dev modules from production build
...(isDebug
? []
: [
{
test: resolvePath(
'node_modules/react-deep-force-update/lib/index.js',
),
loader: 'null-loader',
},
]),
],
},
// Don't attempt to continue if there are any errors.
bail: !isDebug,
cache: isDebug,
// Specify what bundle information gets displayed
// https://webpack.js.org/configuration/stats/
stats: {
cached: isVerbose,
cachedAssets: isVerbose,
chunks: isVerbose,
chunkModules: isVerbose,
colors: true,
hash: isVerbose,
modules: isVerbose,
reasons: isDebug,
timings: true,
version: isVerbose,
},
// Choose a developer tool to enhance debugging
// https://webpack.js.org/configuration/devtool/#devtool
devtool: isDebug ? 'cheap-module-inline-source-map' : 'source-map',
};
//
// Configuration for the client-side bundle (client.js)
// -----------------------------------------------------------------------------
const clientConfig = {
...config,
name: 'client',
target: 'web',
entry: {
client: ['#babel/polyfill', './src/client.js'],
},
plugins: [
// Define free variables
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
'process.env.BROWSER': true,
__DEV__: isDebug,
}),
// Emit a file with assets paths
// https://github.com/webdeveric/webpack-assets-manifest#options
new WebpackAssetsManifest({
output: `${BUILD_DIR}/asset-manifest.json`,
publicPath: true,
writeToDisk: true,
customize: ({ key, value }) => {
// You can prevent adding items to the manifest by returning false.
if (key.toLowerCase().endsWith('.map')) return false;
return { key, value };
},
done: (manifest, stats) => {
// Write chunk-manifest.json.json
const chunkFileName = `${BUILD_DIR}/chunk-manifest.json`;
try {
const fileFilter = file => !file.endsWith('.map');
const addPath = file => manifest.getPublicPath(file);
const chunkFiles = stats.compilation.chunkGroups.reduce((acc, c) => {
acc[c.name] = [
...(acc[c.name] || []),
...c.chunks.reduce(
(files, cc) => [
...files,
...cc.files.filter(fileFilter).map(addPath),
],
[],
),
];
return acc;
}, Object.create(null));
fs.writeFileSync(chunkFileName, JSON.stringify(chunkFiles, null, 2));
} catch (err) {
console.error(`ERROR: Cannot write ${chunkFileName}: `, err);
if (!isDebug) process.exit(1);
}
},
}),
...(isDebug
? []
: [
// Webpack Bundle Analyzer
// https://github.com/th0r/webpack-bundle-analyzer
...(isAnalyze ? [new BundleAnalyzerPlugin()] : []),
]),
],
// Move modules that occur in multiple entry chunks to a new entry chunk (the commons chunk).
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
},
},
},
},
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
// https://webpack.js.org/configuration/node/
// https://github.com/webpack/node-libs-browser/tree/master/mock
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};
//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------
const serverConfig = {
...config,
name: 'server',
target: 'node',
entry: {
server: ['#babel/polyfill', './src/server.js'],
},
output: {
...config.output,
path: BUILD_DIR,
filename: '[name].js',
chunkFilename: 'chunks/[name].js',
libraryTarget: 'commonjs2',
},
// Webpack mutates resolve object, so clone it to avoid issues
// https://github.com/webpack/webpack/issues/4817
resolve: {
...config.resolve,
},
module: {
...config.module,
rules: overrideRules(config.module.rules, rule => {
// Override babel-preset-env configuration for Node.js
if (rule.loader === 'babel-loader') {
return {
...rule,
options: {
...rule.options,
presets: rule.options.presets.map(preset =>
preset[0] !== '#babel/preset-env'
? preset
: [
'#babel/preset-env',
{
targets: {
node: pkg.engines.node.match(/(\d+\.?)+/)[0],
},
modules: false,
useBuiltIns: false,
debug: false,
},
],
),
},
};
}
// Override paths to static assets
if (
rule.loader === 'file-loader' ||
rule.loader === 'url-loader' ||
rule.loader === 'svg-url-loader'
) {
return {
...rule,
options: {
...rule.options,
emitFile: false,
},
};
}
return rule;
}),
},
externals: [
'./chunk-manifest.json',
'./asset-manifest.json',
nodeExternals({
whitelist: [reStyle, reImage],
}),
],
plugins: [
// Define free variables
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
'process.env.BROWSER': false,
__DEV__: isDebug,
}),
// Adds a banner to the top of each generated chunk
// https://webpack.js.org/plugins/banner-plugin/
new webpack.BannerPlugin({
banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false,
}),
],
// Do not replace node globals with polyfills
// https://webpack.js.org/configuration/node/
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
};
export default [clientConfig, serverConfig];
package.json
{
"name": "web",
"version": "0.0.0",
"private": true,
"engines": {
"node": ">=8.16.2",
"npm": ">=6.4.1"
},
"browserslist": [
">1%",
"ie 11"
],
"dependencies": {
"#babel/polyfill": "^7.7.0",
"#date-io/moment": "^1.3.11",
"#material-ui/core": "^4.7.0",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.33",
"#material-ui/pickers": "^3.2.8",
"#material-ui/styles": "^4.6.0",
"aws-sdk": "^2.580.0",
"axios": "^0.19.0",
"babel-plugin-relay": "^7.1.0",
"body-parser": "^1.19.0",
"classnames": "^2.2.6",
"clsx": "^1.0.4",
"cookie-parser": "^1.4.3",
"dotenv": "^8.2.0",
"express": "^4.16.3",
"express-graphql": "~0.8.0",
"express-jwt": "^5.3.1",
"express-session": "^1.17.0",
"fs": "0.0.1-security",
"graphql": "^14.5.8",
"history": "^4.10.1",
"isomorphic-style-loader": "^5.1.0",
"jsonwebtoken": "^8.3.0",
"material-ui-color-picker": "^3.2.0",
"node-fetch": "^2.2.0",
"normalize.css": "^8.0.1",
"passport": "^0.4.0",
"passport-facebook": "^3.0.0",
"passport-local": "^1.0.0",
"pg": "^7.14.0",
"pretty-error": "^2.1.1",
"prismjs": "^1.17.1",
"prop-types": "^15.6.2",
"query-string": "^6.9.0",
"react": "^16.12.0",
"react-cookie": "^4.0.1",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"react-material-ui-form-validator": "^2.0.9",
"react-page-loading": "^1.0.2",
"react-perfect-scrollbar": "^1.5.3",
"react-relay": "^7.1.0",
"react-router-dom": "^5.1.2",
"reconnecting-websocket": "^4.2.0",
"relay-runtime": "^7.1.0",
"sequelize": "^5.21.2",
"serialize-javascript": "^2.1.0",
"source-map-support": "^0.5.9",
"sqlite3": "^4.0.8",
"striptags": "^3.1.1",
"subscriptions-transport-ws": "^0.9.16",
"universal-router": "^8.3.0",
"validate.js": "^0.13.1",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/node": "^7.7.0",
"#babel/plugin-proposal-class-properties": "^7.7.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-transform-react-constant-elements": "^7.0.0",
"#babel/plugin-transform-react-inline-elements": "^7.0.0",
"#babel/preset-env": "^7.7.1",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.7.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.18",
"browser-sync": "^2.24.7",
"chokidar": "^3.3.0",
"css-loader": "^3.2.0",
"cssnano": "^4.1.10",
"enzyme": "^3.6.0",
"eslint": "^5.6.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^6.6.0",
"eslint-import-resolver-node": "^0.3.2",
"eslint-loader": "^3.0.2",
"eslint-plugin-css-modules": "^2.9.1",
"eslint-plugin-flowtype": "^3.13.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^23.0.4",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.11.1",
"execa": "^3.3.0",
"file-loader": "^4.2.0",
"flow-bin": "^0.112.0",
"front-matter": "^3.0.2",
"glob": "^7.1.6",
"husky": "^3.0.9",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.9.0",
"lint-staged": "^9.4.3",
"log-symbols": "^3.0.0",
"markdown-it": "^10.0.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.13.0",
"null-loader": "^3.0.0",
"opn-cli": "^5.0.0",
"pixrem": "^5.0.0",
"pleeease-filters": "^4.0.0",
"postcss": "^7.0.2",
"postcss-calc": "^7.0.1",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-import": "^12.0.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.6.0",
"postcss-pseudoelements": "^5.0.0",
"prettier": "^1.19.1",
"puppeteer": "^2.0.0",
"raw-loader": "^3.1.0",
"react-deep-force-update": "^2.1.3",
"react-dev-utils": "^9.1.0",
"react-error-overlay": "^6.0.3",
"react-test-renderer": "^16.12.0",
"relay-compiler": "^7.1.0",
"relay-config": "^7.1.0",
"rimraf": "^3.0.0",
"sass-loader": "^8.0.0",
"stylelint": "^12.0.0",
"stylelint-config-standard": "^19.0.0",
"stylelint-order": "^3.1.1",
"svg-url-loader": "^3.0.2",
"terminate": "^2.1.2",
"url-loader": "^2.2.0",
"wait-on": "^3.3.0",
"webpack": "^4.19.1",
"webpack-assets-manifest": "^3.0.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-dev-middleware": "^3.3.0",
"webpack-hot-middleware": "^2.24.2",
"webpack-node-externals": "^1.7.2"
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --no-ignore --fix",
"git add --force"
],
"*.{json,md,graphql}": [
"prettier --write",
"git add --force"
],
"*.{css,less,styl,scss,sass,sss}": [
"stylelint --fix",
"git add --force"
]
},
"scripts": {
"lint-js": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" .",
"lint-css": "stylelint \"src/**/*.{css,less,styl,scss,sass,sss}\"",
"lint": "yarn run lint-js && yarn run lint-css",
"fix-js": "yarn run lint-js --fix",
"fix-css": "yarn run lint-css --fix",
"fix": "yarn run fix-js && yarn run fix-css",
"flow": "flow",
"flow:check": "flow check",
"test": "jest",
"test-watch": "yarn run test --watch --notify",
"test-cover": "yarn run test --coverage",
"coverage": "yarn run test-cover && opn coverage/lcov-report/index.html",
"clean": "babel-node tools/run clean",
"copy": "babel-node tools/run copy",
"bundle": "babel-node tools/run bundle",
"build": "babel-node tools/run build",
"build-stats": "yarn run build --release --analyse",
"deploy": "babel-node tools/run deploy",
"render": "babel-node tools/run render",
"serve": "babel-node tools/run runServer",
"start": "babel-node tools/run start relay",
"relay": "relay-compiler --src ./src --schema ./schema.graphql"
}
}
It was related to query-string package.
Issue has been resolved.
Ref: https://stackoverflow.com/a/49985749/7398574
I created a React.js project from scratch, with my own webpack config etc... I try to put mobx inside the project but I can not because import doesn't work.
as you can see:
I tried everything like import mobx from 'mobx or import { observable } from 'mobx/lib/mobx' the last solution works but it is not a good practice as the official document says : https://mobx.js.org/best/pitfalls.html
I share the webpack config, package.json, .babelrc
webpack config :
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
module.exports = {
entry: path.join(__dirname,'src','index.js'),
output: {
path: path.join(__dirname,'build'),
filename: 'index.bundle.js',
},
mode: process.env.NODE_ENV || 'development',
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
devServer: {
contentBase: path.join(__dirname,'src'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
loaders: ['file-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname,'public','index.html'),
filename: 'index.html',
favicon: path.join(__dirname,'public','favicon.png'),
}),
],
};
package.json :
{
"name": "client",
"version": "1.0.0",
"description": "front-end built in reactjs for the js under pressure project",
"main": "index.js",
"license": "MIT",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "yarn lint && babel-node ./node_modules/webpack/bin/webpack --mode production",
"start:dev": "yarn lint && babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --mode development --open",
"lint": "babel-node ./node_modules/eslint/bin/eslint.js \"src/**/*.js\" \"src/**/*.jsx\" --fix"
},
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/node": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"eslint": "^5.16.0",
"eslint-plugin-eslint-comments": "^3.1.1",
"eslint-plugin-jest": "^22.6.4",
"eslint-plugin-react": "^7.13.0",
"html-webpack-plugin": "^3.2.0",
"mobx": "^5.10.0",
"mobx-react": "^6.0.3",
"mobx-react-devtools": "^6.1.1",
"node-sass": "^4.12.0",
"path": "^0.12.7",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.6.0"
},
"dependencies": {
"#material-ui/core": "^4.0.2",
"#material-ui/icons": "^4.0.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-ace": "^7.0.2",
"react-dom": "^16.8.6"
}
}
babelrc :
{
"presets": [
"#babel/env",
"#babel/react"
],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
and what i'm trying :
mobx/index.js :
import { observable } from 'mobx';
class AppStore {
#observable test = 'test';
/* #observable level = 0;
#observable check = 0;
#observable skiped = false;
#observable state = 0;
#observable count = 0;
#observable levels= [];
#observable test = [];
*/
/* #action.bound
levelUp() {
this.level += 1;
}
#action.bound
startTimer() {
setInterval(() => {
this.count += 1;
}, 1000);
}
#action.bound
skiped() {
this.skip = !this.skip;
}
#action.bound
startTest() {
this.state = 1;
}
#action.bound
endTest() {
this.state = 2;
clearInterval(this.startTime());
}*/
}
export default AppStore;
and the src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from 'containers/app.jsx';
import AppStore from 'mobx/index.js';
const store = new AppStore();
/**
* DOM component - setup main component into root div
* #reactProps {none} none - none
* #desc Entry point of the react app
* #extends {ReactDOM}
* #public
* #version 1.0
* #since 1.0
*/
/*eslint react/jsx-filename-extension: 0*/
ReactDOM.render((
<App store={ store } />
),
document.getElementById('root'));
Any help will be greatly appreciated.
Thanks for your time and happy coding!!!
Here's your problem:
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
It wouldn't be a problem, except that you have to be careful not to name your directories the same as npm packages. If you change the mobx directory to, say, store, module resolution should work properly again.
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))"
]
}
}
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"
]
}