Here's my code:
// #flow
import { EntityModel } from '#http-utils/hateoas';
I compile it:
babel src/ -d dist/
Then I run it, but I get a runtime error:
$ node dist/http-utils-hateoas-example.js
import { EntityModel } from '#http-utils/hateoas';
^
SyntaxError: Unexpected token {
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
What am I doing wrong?
Edit
Based on Flow documentation, my babel config has only #babel/preset-flow. Looks like this is only stripping flow. How do I configure babel to do additional compilation down to code that can be run on nodejs?
{
"presets": [
"#babel/preset-flow"
]
}
The solution was very simple. All I needed was another preset to transpile down to CommonJS.
{
"presets": [
"#babel/preset-flow",
#babel/preset-env
]
}
Related
I'm using Laravel 8 PHP framework, I need to compile JS and CSS files on localhost using node. When I'm trying to run npm run dev the error output is:
$ npm run dev
> dev
> npm run development
> development
> mix
[webpack-cli] AssertionError [ERR_ASSERTION]: mix.combine() requires a full output file path as the second argument. Got C:\xampp\htdocs\project\public\css
at Function.combine (C:\xampp\htdocs\project\node_modules\laravel-mix\src\Assert.js:54:9)
at Combine.addTask (C:\xampp\htdocs\project\node_modules\laravel-mix\src\components\Combine.js:49:16)
at Combine.register (C:\xampp\htdocs\project\node_modules\laravel-mix\src\components\Combine.js:29:14)
at Object.components.<computed> [as styles] (C:\xampp\htdocs\project\node_modules\laravel-mix\src\components\ComponentRegistrar.js:163:49)
at Object.<anonymous> (C:\xampp\htdocs\project\webpack.mix.js:17:5)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}
How I can see, the problem is in the mix file, can the wrong syntax be a problem ?
Here is the code
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.js('resources/assets/js/bootstrap.js', 'public/js')
.js('resources/assets/js/core.min.js', 'public/js')
.js('resources/assets/js/script.js', 'public/js')
.js('resources/assets/js/slider.js', 'public/js')
.js('resources/assets/js/html5shiv.min.js', 'public/js')
.js('resources/assets/js/jquery-3.6.0.min.js', 'public/js')
.js('resources/assets/js/pointer-events.js', 'public/js');
mix.styles([
'resources/assets/css/bootstrap.css',
'resources/assets/css/bootstrap-grid.css',
'resources/assets/css/bootstrap-utilities.css'
],'public/css');
mix.styles([
'resources/assets/css/app.css',
'resources/assets/css/util.css'
], 'public/css');
For this I'm using Laravel 7 Docs because I didn't find anything in Laravel 8 Docs
I'm not using sass or scss, because the source project has ~30000 css lines each file, an I have no idea how I can convert it.
Here is the package.json file
{
"dependencies": {
"bootstrap-icons": "^1.7.2",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.39"
},
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
}
}
You will have to pass a file as second argument instead of a folder. So:
mix.styles([
'resources/assets/css/bootstrap.css',
'resources/assets/css/bootstrap-grid.css',
'resources/assets/css/bootstrap-utilities.css'
],'public/css/bootstrap.css');
mix.styles([
'resources/assets/css/app.css',
'resources/assets/css/util.css'
], 'public/css/app.css');
I'm trying to include Tailwind CSS within my WordPress setup, which means I have to use post CSS. However when I add the postcss-loader to this rule:
{
test: /\.(sass|scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']
},
I am returned the following error:
[./src/sass/style.scss] 1.37 KiB {frontend} [built] [failed] [1 error]
ERROR in ./src/sass/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...m\\[focus-within": expected selector, was "]\\:sr-only[focus-wi"
on line 35881 of /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/src/sass/style.scss
>> .sm\[focus-within]\:sr-only[focus-within] {
--^
at /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/webpack/lib/NormalModule.js:316:20
at /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.callback (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/sass-loader/dist/index.js:73:7)
at Object.done [as callback] (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/neo-async/async.js:8069:18)
at options.error (/Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/node-sass/lib/index.js:294:32)
# multi ./src/index.js ./src/sass/style.scss frontend[1]
Child mini-css-extract-plugin ../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/css-loader/dist/cjs.js!../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/sass-loader/dist/cjs.js!../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/node_modules/postcss-loader/src/index.js!../../../../../../../Local Sites/episteme/app/public/wp-content/themes/_s/src/sass/style.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./src/sass/style.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src!./src/sass/style.scss 368 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
ERROR in ./src/sass/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/src!./src/sass/style.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...m\\[focus-within": expected selector, was "]\\:sr-only[focus-wi"
on line 35881 of /Users/user/Local Sites/episteme/app/public/wp-content/themes/_s/src/sass/style.scss
>> .sm\[focus-within]\:sr-only[focus-within] {
--^
I've tried many different approaches and none of them seem to be working. Not sure if I'm misunderstanding something as most of the material I've found is geared towards React setups.
Managed to resolve the issue by changing the order of the loaders to the following:
{
test: /\.(sass|scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-sass-loader', 'sass-loader']
},
I started learning webpack. I am aware that webpack4 doesnt require a configuration explicitly. I created one for my project. On every build i see it picking up default config.
below is my package.json
{
"name": "feedback-clientlibs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "hkesani",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.5.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
and my webpack.config.js is as follows
var path = require('path');
module.export ={
entry : './js/feedback.js',
mode:'none',
output : {
filename:'feedback.js',
path:path.resolve(__dirname,'webpack.modules')
},
module:{
rules:[
{
test:/\.css$/,
use:['css-loader']
}
]
}
}
I have few css imports into the js files as below
import '../css/feedback.css'
import '../css/all.css'
whenever i run a build (i have cssloader installed) below is what i see
$ npm run build
> feedback-clientlibs#1.0.0 build C:\projects\br_translation\jcr\code\jcr_root\apps\r\dcloud\components\clientlibs\feedback-clientlibs
> webpack
Hash: 7c51d9af54f992c3e551
Version: webpack 4.43.0
Time: 106ms
Built at: 05/10/2020 10:39:42 PM
1 asset
Entrypoint main = main.js
[0] ./src/index.js 6.17 KiB {0} [built]
[1] ./css/feedback.css 302 bytes {0} [built] [failed] [1 error]
[2] ./css/all.css 292 bytes {0} [built] [failed] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in ./css/feedback.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #feedback {
| height: 5em;
| padding: 10px 22px 8px 22px;
# ./src/index.js 1:0-28
ERROR in ./css/all.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .ratings-stars {
| margin-bottom: 15px;
| height: 13px;
# ./src/index.js 2:0-23
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! feedback-clientlibs#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the feedback-clientlibs#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\hkesani\AppData\Roaming\npm-cache\_logs\2020-05-10T17_09_42_363Z-debug.log
Any help is appreciated.
Thanks
Have you tried it with style-loader?
npm install --save-dev style-loader
And update your webpack.config.js rules to:
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
I also notice you did not supply a production flag for your webpack command I would update that script to run:
webpack --mode production -p
Then in your output path try a directory name without the period. This may or may not be the reason but it is normally a naming convention to use a dash or underscore for directory names.
path: path.resolve(__dirname,'webpack_modules')
I think it's defined [here]enter link description here.
It can also be inspected via node:
const webpack = require('webpack')
new webpack.WebpackOptionsDefaulter()
I'm trying import the element ui chalk theme with
import 'element-ui/lib/theme-chalk/index.css'
But I get this in the console:
Error: Module parse failed: Unexpected character '
Am I missing something?
After following this guide I managed to fix this
Basically had to install sass-loader with
npm install sass-loader node-sass style-loader --save-dev
and then add the loader to my webpack.config.js, but I had to do it like this, due to my version:
module: {
rules: [
{ test: /\.s[a|c]ss$/, loader: 'style!css!sass' },
]
}
I tried to use Match.ObjectIncluding in angular2-meteor1.3.1 project.
Based on this file meteor.d.ts, I can successful use
import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
However, when I tried to use
import { Match } from 'meteor/match';
I got error:
/Users/hongbo-miao/.meteor/packages/meteor-tool/.1.3.1.z9fvfj++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:267
throw(ex);
^
Error: Can't find npm module 'meteor/match'. Did you forget to call 'Npm.depends' in package.js within the 'modules-runtime' package?
at Object.Npm.require (/test/.meteor/local/build/programs/server/boot.js:195:17)
at options.fallback (packages/modules-runtime.js:413:18)
at require (packages/modules-runtime.js:98:16)
at meteorInstall.collections.methods.ts (collections/methods.ts:2:1)
at fileEvaluate (packages/modules-runtime.js:158:9)
at require (packages/modules-runtime.js:92:16)
at /test/.meteor/local/build/programs/server/app/app.js:905:1
at /test/.meteor/local/build/programs/server/boot.js:283:10
at Array.forEach (native)
at Function._.each._.forEach (/Users/hongbo-miao/.meteor/packages/meteor-tool/.1.3.1.z9fvfj++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
How can I import Match correctly? Thanks
So it turns out the typings file is wrong. The new typings file is here, which uses
'meteor/check'