I'm trying to have my scss run through prettier but always get errors. I'm using the prettier-webpack-loader (also tried with prettier-webpack-plugin). When I run it, it seems to want to process the .scss files as javascript. One of my js files looks like this:
require("./header.component.scss");
angular
.module("app")
...
Header file looks like this:
header{
...
}
I have the following loader for webpack:
...{
"test": /\.scss$/,
"use": ExtractTextPlugin.extract({
"use": ["css-loader", "sass-loader"]
})
}, {
"test": /\.(js|scss)$/,
"include": path.resolve(__dirname, "website/src"),
"loader": "prettier-webpack-loader",
"options": {
"useTabs": true
}
}
...
When I run it I get the following error:
ERROR in ./website/src/components/header.component.scss
Module build failed: ModuleBuildError: Module build failed: SyntaxError: Unexpected token, expected ; (1:7)
> 1 | header{
| ^
2 | nav.bg-primary{
3 | padding:0.7rem 1rem;
4 | z-index: 10000;
at createError$1 (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\parser-babylon.js:1:112)
at parse (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\parser-babylon.js:1:783)
at Object.parse (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\index.js:3785:12)
at formatWithCursor (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\index.js:21730:22)
at format (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\index.js:21770:10)
at Object.format (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\index.js:21995:12)
at Object.module.exports (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier-webpack-loader\index.js:11:35)
at runLoaders (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\webpack\lib\NormalModule.js:195:19)
at C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at runSyncOrAsync (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
at iterateNormalLoaders (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
at C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:202:4
at C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:70:14
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
If I run prettier through the CLI it works fine.
It looks like prettier-webpack-loader does not pass the file path to Prettier, so there's no way for it to know it should parse as a SCSS file.
I think if you separate the loaders and add the parser to the options it might work:
{
"test": /\.js$/,
"include": path.resolve(__dirname, "website/src"),
"loader": "prettier-webpack-loader",
"options": {
"useTabs": true
}
},
{
"test": /\.scss$/,
"include": path.resolve(__dirname, "website/src"),
"loader": "prettier-webpack-loader",
"options": {
"parser": "postcss",
"useTabs": true
}
}
Related
I'm trying to build with webpack
npm run build
But I get the following error
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.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
#charset "UTF-8";/*!
| * Bootstrap v5.0.2 (https://getbootstrap.com/)
| * Copyright 2011-2021 The Bootstrap Authors
My webpack config looks like this
const path = require("path");
module.exports = {
mode: "production",
entry: "./paginate.js",
output: {
path: path.resolve("./"),
filename: "index.js",
libraryTarget: "commonjs2",
},
module: {
rules: [
{
test: /\.js|jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
}
],
},
externals: {
react: "react",
},
};
.babelrc file looks like
{
"presets": ["#babel/preset-env", ["#babel/preset-react", {
"runtime": "automatic"
}]]
}
I've searched but can't seem to find the right loader for this.
I'm not sure, just a guess, most likely bootstrap is trying to import CSS or scss and you don't have a loader for it defined.
Try adding:
{
test: /\.s?[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: [/node_modules/],
},
To your webpack rules and also install those modules with --save-dev.
Side node, this regular exression test: /\.js|jsx?$/, is incorrect, just use test: /\.jsx?$/,. The "?" means the x is optional.
When am trying to debug Rect Jest enzyme test cases in terminal, am getting the following error and am stuck because of that.
I created the app using create-react-app and following is my configuration:
.babelrc
{
"env": {
"test": {
"sourceMaps": "inline",
"presets": ["es2015", "react-app"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
}
}
Jest config from package.json
"jest": {
"testMatch": [
"**/src/**/?(*.)(spec|test).js?(x)"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"moduleFileExetnsions": [
"ts",
"txx",
"js",
"json"
],
"transform": {
"^.+\\.jsx$": "babel-jest",
"^.+\\.js$": "babel-jest"
}
}
Test case:
import { shallow } from 'enzyme';
import App from './App';
describe('App', () => {
it('should render app', () => {
const component = shallow(<App />);
expect(component).toMatchSnapshot();
});
});
Getting the following error:
Test suite failed to run
ReferenceError: [BABEL] .../src/containers/App.spec.js: Unknown option: /node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/node_modules/babel-preset-react-app/index.js")
at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
at Array.map (<anonymous>)
at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
Edit:
Above error gone after changing "test" --> "dev" in .babelrc, but getting the another error:
"Jest encountered an unexpected token" at shallow(< App debug / >);
Try to use this .babel config:
{
"presets": ["es2015", "react-app"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
It should help you.
I used create-react-app to create a react application.
After I run eject, I am unable to use the spread operator as follows:
//eslint-disable-next-line
const { children, ...attributes } = this.props; //Line 19
It keeps giving me this error when I run yarn start
Line 19: Parsing error: Unexpected token ..
Webpack Dev Server
I have tried adding all the presets and the transform plugin to both webpack dev server config and .babelrc but no luck
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
presets:['react','es2015','env',"stage-2"],
plugins: ["transform-object-rest-spread"],
// 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,
},
},
// "postcss" loader app
And in the babel rc file as well
//.babelrc
{
"presets":["env","react","stage-2"],
"plugins": [
["transform-object-rest-spread", { "useBuiltIns": true }]
]
}
It works fine if I don't eject the script.
So the problem turned out to be eslint.
Webpack config was loading it before babel
Adding parser options fixed it.
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
"extends": "airbnb",
"parserOptions":{
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
Updated the #babel with this:
npm install #babel/runtime#latest did the work
I'm trying to make a single js bundle file using babel & webpack, and I'm constantly getting these parse errors, as if appropriate babel transforms are not working at all. I'm using 'react-native' preset for babel, which includes following plugins:
'babel-plugin-react-transform'
'babel-plugin-syntax-async-functions'
'babel-plugin-syntax-class-properties'
'babel-plugin-syntax-trailing-function-commas'
'babel-plugin-transform-class-properties'
'babel-plugin-transform-es2015-arrow-functions'
'babel-plugin-transform-es2015-block-scoping'
'babel-plugin-transform-es2015-classes'
'babel-plugin-transform-es2015-computed-properties'
'babel-plugin-transform-es2015-constants'
'babel-plugin-transform-es2015-destructuring'
'babel-plugin-transform-es2015-modules-commonjs'
'babel-plugin-transform-es2015-parameters'
'babel-plugin-transform-es2015-shorthand-properties'
'babel-plugin-transform-es2015-spread'
'babel-plugin-transform-es2015-template-literals'
'babel-plugin-transform-flow-strip-types'
'babel-plugin-transform-object-assign'
'babel-plugin-transform-object-rest-spread'
'babel-plugin-transform-react-display-name'
'babel-plugin-transform-react-jsx'
'babel-plugin-transform-regenerator'
'babel-plugin-transform-es2015-for-of'
So this plugin 'babel-plugin-syntax-class-properties' should do the transform I'm looking for but for some reason it's not working. Even when I add this plugin manually to .babelrc file I get the same output. This is the error I'm getting:
ERROR in ./~/#exponent/react-native-navigator/ExNavigator.js
Module parse failed: /Users/Arbor/Desktop/ArborMobileApp/backend/node_modules/#exponent/react-native-navigator/ExNavigator.js Unexpected token (24:16)
You may need an appropriate loader to handle this file type.
|
| export default class ExNavigator extends React.Component {
| static Styles = ExNavigatorStyles;
| static SceneConfigs = ExSceneConfigs;
| static Icons = ExNavigatorIcons;
# ./logic/initialize.js 14:175-218
Here is my .babelrc file:
{
"presets": ["react-native"],
}
My webpack.config.js:
const webpack = require('webpack');
module.exports = {
entry: './entryPoint.js',
output: {
path: './release',
filename: 'basecomponents.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
}
};
And package.json:
{
"name": "react-native-base-components",
"private": true,
"version": "0.0.1",
"description": "",
"main": "entryPoint",
"dependencies": {
"#exponent/react-native-navigator": "^0.4.2",
"react-native-orientation": "^1.15.0"
},
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"webpack": "^2.0.7-beta"
},
"scripts": {
"build": "rm -f dist/basecomponents.js && clear && node_modules/.bin/webpack --progress"
}
}
What am I doing wrong? Thanks.
Hello I am stuck with my application, my application working fine in all other browser not in IE it's throw the error
0x800a0416 - JavaScript runtime error: Multiple definitions of a property not allowed in strict mode
I have implemented loader in webpack.config
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loaders: ['babel'],
include: path.join(__dirname, 'scripts')
}]
}
and my Package.json Script contain "build": "./node_modules/.bin/webpack --config webpack.config.production.js --progress --profile --colors", for build the bundle
If I will explicitly find use strict and remove it from bundle then it works fine so how can I remove that strict mode while create a bundle using webpack
If you're seeing that error then most likely you've got somewhere in your codebase where you're declaring multiple properties on the same object. Disabling the alarm bell just fixes the symptom.
I've found this error to pop up if I declare duplicate properties in my JSX, e.g. when doing <MyComponent className="foo" onClick={onClick} className="foobar" /> or accidentally duplicating some other property.
Find and fix the actual error instead of just suppressing the error message. IE should tell you what line it's happening on and it shouldn't be too hard to look at what's there and figure out which component has the problem.
Check out this package: https://www.npmjs.com/package/babel-plugin-transform-remove-strict-mode
I was looking for a convenient way to get rid of the 'use strict' and it seems to be doing just that.
I have include the blacklist option in my .babelrc file like
blacklist: ["useStrict"]
and it's working fine.
You have few ways around this, bottom line setting modules to false either in .babelrc or your webpack since you use webpack
webpack.mix.js
module : {
loaders : [
{
test: /\.js?/,
include: APP_DIR,
use: {
loader: 'babel-loader',
options: {
"presets": [
['es2015', {modules: false}]
],
}
},
exclude: /node_modules/
},
]
},
or .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"debug": true,
"modules": false,
"forceAllTransforms": true,
"useBuiltIns": "usage"
}
]
]
}