React project not running on windows but runs on ubuntu - javascript

I have imported a reacted project in my computer. It gives me an error in console when I try to run the gulp command. But at the same time when I run it on ubuntu, it works perfectly fine. This is the error I am getting on windows
ERROR in ./src/client/index.js
Module parse failed: D:\Frontend-Master\src\client\index.js Unexpected token (64:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (64:2)
at Parser.pp$4.raise (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1573:21)
# multi main
-- client bundled.
Hash: f58f7ad4ec2f7df577bf
Version: webpack 1.13.3
Time: 853ms
Asset Size Chunks Chunk Names
server-bundle.js 24.5 kB 0 [emitted] main
-- server:watch bundled.
[14:53:35] Finished 'bundle' after 946 ms
[14:53:35] Starting 'start:server'...
Starting Node Server...
[14:53:36] Finished 'start:server' after 1.23 s
[14:53:36] Starting 'watch:sync'...
webpack built 7a9966082c49871875b8 in 386ms
Hash: 7a9966082c49871875b8
Version: webpack 1.13.3
Time: 386ms
Asset Size Chunks Chunk Names
main-bundle.js 99.3 kB 0 main
ERROR in ./src/client/index.js
Module parse failed: D:\Frontend-Master\src\client\index.js Unexpected token (64:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (64:2)
at Parser.pp$4.raise (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1573:21)
# multi main
This is my index.js file
var debug = require('debug')('tes:client')
window.Promise = Promise;
window.$ = window.jQuery = $;
injectTapEventPlugin();
var browserHistory = useRouterHistory(createHistory)({
queryKey: false,
basename: '/'
});
var initialState = window.INITIAL_STATE || {};
var store = configureStore(initialState, browserHistory);
var routes = getRoutes(store);
var history = syncHistoryWithStore(browserHistory, store, {
selectLocationState: (state) => state.router
});
const ROOT_CONTAINER = document.getElementById('root');
const onRenderComplete = ()=> {
console.timeEnd('render');
}
if ( __DEV__ ){
window._STORE = store;
window.React = React;
window.ReactDOM = ReactDOM;
}
window.localStorage.debug = 'tessact:*'
window._History = history
let muiTheme = getMuiTheme(theme);
console.time('render');
match({ history, routes }, (error, redirectLocation, renderProps) => {
ReactDOM.render(
<MuiThemeProvider muiTheme={muiTheme}>
<Root store={store}>
<WithStylesContext onInsertCss={styles=> styles._insertCss()}>
<Router {...renderProps} />
</WithStylesContext>
</Root>
</MuiThemeProvider>,
ROOT_CONTAINER,
onRenderComplete
)
});
This is my client.config.js file
var path = require('path');
var webpack = require('webpack');
var DIRS = require('./dirs.js');
var stylus = require('stylus');
var nib = require('nib');
var axis = require('axis');
var rupture = require('rupture');
var bootstrap = require('bootstrap-styl');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var IS_PROD = process.env.NODE_ENV === "production";
var config = {
devtool: IS_PROD ? false : 'eval',
debug: !IS_PROD,
cache: true,
root: DIRS.ROOT,
watchOptions: {
ignored: /node_modules/
},
entry: {
main: [ DIRS.SRC_CLIENT + '/index.js' ]
},
output: {
path: DIRS.BUILD_PUBLIC,
publicPath: '/public/',
filename: '[name]-bundle.js'
},
resolve: {
modulesDirectories: [ DIRS.SRC_CLIENT, 'node_modules'],
extensions: ['', '.webpack.js', '.web.js', '.js', '.styl'],
},
module: {
loaders: [
{test: /\.json$/, loader: 'json', exclude: /node_modules/},
{test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
include: [ DIRS.SRC_CLIENT ],
query: {
cacheDirectory: true,
env: {
development: {
presets: ['react-hmre']
}
}
}
},
{
test: /\.styl$/,
loader: [
'isomorphic-style-loader',
'css?sourceMap&localIdentName=[name]_[local]_[hash:base64:3]',
'stylus?sourceMap'
].join('!')
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader',
query: {
name: IS_PROD ? '[hash].[ext]' : '[path][name].[ext]?[hash]',
limit: 10000,
}
}
]
},
plugins: [
new webpack.DefinePlugin({
__DEV__: !IS_PROD,
__SERVER__: false,
"process.env.NODE_ENV": (IS_PROD ? JSON.stringify("production") : JSON.stringify("development"))
}),
new webpack.ProvidePlugin({
React: 'react'
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)
],
stylus: {
use: [nib(), axis(), rupture(), bootstrap()],
import: path.resolve(__dirname, '../src/stylus/index.styl'),
error: IS_PROD,
compress: IS_PROD,
'include css': true
}
};
if (IS_PROD){
// console.log('--- CLIENT:PRODUCTION_MODE ---');
config.entry.vendors = [
'react', 'react-dom', 'react-router',
'lodash', 'core-js', 'moment', 'jquery', 'bluebird',
'redux', 'react-redux', 'react-router-redux',
'history'
];
config.plugins = config.plugins.concat([
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors-bundle.js'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
comments: false
}),
new webpack.optimize.AggressiveMergingPlugin(),
]);
} else {
config.entry.main.unshift('webpack-hot-middleware/client')
config.plugins = config.plugins.concat([
new webpack.DllReferencePlugin({
context: DIRS.SRC_CLIENT,
manifest: require(DIRS.BUILD_PUBLIC + '/dll/vendor-manifest.json')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]);
}
module.exports = config;
And this is scripts in package.json
"main": "index.js",
"scripts": {
"postinstall": "set NODE_ENV=production node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod",
"start": "node build/server-bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
There is server.config.js file also which i haven't attached as think it is not necessary. Everything of this code works file in Ubuntu.
Error after Shubham Khatri's answer. I ran both the commands in comments of his answer.
> cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod
D:\Frontend-Master\node_modules\.bin\gulp:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN tessact#0.0.1 No repository field.
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! tessact#0.0.1 postinstall: `cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tessact#0.0.1 postinstall script 'cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the tessact package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs tessact
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls tessact
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\Frontend-Master\npm-debug.log

Don't copy node modules as is, you are supposed to get all node modules again when you change OS.
Remove node_modules folder and run npm install.
BTW: importing node project with node_modules folder is not a good practice. you have to put node_modules in .gitignore

The way you have set NODE_ENV for postInstall doesn't work for windows but for linux.
For cross platform compatibility set NODE_ENV like cross-env NODE_ENV=prod &
So you package.json scripts looks like
"scripts": {
"postinstall": "cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod",
"start": "node build/server-bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
Also you can install the node_modules again with the npm install command when in windows.

Related

Trying to create readable output bundle but error message:- Entry module not found: Error: Can't resolve './src/index.js'

I am using Webpack version 6.14.8 in an Asp.net Core Razor Pages application in Visual Studio 2019. I am trying to create a readable output file. Here is the structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
|-->dist (generated by webpack)
------->main.js (webpack bundle)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
The src/index.js file is blank index.js file.
The package.json: -
{
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --entry ./src/index.js --output ./dist/main.js --mode development",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.20",
"startbootstrap-simple-sidebar": "^5.1.2",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0"
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
I am trying to create a readable output folder: -"dist/main.js" in wwwroot folder: dist/main.js. However, when I ran the command: npm run wbp, I received the following error message about the entry module could not be found: Error: Can't resolve './src/index.js' in C:\ directory folder: -
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >npm run wbp
>helloword#1.0.0 wbp C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
>webpack ./src/index.js --output ./dist/main.js --mode development
asset main.js 1.47 KiB [emitted] (name: main)
.dist/main.js 644 bytes built] code generated
ERROR in main
Module not found: Error: Can't resolve './src/index.js' in C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
webpack 5.1.3 compiled with 1 error in 858 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! HelloWorld#1.0.0 build: `webpack --config webpack.config.js --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the HelloWorld#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2020-10-18T07_19_13_940Z-debug.log
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >
The dist/main file was created in the project directory and its contents are: -
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is not neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/*!**********************!*\
!*** ./dist/main.js ***!
\**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: */
eval("/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default in mode: \"development\").\n * This devtool is not neither made for production nor for readable output files.\n * It uses \"eval()\" calls to create a separate source file in the browser devtools.\n * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)\n * or disable the default devtool with \"devtool: false\".\n * If you are looking for production-ready output files, see mode: \"production\" (https://webpack.js.org/configuration/mode/).\n */\n/******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/ })()\n;\n\n//# sourceURL=webpack://HelloWorld/./dist/main.js?");
/******/ })()
;
I looked at the url address:- https://webpack.js.org/configuration/devtool/, and I tried the "output.path" option: Output|webpack, but it did not work, when I ran the "npm run wbp" command.
How do I fix the issue of input: .src/index.js file is not found and how do I create a readable output: dist/main file?
Thank you in advance.
Current structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
----->dist (generated by webpack-created by the command: npm run build)
------->main.js (webpack bundle-created by the command: npm run build)
------->index.html (created by the command: npm run build)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
package.json
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "SET NODE_ENV='production' && webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"lodash": "^4.17.20",
"popper.js": "^1.16.1",
"startbootstrap-simple-sidebar": "^5.1.2",
"style-loader": "^2.0.0",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0",
"webpack-node-externals": "^2.5.2"
},
"dependencies": {
"#fullcalendar/core": "^5.3.1",
"#fullcalendar/daygrid": "^5.3.2",
"#fullcalendar/list": "^5.3.1",
"#fullcalendar/timegrid": "^5.3.1"
}
}
I updated the input and output files of the webpack.config.js file in development mode as follows: -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'development',
entry: [
'babel-polyfill',
'./wwwroot/src/index.js'
],
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'main.js'
},
resolve: {
extensions: ['.js', '.json']
},
module: {
rules: [
{ test: /\.(js)$/, use: { loader: 'babel-loader', options: {presets: ['#babel/preset-react']} }},
{ test: /\.(sass|scsss|css)$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(svg|eot|woff|woff2|ttf)$/, use: ['file-loader'] },
]
},
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], //in order to ignore all modules in node_modules folder
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(),
],
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
and afterwards run the command:- npm run build

