Related
I am setting up my ReactApp and just finished with it. So I wanted to make a settings class in a appsettings.ts file. So I can change some global variables easier.
But then all my issues started.
I know this problem is very common and there are tons of answers available but none of them have worked for me so far. I have searched through the internet to solve it but it still shows the same error.
This is the error I am getting:
ERROR in ../../../appsettings.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: [APP_DIR]\appsettings.ts: Unexpected token (2:11)
1 | export class APPSETTINGS {
> 2 | public static EMAIL_SENDER: string = "name#example.com";
| ^
3 | public static EMAIL_RECIPIENT: string = "name#example.com";
4 | public static YEAR: number = (new Date()).getFullYear();
5 | }
at instantiate ([APP_DIR]\node_modules\#babel\parser\lib\index.js:67:32)
at constructor ([APP_DIR]\node_modules\#babel\parser\lib\index.js:364:12)
at Parser.raise ([APP_DIR]\node_modules\#babel\parser\lib\index.js:3364:19)
at Parser.unexpected ([APP_DIR]\node_modules\#babel\parser\lib\index.js:3397:16)
at Parser.parseClassMemberWithIsStatic ([APP_DIR]\node_modules\#babel\parser\lib\index.js:13888:12)
at Parser.parseClassMember ([APP_DIR]\node_modules\#babel\parser\lib\index.js:13773:10)
at [APP_DIR]\node_modules\#babel\parser\lib\index.js:13715:14
at Parser.withSmartMixTopicForbiddingContext ([APP_DIR]\node_modules\#babel\parser\lib\index.js:12617:14)
at Parser.parseClassBody ([APP_DIR]\node_modules\#babel\parser\lib\index.js:13694:10)
at Parser.parseClass ([APP_DIR]\node_modules\#babel\parser\lib\index.js:13669:22)
at Parser.parseExportDeclaration ([APP_DIR]\node_modules\#babel\parser\lib\index.js:14178:25)
at Parser.maybeParseExportDeclaration ([APP_DIR]\node_modules\#babel\parser\lib\index.js:14135:31)
at Parser.parseExport ([APP_DIR]\node_modules\#babel\parser\lib\index.js:14058:29)
at Parser.parseStatementContent ([APP_DIR]\node_modules\#babel\parser\lib\index.js:13020:27)
at Parser.parseStatement ([APP_DIR]\node_modules\#babel\parser\lib\index.js:12917:17)
at Parser.parseBlockOrModuleBlockBody ([APP_DIR]\node_modules\#babel\parser\lib\index.js:13497:25)
at Parser.parseBlockBody ([APP_DIR]\node_modules\#babel\parser\lib\index.js:13489:10)
at Parser.parseProgram ([APP_DIR]\node_modules\#babel\parser\lib\index.js:12832:10)
at Parser.parseTopLevel ([APP_DIR]\node_modules\#babel\parser\lib\index.js:12822:25)
at Parser.parse ([APP_DIR]\node_modules\#babel\parser\lib\index.js:14674:10)
at parse ([APP_DIR]\node_modules\#babel\parser\lib\index.js:14716:38)
at parser ([APP_DIR]\node_modules\#babel\core\lib\parser\index.js:41:34)
at parser.next (<anonymous>)
at normalizeFile ([APP_DIR]\node_modules\#babel\core\lib\transformation\normalize-file.js:66:38)
at normalizeFile.next (<anonymous>)
at run ([APP_DIR]\node_modules\#babel\core\lib\transformation\index.js:21:50)
at run.next (<anonymous>)
at transform ([APP_DIR]\node_modules\#babel\core\lib\transform.js:22:41)
at transform.next (<anonymous>)
at step ([APP_DIR]\node_modules\gensync\index.js:261:32)
at [APP_DIR]\node_modules\gensync\index.js:273:13
at async.call.result.err.err ([APP_DIR]\node_modules\gensync\index.js:223:11)
# ./src/Page/Main/index.tsx 24:0-60 204:60-76 298:42-58
# ./src/App.tsx 5:0-31 14:38-42
# ./src/index.tsx 3:0-24 4:50-53
webpack 5.75.0 compiled with 1 error in 4752 ms
I got this error after I imported APPSETTINGS into my react app. If I delete the usage, then everything compiles fine, but with it, it just gives me this error
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const dotenv = require('dotenv');
const CopyPlugin = require('copy-webpack-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv.development === true;
const isEnvProduction = webpackEnv.production === true;
return {
target: 'web',
watch: isEnvDevelopment,
mode: isEnvProduction ? 'production' : 'development',
entry: "./src/index.tsx",
output: {
path: path.join(__dirname, 'dist'),
publicPath: "/",
filename: isEnvProduction ? '[id].[hash].js' : '[name].bundle.js',
chunkFilename: isEnvProduction ? '[id].[hash].[chunkhash].chunk.js' : '[name].chunk.js',
},
devtool: isEnvDevelopment ? "source-map" : false,
devServer: {
compress: true,
port: 9000,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
https: true
},
historyApiFallback: true
},
resolve: {
mainFields: ['browser', 'main', 'module'],
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
// we use babel-loader to load our jsx and tsx files
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
"#babel/preset-env"
]
}
},
},
{
test: /\.(css|scss)$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentName: isEnvProduction ? '[sha512:contenthash:base64]' : '[sha1:contenthash:hex:5]_____[local]'
},
importLoaders: 2,
sourceMap: isEnvDevelopment,
}
},
{
loader: "resolve-url-loader",
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.(eot|otf|webp|ttf|woff|woff2|jpe?g|png|gif|svg)$/,
type: 'asset/resource'
},
{
test: /\.(pdf)(\?.*)?$/,
use: [
{
loader: "file-loader",
options: {
outputPath: "binary",
publicPath: "/binary"
}
},
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: isEnvProduction ? '[id].[hash].css' : '[name].bundle.css',
}),
new HtmlWebpackPlugin(),
new CopyPlugin({
patterns: [
{ from: 'src/static', to: '.' },
],
}),
new Dotenv({
path: isEnvProduction ? path.join(__dirname, "./.env.automated") : path.join(__dirname, "./.env")
}),
]
}
};
package.json
{
"name": "react-webapp",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"scripts": {
"dev": "webpack serve --env development",
"build": "webpack --env production"
},
"author": "",
"license": "ISC",
"dependencies": {
"#aws-amplify/api": "^4.0.18",
"#aws-amplify/api-graphql": "^2.2.7",
"#aws-amplify/auth": "^4.3.8",
"#aws-amplify/cache": "^4.0.20",
"#aws-amplify/core": "^4.3.0",
"aws-amplify": "^4.3.0",
"classnames": "^2.3.1",
"detect-browser": "^5.2.1",
"dotenv-webpack": "^7.0.3",
"graphql-tag": "^2.12.5",
"ibantools": "^4.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-loading": "^2.0.3",
"react-router-dom": "^5.3.0",
"regenerator-runtime": "^0.13.9"
},
"devDependencies": {
"#babel/core": "^7.20.2",
"#babel/plugin-proposal-class-properties": "^7.14.5",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.14.5",
"#babel/preset-typescript": "^7.15.0",
"#types/react": "^17.0.26",
"#types/react-dom": "^17.0.9",
"babel-loader": "^8.3.0",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.3.0",
"dotenv": "^10.0.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.3.0",
"node-sass": "^6.0.1",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.1.0",
"typescript": "^4.4.3",
"typescript-plugin-css-modules": "^3.4.0",
"webpack": "^5.75.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0"
}
}
You've installed #babel/preset-typescript but it's not added to the loader presets.
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
"#babel/preset-typescript"
"#babel/preset-env",
]
}
},
},
You may need to tweak the settings.
I am trying to use webpack to deploy .jsx code to .js code and I do use top-level await in my code.
My webpack.config.js:
const path = require('path')
const glob = require('glob');
const entries = glob.sync('./src/*.jsx').reduce(
function (entries, entry) {
let matchForRename = /^\.\/src(\/([\w]+))?\/([\S]+)\.jsx?$/g.exec(entry);
console.log(matchForRename)
if (matchForRename !== null && typeof matchForRename[3] !== 'undefined') {
entries[matchForRename[3]] = entry;
}
return entries;
},
{}
);
console.log(entries)
module.exports = {
mode: 'production',
entry: entries,
output: {
path: path.resolve(__dirname, `public/__js`),
filename: '[name].js',
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
include: path.resolve(__dirname, `src`),
use: {
loader: 'babel-loader',
options: {
presets: ["#babel/preset-react", "#babel/preset-env"],
plugins: ["#babel/plugin-syntax-top-level-await"]
}
}
},
{
test: /\.css$/,
include: path.resolve(__dirname, `src`),
use: {
loader: 'css-loader',
}
}]
},
resolve: {
modules: [__dirname + '/node_modules'],
extensions: ['.jsx', '.js'],
},
experiments: {
futureDefaults: true,
topLevelAwait: true
},
optimization: {
mergeDuplicateChunks: true,
}
}
My .babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-syntax-top-level-await"],
"comments": false,
"compact": true
}
My package.json:
{
"dependencies": {
"#babel/plugin-syntax-top-level-await": "^7.14.5",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"axios": "^0.27.2",
"babel-loader": "^8.2.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^6.7.1",
"glob": "^8.0.3",
"path": "^0.12.7",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2"
}
}
With this setup, I am getting the following error on every transpiled file:
ERROR in ./src/file_name.jsx
Module parse failed: Top-level-await is only supported in EcmaScript Modules
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
Error: Top-level-await is only supported in EcmaScript Modules
at /home/clauz/snake/site/dash/frontend/node_modules/webpack/lib/dependencies/HarmonyDetectionParserPlugin.js:59:11
at Hook.eval [as call] (eval at create (/home/clauz/snake/site/dash/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
at JavascriptParser.walkAwaitExpression (/home/clauz/snake/site/dash/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2320:29)
at JavascriptParser.walkExpression (/home/clauz/snake/site/dash/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2250:10)
at JavascriptParser.walkMemberExpression (/home/clauz/snake/site/dash/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2826:8)
at JavascriptParser.walkExpression (/home/clauz/snake/site/dash/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2283:10)
at JavascriptParser.walkVariableDeclaration (/home/clauz/snake/site/dash/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2104:33)
at JavascriptParser.walkStatement (/home/clauz/snake/site/dash/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:1598:10)
at JavascriptParser.walkStatements (/home/clauz/snake/site/dash/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:1459:9)
at JavascriptParser.parse (/home/clauz/snake/site/dash/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:3353:9)
but I have the plugin installed and the experiment active, what am I doing wrong?
I'm trying to build my Vue app on Node 13 and Webpack 4. For this I'm using this webpack.config.js
const { VueLoaderPlugin } = require("vue-loader");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
mode: 'development',
entry: {
main: "./src/main.js",
},
output: {
filename: "[name].[contenthash:12].js",
path: path.resolve(__dirname, "dist"),
chunkFilename: "[name].[contenthash:12].js",
},
module: {
rules: [
{
test : /\.(jsx?)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.(eot|ttf|woff|woff2|txt)(\?\S*)?$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
},
},
{
test: /\.(png|jpe?g|gif|webm|mp4|svg|ico)$/,
loader: "file-loader",
options: {
name: "[name][contenthash:8].[ext]",
outputPath: "assets/img",
esModule: false,
},
},
{
test: /\.(css)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
],
},
{
test: /\.(s(c|a)ss)$/,
use: [
"vue-style-loader",
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true,
importLoaders: 2,
postcssOptions: {
plugins: () => [autoprefixer()],
},
},
},
"sass-loader",
{
loader: "sass-loader",
options: {
sourceMap: true,
implementation: require("sass"),
sassOptions: {
//fiber: require("fibers"),
prependData: `#import "app/javascript/manager/styles/main.scss"`,
//indentedSyntax: true
}
}
},
],
},
],
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[contenthash:8].css",
chunkFilename: "[name].[contenthash:8].css",
}),
new htmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
favicon: path.resolve(__dirname, "public", "favicon.ico"),
}),
],
resolve: {
alias: {
vue$: "vue/dist/vue.runtime.esm.js",
},
extensions: ["*", ".js", ".jsx", ".css", ".scss", ".vue"],
modules: [
"node_modules",
]
},
optimization: {
moduleIds: "hashed",
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
priority: -10,
chunks: "all",
},
},
},
},
devServer: {
historyApiFallback: true,
},
}
And this is my package.json
{
"name": "my-app-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/compiler-sfc": "^3.1.4",
"axios": "^0.21.1",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"core-js": "^3.6.5",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue": "^2.6.11",
"vue-axios": "^3.2.4",
"vue-router": "^3.5.2",
"vuetify": "^2.5.6",
"webpack-war-plugin": "^1.0.0-beta.3"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.2.0",
"sass": "1.32.13",
"sass-loader": "10.1.1",
"style-loader": "^2.0.0",
"vue-cli-plugin-vuetify": "~2.4.1",
"vue-loader": "^16.3.0",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.5.6",
"vuetify-loader": "^1.7.0",
"webpack": "^4.42.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
After struggling with the sass-loader I reduced the list of errors, but this one is significant and I haven't found a way to remove it:
ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ref--5-3!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
╷
1 │ #charset "UTF-8";
│ ^
╵
No sass-node, just sass was used. Uncommenting indentedSyntax: true will simply drop another error saying that semicolons are not allowed. Upgrading versions will return other set of error. Fibers is out of scope (it just improves processing of certain async calls to my knowledge). Upgrading to Webpack5 adds a pletora of new problems as the json structure is quite different.
I'm totally stack at this point. There must be something else to work on the sass loader nut I'm not an expert on webpack so it's taking simply too long. Any help would be greatly appreciated at this point. I cannot believe none is having the same issue. I see many related answers but everyone seem to be doing fine just adding indentation. Thanks!
I'm currently using webpack 4 with babel 7 which was just released not long ago. Whenever I'm trying to run the latest webpack with babel on my project, I'm getting the following error currently with the plugin #babel/plugin-transform-runtime:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match
the API schema.
- configuration.plugins[0] should be one of these:
object { apply, … } | function
-> Plugin of type object or instanceof Function
Details:
* configuration.plugins[0] should be an object.
-> Plugin instance
* configuration.plugins[0] should be an instance of function
-> Function acting as plugin
- configuration.plugins[1] should be one of these:
object { apply, … } | function
-> Plugin of type object or instanceof Function
Details:
* configuration.plugins[1] misses the property 'apply'.
function
-> The run point of the plugin, required method.
* configuration.plugins[1] misses the property 'apply'.
function
-> The run point of the plugin, required method.
* configuration.plugins[1] should be an instance of function
-> Function acting as plugin
According to the documentation in https://babeljs.io/docs/en/babel-plugin-transform-runtime/, this should be working with the following example configuration for a .babelrc as an example (modifying this in my webpack.config.js to just turn corejs to true)
{
"plugins": [
["#babel/plugin-transform-runtime", {
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}]
]
}
webpack.config.js
var webpack = require('webpack');
var fiber = require('fibers');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: [
'#babel/polyfill',
'./src/jsx/app'
],
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
mode: 'development',
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx'],
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'main',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
{
'useBuiltIns': 'entry',
'modules': 'false'
},
'#babel/preset-env',
'#babel/preset-react'
],
plugins: [
require('#babel/plugin-syntax-dynamic-import'),
require('#babel/plugin-proposal-object-rest-spread')
]
}
}
},
{
test: /\.(scss|css)$/,
exclude: /node_modules/,
use: [
{
loader: this.mode === 'development' ? MiniCssExtractPlugin.loader : 'style-loader',
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'resolve-url-loader',
options: {
sourceMap: true,
keepQuery: true,
debug: this.mode === 'development'
}
}, {
loader: 'sass-loader',
options: {
outFile: 'src/style.css',
implementation: require('dart-sass'),
fiber: fiber,
sourceMap: true,
sourceComments: true,
sourceMapContents: true,
outputStyle: 'compressed',
includePaths: [
'node_modules/#fortawesome/fontawesome-pro/scss',
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src',
'node_modules/react-dates',
'node_modules/slick-carousel/slick',
'src/scss'
]
}
}
]
}
]
},
plugins: [
'#babel/plugin-transform-runtime', {
'corejs': true
},
new MiniCssExtractPlugin({
filename: this.mode === 'development' ? '[name].css' : '[name].[hash].css',
chunkFilename: this.mode === 'development' ? '[id].css' : '[id].[hash].css',
}),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
}
};
dependencies from package.json
"devDependencies": {
"#babel/core": "7.0.0",
"#babel/plugin-proposal-object-rest-spread": "7.0.0",
"#babel/plugin-syntax-dynamic-import": "7.0.0",
"#babel/plugin-transform-runtime": "7.0.0",
"#babel/preset-env": "7.0.0",
"#babel/preset-react": "7.0.0",
"#babel/register": "7.0.0",
"babel-loader": "8.0.2",
"dart-sass": "1.13.1",
"electron": "2.0.8",
"electron-packager": "12.1.1",
"eslint": "5.4.0",
"eslint-plugin-react": "7.11.1",
"mini-css-extract-plugin": "0.4.2",
"react-hot-loader": "4.3.5",
"resolve-url-loader": "2.3.0",
"upath": "1.1.0",
"webpack": "4.17.2",
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.7"
},
"dependencies": {
"#babel/polyfill": "7.0.0",
"#babel/runtime-corejs2": "7.0.0",
"#fortawesome/fontawesome-pro": "latest",
"chalk": "2.4.1",
"cheerio": "1.0.0-rc.2",
"colors": "1.3.2",
"fibers": "3.0.0",
"foundation-sites": "6.5.0-rc.2",
"jquery": "3.3.1",
"moment": "2.22.2",
"motion-ui": "2.0.3",
"react": "16.4.2",
"react-dates": "17.2.0",
"react-dom": "16.4.2",
"react-slick": "0.23.1",
"slick-carousel": "1.8.1",
"schema-utils": "1.0.0",
"what-input": "5.1.1"
}
Found the answer to those who are new to babel and webpack configuration such as me making this mistake:
webpack.config.js does NOT replace .babelrc and will need to be moved over for babel plugins such as the ones below in my .babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
["#babel/plugin-transform-runtime", {
"corejs": 2
}]
]
}
I'm using babel-core ^5.4.7 and babel-loader ^5.1.2 with webpack. I'm also using mobx ^3.3.1 and mobx-react ^4.3.3 version. Now my problem is when I'm trying to build my project by hitting npm run watch:webpack it throws unknown option: package.json.presets
here my package.json
"devDependencies": {
"babel-core": "^5.4.7",
"babel-eslint": "^3.1.9",
"babel-loader": "^5.1.2",
"babel-plugin-react-transform": "^1.1.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
....
"webpack": "^1.9.6",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"
},
"dependencies": {
"mobx": "^3.3.1",
"mobx-react": "^4.3.3",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-dnd-html5-backend": "^2.5.4",
"react-dom": "16.0.0",
....
},
"babel": {
"presets": ["es2015", "react", "stage-1"],
"plugins": ["transform-decorators-legacy"]
}
and here my webpack.config.dev.js
var path = require('path');
var webpack = require('webpack');
var src = path.join(__dirname, 'engine');
var dest = path.join(__dirname, 'assets/builder');
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
src + '/index.jsx'
],
output: {
path: dest,
filename: 'bundle.js',
publicPath: '/assets/builder/'
},
resolve: {
extensions: ['', '.json', '.js', '.jsx'],
modulesDirectories: ['node_modules', 'bower_components', src]
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env': {
'FREE': process.argv.indexOf('--free') !== -1 ? JSON.stringify("free"): JSON.stringify("pro")
}
}),
],
module: {
loaders: [
{test: /\.jsx?$/, loaders: ['babel?stage=0'], include: src},
{test: /\.js?$/, loaders: ['babel?stage=0'], include: src},
{test: /\.less$/, loader: 'style!css!less'},
{test: /\.css$/, loader: 'style!css'},
{test: /\.jpe?g$|\.gif$|\.png$/, loader: "url-loader"},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff"},
{test: /\.ttf?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=font/ttf"},
{test: /\.(eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"}
]
}
};
Here my mobx store with decorator #observable
export default class ElementStore {
#observable path = null,
#observable visible = false,
#observable list = sortElementsByName(elements),
handle(handlerName, {path}) {
switch (handlerName) {
case HIDE_ELEMENTS:
// do something..
break;
case SHOW_ELEMENTS:
// do something..
break;
}
}
}
And the error message is
ERROR in ./engine/index.jsx
Module build failed: ReferenceError: [BABEL] /Users/iftekhersunny/Documents/code/quix/src/lib_quix/engine/index.jsx: Unknown option: /Users/iftekhersunny/Documents/code/quix/src/lib_quix/package.json.presets
Why the presets is the unknown option???
presets is a config flag for Babel 6.x, and you're trying to use it with Babel 5. Babel 5 is super old, just use Babel 6.
Firstly remove babel option from package.json file and create a .babelrc file in root of the project.
.babelrc file
{
"presets": ["es2015", "react","stage-1"],
"plugins": [
"transform-decorators-legacy"
]
}
hope it works