In our project, I'm trying to refactor all our components to have a .jsxfile extension rather than .js. My webpack.config.babel file now looks like this:
import fs from "fs"
const babelrc = JSON.parse(fs.readFileSync("./.babelrc"))
export default {
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.jsx$/,
loader: "babel-loader",
query: babelrc,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.json$/,
loader: "json-loader",
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
],
},
}
However when I try to run import Main from './components/Main/Main';
in my client.js file, it shows me
Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js'
# multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js
I'm new to babel and webpack. What other places to I need to register the jsx file extension?
Take a look at the documentation for resolve.extensions:
https://webpack.js.org/configuration/resolve/#resolveextensions
You can add the following to your Webpack config to also automatically resolve files with the .jsx extension by adding the following to your config:
resolve: {
extensions: ['.js', '.jsx']
}
Btw, you can also optimize your loader config by removing the separate .jsx loader and make the first loader test for /\.jsx?$/
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.
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
WOFF files are failing to load and I am not getting an idea to why file-loader is failing to load WOFF, WOFF2 and SVG.
Here is my Webpack 4 loaders config:
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
exclude: /node_modules/,
loader: "file-loader"
},
{
test: /\.(eot|ttf)$/,
loader: "file-loader",
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
Please suggest a solution to me.
You can user webpack url-loader for that and it will resolve your problem.If you are using npm you can install npm install url-loader --save-dev and in your webpack.config.js you can write module settings like this
{test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,loader: 'url-loader?limit=100000'}
and import images like import img from './image.svg'
Github : https://github.com/webpack-contrib/url-loader
NPM : https://www.npmjs.com/package/url-loader
{
test: /\.woff(2)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './font/[hash].[ext]',
mimetype: 'application/font-woff'
}
}
]
}
It worked for me. And also you can use resolve-url-loader
https://www.npmjs.com/package/resolve-url-loader
Right now I'm trying to create the above compiler using npm and gulp. But I keep getting stuck.
I only need it to compile jsx and stylus files to run on a localhost server.
In your webpack config, Add loader for jsx and stylus like below code.
For JSX & Stylus:
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.styl$/,
loader: 'css-loader!stylus-relative-loader?paths=node_modules/bootstrap-stylus/stylus/'
}
]
},
I've read lots of other S/O posts that detail a similar problem, however I cannot find a solution for my specific issue.
I installed a node module, but I am now receiving this error message:
(syllable - is the module I installed)
index.js:641 ./~/syllable/problematic.json
Module parse failed: /Desktop/App/node_modules/syllable/problematic.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
Here is my Webpack config
var config = {
entry: './main.js',
output: {
path: './',
filename: 'index.js',
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
},
{ //<-- this line is throwing an unexpected token error
test: /\.json$/,
loader: 'json'
}
}
]
}
}
module.exports = config;
Note: I have es2015 installed, and I have tried re-writing the webpack.config.js several times to no avail.
What am I doing incorrectly?
It is trying to load a .json file. You currently do not have a json-loader setup to handle this sort of thing. Have a look at json-loader.
Example
npm install --save-dev json-loader
webpack.config.js
...
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.json$/,
loader: 'json'
}
}
]
...
What is error and message
index.js:641 ./~/syllable/problematic.json Module parse failed:
/Desktop/App/node_modules/syllable/problematic.json Unexpected token
(2:11) You may need an appropriate loader to handle this file typ
And answer
You should really read it, It clearly says that Module parse failed. It gave you file name and told you that You may need an appropriate loader to handle this file typ
json-loader what you need
install json-loader with npm and add it to your config.
{
test: /\.json$/,
loader: 'json'
}
Currently your regular expression does not match any file extension. If you're trying to test both .js and .jsx file remove the last $ and replace it with ? and remove the |.
module:{
loaders: [
{
test: /\.jsx?/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
I'm trying to compile my React app with support for ES7 decorators as I'm using the autobind-decorator but webpack says there is an "Unexpected token" with the router, which is the entry file for the app. I've tried various versions of babel related npms, using the the "state-0" and "transform-runtime" and they all result in the same error. Anyone's help would be very much appreciated :)
main.js
webpack.config
package.json
The reason for this error is incorrect loader config inside your webpack.config.js file. You need to supply the presets under the query field in the loader config:
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
query: {
presets: ['es2015', 'react', 'stage-1']
}
}
]
According to the README of babel-loader, your should use query field in your config, like so:
module: {
loaders: [
{
test: /\.jsx?$/,
include: // ....
loader: 'babel',
query: {
presets: [/*presets list*/],
plugins: [/*plugins list*/]
}
}
]
}