how can I run a web-app with a docker-container?

I have a simple web-app, with an index.html, app.js and package.json files.
Now, I want to run it via a docker-container. On my local machine, I can run the app with npm install and then npm start.
When I try to run it via docker-compose up, I get the following error message:
Couldn't connect to Docker daemon at http+docker://localunixsocket - is it running?
If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable
My Dockerfile looks as follows:
FROM node:8.11
WORKDIR /usr/src/app
ARG NODE_ENV
ENV NODE_ENV $NODE_ENV
COPY package.json /usr/src/app/
RUN npm install
COPY . /usr/src/app
# replace this with your application's default port
EXPOSE 8000
CMD [ "npm", "run", "dev" ]
and docker-compose.yml looks as this:
version: "2"
services:
web:
build: .
command: nodemon -L --inspect=0.0.0.0:5858
volumes:
- .:/usr/src/app
ports:
- "8000:8000"
- "5858:5858"
Actually, the app should run under localhost:8000 or under localhost:5858 for debug-mode.
Any idea what is wrong with Dockerfile or the docker-compose.yml? I already tried the fixes described here, but both suggestions don't work for me, so there must be something else wrong.
Thanks in advance and kind regards.
PS: If you need more code, please feel free to tell me and I add it to the question.
Update: the package.json looks as follows:
{
"name": "custom-meta-model",
"version": "0.0.0",
"description": "An bpmn-js modeler extended with a custom meta-model",
"main": "app/index.js",
"scripts": {
"all": "grunt",
"dev": "grunt auto-build"
},
"keywords": [
"bpmnjs-example"
],
"author": {
"name": "Nico Rehwaldt",
"url": "https://github.com/nikku"
},
"contributors": [
{
"name": "bpmn.io contributors",
"url": "https://github.com/bpmn-io"
}
],
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babelify": "^8.0.0",
"grunt": "^1.2.0",
"grunt-browserify": "^5.3.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-contrib-connect": "^2.1.0",
"grunt-contrib-copy": "^1.0.0",
"load-grunt-tasks": "^5.1.0",
"stringify": "^5.2.0"
},
"dependencies": {
"bpmn-js": "^7.2.0",
"diagram-js": "^6.6.1",
"jquery": "^3.5.1"
}
}
Update 2: It looks a bit better now, I corrected the CMD-Command in Dockerfile. Now the output tells me that 'grunt' was not found. Concrete:
Step 9/9 : CMD [ "npm", "run", "dev" ]
---> Running in f51692a86908
Removing intermediate container f51692a86908
---> 53e88bbb46c4
Successfully built 53e88bbb46c4
Successfully tagged overlayexample2_web:latest
Recreating overlayexample2_web_1
Attaching to overlayexample2_web_1
web_1 |
web_1 | > custom-meta-model#0.0.0 dev /usr/src/app
web_1 | > grunt auto-build
web_1 |
web_1 | sh: 1: grunt: not found
web_1 | npm ERR! code ELIFECYCLE
web_1 | npm ERR! syscall spawn
web_1 | npm ERR! file sh
web_1 | npm ERR! errno ENOENT
web_1 | npm ERR! custom-meta-model#0.0.0 dev: `grunt auto-build`
web_1 | npm ERR! spawn ENOENT
web_1 | npm ERR!
web_1 | npm ERR! Failed at the custom-meta-model#0.0.0 dev script.
web_1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
web_1 | npm WARN Local package.json exists, but node_modules missing, did you mean to install?
web_1 |
web_1 | npm ERR! A complete log of this run can be found in:
web_1 | npm ERR! /root/.npm/_logs/2020-08-21T17_03_50_937Z-debug.log
overlayexample2_web_1 exited with code 1
How can I fix it?
Maybe the Gruntfile.js has to be modified, currently it looks like this:
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-docker');
grunt.initConfig({
browserify: {
options: {
transform: [
[ 'stringify', {
extensions: [ '.bpmn' ]
} ],
[ 'babelify', {
global: true
} ]
]
},
watch: {
options: {
watch: true
},
files: {
'dist/index.js': [ 'app/**/*.js' ]
}
},
app: {
files: {
'dist/index.js': [ 'app/**/*.js' ]
}
}
},
copy: {
diagram_js: {
files: [ {
src: require.resolve('diagram-js/assets/diagram-js.css'),
dest: 'dist/css/diagram-js.css'
} ]
},
app: {
files: [
{
expand: true,
cwd: 'app',
src: ['**/*.*', '!**/*.js'],
dest: 'dist'
}
]
}
},
watch: {
options: {
livereload: false
},
samples: {
files: [ 'app/**/*.*' ],
tasks: [ 'copy:app' ]
},
},
connect: {
livereload: {
options: {
port: 8000,
livereload: true,
hostname: '*',
open: false,
base: [
'dist'
]
}
}
}
});
// tasks
grunt.registerTask('build', [ 'browserify:app', 'copy' ]);
grunt.registerTask('auto-build', [
'copy',
'browserify:watch',
'connect:livereload',
'watch'
]);
grunt.registerTask('default', [ 'build' ]);
};
You have to enable and start the Docker daemon in your system.
If you are on Linux, try it: sudo systemctl enable docker && sudo systemctl start docker
If systemctl is not recognized as a command, you should use: service docker start.
The systemctl start is required for the first run because enable will only auto-start the daemon after reboot. After enabling it, it will auto start on boot.
Your Docker service is not running, you need to start Docker Desktop manually.
Nothing wrong with Dockerfile and docker-compose.file.
Try to run with sudo:
sudo docker-compose up

