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
Related
Trying to setup a react-app with all latest versions.
Github Repo Link
Trying to run storybook with sass file imported will result in below error. Trying to run without importing the styles, storybook works.
The same code works correctly when its run as npm start run with no warnings and errors.
I have configured css modules using #dr.pogodin/babel-plugin-react-css-modules with sass, webpack 5, react 17 and with latest packages.
ERROR in ./src/assets/stylesheets/app.scss 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
> #import "./base.scss";
| #import "./generics/font.scss";
| #import "./generics/spacing.scss";
# ./stories/index.js 5:0-44 8:2-10:4 8:58-10:3 9:4-49
# ./src/components/atoms/button/stories.js
babel.config.js
module.exports = {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: [
[
"#dr.pogodin/babel-plugin-react-css-modules",
{
webpackHotModuleReloading: true,
autoResolveMultipleImports: true,
filetypes: {
".scss": {
syntax: "postcss-scss",
},
},
generateScopedName: "[name]__[local]___[hash:base64:5]",
},
],
],
};
webpack.config.js for css (partial code inlcuded)
{
test: /\.(css|sass|scss)$/,
exclude: /node_modules/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: {
auto: (resourcePath) =>
resourcePath.indexOf("assets/stylesheets") === -1,
localIdentName:"[name]__[local]___[hash:base64:5]",
},
sourceMap: true,
},
},
"sass-loader",
],
}
storybook/webpack.config.js file
const custom = require('../webpack.config.js');
module.exports = {
// stories: ['../src/components/**/*.stories.js'],
webpackFinal: (config) => {
return {
...config,
module: {
rules: custom.module.rules,
},
resolve: {
...config.resolve,
...custom.resolve,
}
};
},
};
I don't know what you have done with your configuration but you would define the config things inside .storybook/main.js. And for global style css is supposed to be included in preview.js file.
In short, you have to do the few things:
Remove your .storybook/config.js and add .storybook/main.js with following content:
const custom = require('../webpack.config.js');
module.exports = {
stories: [
'../src/**/stories.js', // The name should have a prefix for component name like `button.stories.js` instead of `stories.js` like you've done. As you renamed, you can remove this pattern
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
webpackFinal: (config) => {
return {
...config,
module: {
rules: custom.module.rules,
},
resolve: {
...config.resolve,
...custom.resolve,
}
};
},
};
Create the .storybook/preview.js to import your global style:
import "../src/assets/stylesheets/app.scss";
Some people have been running into problems a some scss preset when using Storybook 6.2.0 with Webpack 5. Instead of using a preset, I recommend configuring the Webpack config in main.js as mentioned above. Here's the relevant portion of a working Storybook Webpack config for Sass:
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: function () {
return [require('precss'), require('autoprefixer')];
},
},
},
},
{
loader: require.resolve('sass-loader'),
options: {
implementation: require('sass'),
},
},
],
},
],
},
I've written more about getting Storybook off the ground with Webpack 5 (and modifying the Storybook Webpack config) over here.
Another reason this might happen: if you are adding new components to your app and the path defined for your sass-loader does not match anymore.
E.g. if you have this in your .storybook/main.js:
webpackFinal: async config => {
// Add SASS support
// https://storybook.js.org/docs/configurations/custom-webpack-config/#examples
config.module.rules.push({
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
compileType: "icss",
},
},
},
"sass-loader",
],
include: path.resolve(__dirname, "../"),
})
Update or completely remove the include path.
I really like the separation of className and styleName that babel-plugin-react-css-modules offers for global and local styles respectively, but have had some trouble getting the plugin to work with create-react-app.
I've tried installing the plugin by running
npm install babel-plugin-react-css-modules --save
... as it says to do in the project (github https://github.com/gajus/babel-plugin-react-css-modules#css-modules) ...
... and have also used craco as suggested in a similar thread (#5113) to help overcome the limitations of create-react-app without the need to eject, but am still unable to import a scss file and reference to it using styleName.
Does anyone know if I'm missing something else here? Sorry if it's a noob question, I'm new to React and have been looking for a solution to this for a while now.
1. add the plugin to .babelrc first.
"plugins": [
["babel-plugin-react-css-modules",
{
"webpackHotModuleReloading": true,
"autoResolveMultipleImports": true
}],....
]
2. add css rule in webpack.config.js.
below is my configuration that you can reference from.
make sure that
2.1 option modules set to true.
2.2 localIdentName follow this format. localIdentName: "[path]___[name]__[local]___[hash:base64:5]"
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: "babel-loader",
options: { cacheDirectory: true }
}
]
},
{
test: /\.css$/i,
use: [
{
loader: ExtractCssChunks.loader,
options: { hot: true }
},
{
loader: "css-loader", //generating unique classname
options: {
importLoaders: 1, // if specifying more loaders
modules: true,
sourceMap: false,
localIdentName: "[path]___[name]__[local]___[hash:base64:5]" //babel-plugin-css-module format
//localIdentName: "[path][name]__[local]" //recommended settings by cssloader#local-scope , this option generate unique classname for compiled css
}
}
]
},
In my react project, webpack.config.js brings in proposal-class properties like so:
...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
query: {
presets: ['#babel/react', '#babel/preset-env'],
plugins: ['#babel/proposal-class-properties']
}
},
}
...
By including #babel/proposal-class-properties I'm able to remove the constructors from my React components, etc.
However, the documentation shows plugin-proposal-class-properties in .babelrc as follows (and doesn't mention webpack.config.js at all):
{
"plugins": ["#babel/plugin-proposal-class-properties"]
}
whereas my .babelrc does not include any plugins at all:
{
"presets": [
["#babel/env", {
"modules": false
},
"#babel/preset-env"]
]
}
Is there any effective difference between including the plugins (such as proposal-class-properties) in webpack.config.js as compared to putting them in .babelrc?
You can configure babel through .babelrc or through the babel-loader configuration in webpack. They both work exactly the same.
However, I recommend only using .babelrc for configuring babel.
That way it can also work when you run your tests, which usually don't go through webpack and will therefore not have the webpack configuration for babel.
.babelrc:
{
"presets": ["#babel/preset-env"]
"plugins": ['#babel/plugin-proposal-class-properties', {'loose': true}]
}
Each of my models has its own static property, but with current configurations they are undefined.
Here is my .babelrc
{
"presets": ["#babel/preset-react","#babel/typescript","#babel/env"],
"plugins": ["#babel/plugin-proposal-class-properties", "#babel/transform-runtime","#babel/plugin-transform-classes"]
}
Webpack conf
{
test: /\.(js|jsx|mjs|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
compact: true,
},
},
P.S this is ejected configuration from create-react-app
I am attempting to use foundation in the react-static site I am creating. Everything is working great while using npm start to start a local node server with live reloading, however I am not able to successfully build my site with npm run build.
The error that I keep encountering is:
/Users/abroccoli/Documents/apm.net/apm-react-static/node_modules/foundation-sites/dist/js/npm.js:1
(function (exports, require, module, __filename, __dirname) { import $ from 'jquery';
^^^^^^
SyntaxError: Unexpected token import
Through my research into webpack and react-static and node.js, I believe that node is having an issue with the ES6 syntax of the foundation-sites file. However, react-static is written in ES6 and uses import at the beginning of every file.
I am using the basic webpack configuration that comes with react-static and should include the proper loaders for parsing ES6 with Babel, according to the README.
webpack: (config, { defaultLoaders, stage }) => {
config.module.rules = [
{
oneOf: [
{
test: /\.s(a|c)ss$/,
use:
stage === 'dev'
? [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
minimize: true,
sourceMap: false,
},
},
{
loader: 'sass-loader',
options: { includePaths: ['src/'] },
},
],
}),
},
defaultLoaders.cssLoader,
defaultLoaders.jsLoader,
defaultLoaders.fileLoader,
],
},
]
return config
},
I suspect that I am not loading foundation-sites in properly. How can I get foundation-sites to work when I go to build my react-static site?
Update node to be able to use the new ES6 standard.