I'm building out a react/TS app and am running into this compiler error. I'm sure it's a config issue, but alas, I can't figure out which config. I'm not sure if it has to do with the generic specifically, or if I will see the "unexpected token" error show up in other circumstances as well.
ERROR in ./src/App.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../src/App.tsx: Unexpected token (15:4)
13 | const [coordinates, setCoordinates] = useState<
14 | CoordinatesQueryType | undefined
> 15 | >();
| ^
16 |
Webpack config follows. FWIW I added "react" to module.rule.options, but then i got another error that said I was missing "babel-preset-react", installed that, then another error, and then didn't wanna go down the rabbit hole.
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.tsx",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
port: 4000,
hot: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
And babel.rc:
{
"presets": ["#babel/env", "#babel/preset-react", "#babel/preset-flow"],
"plugins": ["#babel/plugin-transform-runtime"]
}
Is there any setup for typescript?
I think you are missing this in babel presets:
#babel/preset-typescript
And also I can't see any ts-loader in your webpack config. So you would not get typechecking even though you compile typescript. To fix this:
Change current rule for babel to match only js files
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
Install necessary tools:
yarn add -D #babel/preset-typescript ts-loader
Add #babel/preset-typescript to babel.rc presets.
Add ts-loader to webpack.config.js module rules.
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
// Typescript loader
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: ["ts-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
I think this should be able to fix the problem.
Also, you are having both options\presets and .babelrc, try to use only one of these for configuration.
Related
So, I need to prefix my react components classNames so it doesn't conflict with global classes.
And no, I can't use CSS modules because of how my yarn workspaces are built
So, if I have a button class I would like it to become my_app-button
<button className="button">Hello StackOverflow</button>
to
<button className="my-app_button">Hello StackOverflow</button>
PostCSS does that for me in the CSS part, but on the React Side I wasn't able to find a solution
All of my components use typescript
I've tried using a webpack loader to do the job, and it did! But only on my Storybook server, when I used it with my separate webpack config it didn't work
The only error that is given to me is invariant 85
This is my Webpack Config, alongside the webpack loader and the babel-loader
import { Configuration, ProgressPlugin } from 'webpack'
const config: Configuration = {
mode: 'production',
entry: './src/index.ts',
target: 'node',
output: {
filename: '[name].js',
path: __dirname + '/dist',
publicPath: '',
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react', '#babel/preset-env', 'minify'],
},
},
],
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-react',
'#babel/preset-env',
'#babel/preset-typescript',
'minify',
],
},
},
],
},
{
test: /\.tsx$/,
exclude: /node_modules/,
use: [
{
loader: 'react-classname-prefix-loader?prefix=giffy_css',
},
],
},
{
test: /\.(png|jpe?g|gif)$/,
exclude: /node_modules/,
use: [{ loader: 'file-loader' }],
},
],
},
plugins: [new ProgressPlugin()],
}
export default config
and just in case you need it, this is my Storybook webpack configuration
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.tsx$/,
exclude: /node_modules/,
use: [
{
loader: 'react-classname-prefix-loader?prefix=giffy_css',
},
],
})
// console.log(config.module.rules[0].use[0].options.overrides[0])
return config
}
i have also tried first compiling my components with babel and then using webpack
i tried searching for an equivalent webpack loader in babel, but could not find it
I am working on webpack in react, when i run this command npx webpack --config webpack.config.js , i am getting below error
ERROR in ./node_modules/react-toastify/dist/ReactToastify.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
here i have attached my webpack.config.js , can anyone please help me why i am getting this error ?
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', {
"targets": "defaults"
}],
'#babel/preset-react'
]
}
}]
}
]
}
}
You'll need to install style-loader and css-loader:
npm install --save-dev style-loader css-loader
Then add the loaders to your webpack config. For example:
webpack.config.js
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', {
"targets": "defaults"
}],
'#babel/preset-react'
]
}
}]
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
]
}
}
Try adding
"babel": { "presets": ["#babel/preset-env"] }
To the end of your package.json file - after devDependencies (you may need to add #babel/preset-env via Yarn as well.)
In my react.js app I am trying to use an external module (React Toastify)
using the following statement:
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
Unfortunately this throws the following error:
Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .Toastify__toast-container {
| z-index: 9999;
I guess it has something to do with webpack, here are my settings in webpack.config.js:
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'assets'),
},
devtool: production ? '' : 'source-map',
resolve: {
extensions: [".js", ".jsx", ".json"],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
};
I am not sure how this can be fixed, any advice appreciated.
In your webpack config file you have add the css loader test:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
And don't forget to install it with npm i -D css-loader.
More info here: https://github.com/webpack-contrib/css-loader
I used the below-mentioned command:
npm install --save-dev babel-preset-stage-0
Now I added it in webpack.config.js file as shown below:
module.exports = {
entry: './app/app.jsx',
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
root: __dirname,
alias: {
},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
}
};
But Now when I run webpack command it shows some error. Please check error:
Error image:
If you are not using a .babelrc file, add babelrc: false like so:
module: {
loaders: [
{
loader: 'babel-loader',
babelrc: false, // <--- Add this
query: {
presets: ['react', 'es2015', 'stage-0']
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
}
I recommend using the create-react-app CLI if you don't want to deal with the headache of setting up a development environment boilerplate. I just started using it and it is great!
Migrating from a working Webpack v1 config to Webpack 2. But running into an error while trying to run the build:
ERROR in ./src/index.jsx
Module build failed: TypeError: /home/pierce/Projects/my-js-app/src/index.jsx: Cannot create property 'mappings' on string
I have updated my loaders to match the new format:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(jpg|png)$/,
loader: 'file-loader',
query: {
name: '[path][name].[hash].[ext]',
},
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
{
test: /\.(woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?/,
loader: 'url-loader',
query: {
limit: 100000
}
},
{
test: /\.icon-svg$/,
use: [{loader:'babel-loader'}, {loader: 'svg-react-loader'}]
},
// Bootstrap 3
{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports-loader?jQuery=jquery'
}
]
},
It's as if something is not being compiled the way it was before, therefore causing a TypeError.
Turns out I was babelifing twice.
If you're also splitting your webpack.config.js into separate files for your different environments, be sure that webpack.dev.config.js does not include a babel-loader entry if your webpack.base.config.js does.
Otherwise, if you use the loader twice the 2nd time around will cause an error. This wasn't a Webpack 2 error but a webpack splitting-configs-and-missing-a-small-thing error
Encountered a similar issue in my compilation. Found out that I was using babel loader for .js and .jsx both.
Removed .jsx and its working as expected.
A snippet of my webpack.config.js looks like this.
{
test: /\.js$/,
exclude: [/(node_modules)/],
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
plugins: [
'transform-class-properties',
'transform-decorators-legacy'
]
}
}
]
}
In case someone else is having the same issue, I had to remove the following from loader for it to work
{
test: /\.jsx?$/,
use: ['react-hot-loader/webpack']
}
In my case it helped when I removed devtool: 'inline-source-map' from webpack