Build error occurred ReferenceError: describe is not defined > During now.sh deployment

I'm using now.sh to deploy my nextjs (React) app. And the build is failing due to this error:
Build error occurred
ReferenceError: describe is not defined
Not sure why this started happening, here is my .babelrc
{
"env": {
"development": {
"compact": false,
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
},
"production": {
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
},
"test": {
"compact": false,
"presets": [
"#babel/preset-typescript",
["next/babel", {"preset-env": { "modules": "commonjs" }}]
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true }],
["#babel/plugin-proposal-decorators", { "legacy": true }],
["babel-plugin-sass-vars"]
]
}
}
}
package.json
"engines" : {
"node" : ">=8.10.0 <11.0.0"
},
"scripts": {
"dev": "NODE_ENV=development next -p 7777",
"build": "NODE_ENV=production next build",
"start": "next -p 7777",
"test": "NODE_ENV=test jest --no-cache",
"test-watch": "NODE_ENV=test jest --watch --no-cache",
"coverage": "NODE_ENV=test jest --coverage",
"update-snap": "NODE_ENV=test jest --updateSnapshot"
},
Full log:
running "npm run now-build"
> moon.holdings#2.0.0 now-build /tmp/7418164
> next build
Creating an optimized production build ...
> Using external babel configuration
> Location: "/tmp/7418164/.babelrc"
> Build error occurred
ReferenceError: describe is not defined
at Module.kAI8 (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:63996:1)
at __webpack_require__ (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:23:31)
at module.exports.+3sd.exports.__esModule (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:91:18)
at Object.<anonymous> (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:94:10)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
npm
ERR! code ELIFECYCLE
The first test where the describe is used:
import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import About from '../about.tsx'
describe('<About /> component', () => {
describe('rendering', () => {
const wrapper = shallow(<About />);
it('should render a component matching the snapshot', () => {
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
expect(wrapper).toHaveLength(1);
expect(wrapper.contains(<About/>));
});
});
});
next.config
module.exports = (phase, { defaultConfig }) => {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
}
]
}
// Note: Nextjs provides webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
return config
}
// ✅ Put the require call here.
const withTypescript = require('#zeit/next-typescript')
const withCSS = require('#zeit/next-sass')
// withCSS({target: 'serverless'})
return withTypescript(withCSS({
webpack(config, options) {
return config
}
}))
}
I removed the tests that covered the /pages directory. NextJS used pages for routing. Not sure why that was causing the problem, ran coverage and looks like pages wasn't necessary to cover.
Hoping for a better answer from someone at the NextJS / Now.sh team, and I'll select that.
Easy fix: https://github.com/zeit/next.js/issues/3728#issuecomment-523789071
pageExtensions: ['page.tsx']
An option that allows the tests inside pages folder:
change webpack settings direct in next.config.js
module.exports = {
webpack: (config, { webpack }) => {
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
return config
}
}
It is ignoring whatever __tests__ folder found on the build process.
If you are looking to colocate non-page files with pages in the /pages directory, you can use Custom Page Extensions to force your pages to have a file extension of .page.js. Once that is setup, Next.js will ignore any files that don't have .page in the file extension.
next.config.js
module.exports = {
// Force .page prefix on page files (ex. index.page.tsx) so generated files can be included in /pages directory without Next.js throwing build errors
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}
I wrote some docs for this use case that have yet to be merged https://github.com/vercel/next.js/pull/22740. The docs link above now contains these changes.
The original Github issue where this was discovered is https://github.com/vercel/next.js/issues/3728#issuecomment-895568757.

Vuejs2 error when running Module build failed: Error: No PostCSS Config found

Am running
npm run dev
Which in the package.json i have
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
},
So in my app.js am loading css via
require('vue-form-wizard/dist/vue-form-wizard.min.css');
And now am getting an error
error in ./node_modules/vue-form-wizard/dist/vue-form-wizard.min.css
Module build failed: Error: No PostCSS Config found
In my package.json i have installed loaders via
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
Further checking in webpack.dev.conf.js i can see
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
So what else do i need to add to have it run, so that i can use
require('vue-form-wizard/dist/vue-form-wizard.min.css');
or
import 'vue-form-wizard/dist/vue-form-wizard.min.css';
Am using the Vuejs2 webpack template
Try to add a postcss.config.js file in your root directory like below.
module.exports = {
plugins: [
require('autoprefixer')({browsers: ['last 10 versions']})
],
};

Setting Seed Project with Latest: Angular, Node/Express, Webpack, Typescript

I've been going over tutorials by Maximilian on Udemy and I've hit a road block. I'm trying to setup a new project from scratch that's a node/express and angular 4 app. The problem, I think, is my script(s) in my package.json. I'm doing them exactly as the course suggests (course updated to Angular4 final); I'm trying to load the latest of all modules though.
My setup commands:
run express generator to generate shell and package.json
then
npm install #angular/common#next #angular/compiler#next #angular/compiler-cli#next #angular/core#next #angular/forms#next #angular/http#next #angular/platform-browser#next #angular/platform-browser-dynamic#next#angular/platform-server#next #angular/router#next #angular/animations#next --save
npm install --save zone.js rxjs core-js
npm install --save-dev #types/node #types/core-js
npm install --save-dev webpack webpack-merge angular2-template-loader awesome-typescript-loader del-cli html-loader typescript angular2-router-loader raw-loader
Here's my code:
package.json
{
"name": "movie-list",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
"build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'"
},
"dependencies": {
"#angular/animations": "^4.2.0-rc.1",
"#angular/common": "^4.2.0-rc.1",
"#angular/compiler": "^4.2.0-rc.1",
"#angular/compiler-cli": "^4.2.0-rc.1",
"#angular/core": "^4.2.0-rc.1",
"#angular/forms": "^4.2.0-rc.1",
"#angular/http": "^4.2.0-rc.1",
"#angular/platform-browser": "^4.2.0-rc.1",
"#angular/platform-browser-dynamic": "^4.2.0-rc.1",
"#angular/platform-server": "^4.2.0-rc.1",
"#angular/router": "^4.2.0-rc.1",
"body-parser": "~1.15.2",
"cookie-parser": "~1.4.3",
"core-js": "^2.4.1",
"debug": "~2.2.0",
"express": "~4.14.0",
"hbs": "~3.1.0",
"morgan": "~1.6.1",
"node-sass-middleware": "^0.11.0",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.4.0",
"serve-favicon": "~2.3.0",
"zone.js": "^0.8.11"
},
"devDependencies": {
"#types/core-js": "^0.9.41",
"#types/node": "^7.0.22",
"angular2-router-loader": "^0.3.5",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.1.3",
"del-cli": "^1.0.0",
"html-loader": "^0.4.5",
"raw-loader": "^0.5.1",
"typescript": "^2.3.3",
"webpack": "^2.6.1",
"webpack-merge": "^4.1.0"
}
}
tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"./node_modules/#types"
],"lib": [
"es6",
"dom"
]
}
}
tsconfig.aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./public/js/app"
},
"typeRoots": [
"./node_modules/#types"
],
"lib": [
"es6",
"dom"
],
"angularCompilerOptions": {
"skipMetadataEmit": true
}
}
webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');
module.exports = webpackMerge.smart(commonConfig, {
entry: {
'app': './assets/app/main.aot.ts'
},
output: {
path: path.resolve(__dirname + '/public/js/app'),
filename: 'bundle.js',
publicPath: '/js/app/',
chunkFilename: '[id].[hash].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
'awesome-typescript-loader',
'angular2-template-loader',
'angular-router-loader?aot=true'
]
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: false
})
]
});
webpack.config.common.js
var webpack = require('webpack');
module.exports = {
entry: {
'app': './assets/app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
},
{
test: /\.css$/,
use: [{ loader: 'raw-loader' }]
}
],
exprContextCritical: false
}
};
When I run npm run build:prod I get the following error:
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2075:38: Property 'keyFor' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2079:37: Property 'match' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2083:39: Property 'replace' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2087:38: Property 'search' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2091:39: Property 'species' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2095:37: Property 'split' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2099:43: Property 'toPrimitive' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2103:43: Property 'toStringTag' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2107:43: Property 'unscopables' does not exist on type 'SymbolConstructor'.
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:prod"
npm ERR! node v7.9.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! movie-list#1.0.0 build:prod: `del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail
&& del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app
/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the movie-list#1.0.0 build:prod script 'del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progr
ess --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.
shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts''.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the movie-list package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app
/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'ass
ets/app/**/*.ngstyle.ts'
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs movie-list
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls movie-list
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Kenny\AppData\Roaming\npm-cache\_logs\2017-05-28T17_02_43_104Z-debug.log
I have scowered the web in search of practical means of putting together the latest Angular and Node/Express using webpack along with typescript. I've tried changing core-js to an earlier release. I cannot find much information on putting it all together.
My goal is to be able to be able to use npm run build for development (which works strangely, I'll post webpack.config.dev.js below) and use npm run build:prod for production (cleaning up files, generating my bundle.js).
webpack.config.dev.js
var path = require('path');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: path.resolve(__dirname + '/public/js/app'),
publicPath: '/js/app/',
filename: 'bundle.js',
publicPath: '/js/app/',
chunkFilename: '[id].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{loader: 'awesome-typescript-loader', options: {
transpileOnly: true
}},
{loader: 'angular2-template-loader'},
{loader: 'angular2-router-loader'}
]
}
]
}
});
Change:
"target": "es5"
to:
"target": "es6"
in both files

Categories