I've created a component that was working perfectly, until I published it to npm and installed into my App. I cannot figure out what the problem is, the error is:
../node_modules/heatmap-calendar-react/heatMapGraph.js
Module parse failed: Unexpected token (249:23)
You may need an appropriate loader to handle this file type.
| var _onClick = this.props.onClick || function doNothing() {};
|
| return <div
| key={i}
| onMouseOver={(e) => this.selectGroup(e, day)}
This is the repository https://github.com/willfretwell/heatmap-calendar-react.
To install npm i heatmap-calendar-react.
Any help is very much appreciated.
Its definitely an issue in your Webpack configuration this is a basic Webpack configuration file for React
module.exports = {
entry: [
'./src/index.js'
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
Its also very important that you include a .babelrc file in the root of your project so that it knows to transform your react code. Your .babelrc file can look something like this
{
"presets": [
"env",
"react",
"stage-2"
]
}
Lastly make sure you install all the dependencies required
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-preset-react
Hope this helps!
It might be the issue with webpack file. Please provide appropriate loader in webpack.config.js file for all the files that you have included in the component.
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=src/images/[name].[ext]"
}
]
Related
I just started learning next.js and I wanted to add some documentation using https://react-styleguidist.js.org/
I created my project using npx create-next-app
After installing it, and adding some configuration
[styleguide.config.js]
const path = require('path')
module.exports = {
components: './**/*.js',
webpackConfig: {
entry: 'next/lib/app.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['#babel/react' ],
plugins: ['#babel/plugin-proposal-class-properties']
}
}
},
{
test: /\.scss$/,
loader: 'sass-loader'
}
]
}
}
};
I'm getting the following error when trying to run it using the following command:
npx styleguidist server
./node_modules/react-styleguidist/lib/client/index.js (./node_modules/react-styleguidist/lib/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/client/index.js)
Error: ENOENT: no such file or directory, scandir '${projectPath}\node_modules\ally.md\amd'
at Array.map (<anonymous>)
at Array.map (<anonymous>)
# ./node_modules/react-styleguidist/lib/client/index.js 36:19-71 46:2-49:4 46:65-49:3
# multi ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js
(Note that I have replaced the project path for "${projectPath}")
And I'm at a loss on how to fix it.
For further details, you can find my package.json here https://pastebin.com/H7RfxxKZ.
My folder structure shown in below image:
All my components are under src/components, some include component.module.css files
My context components are under src/context
All my global scss can be found under "styles/"
Any guidance on why this can happen and how to solve it would be appreciated, my knowledge on how the configuration files work is limited, and any reference to any related article would be appreciated.
Thanks for your help. have a nice rest of the day and stay safe.
After doing some further testing, I found out that my main problem was the "components: './**/*.js'" and the fact that I was missing some alias for my components! I will post here what worked for me.
module.exports = {
components: "./src/**/*.js",
skipComponentsWithoutExample: true, //You don't need this one
moduleAliases: { //Map it to your folder structure
'components': path.resolve(__dirname, 'src','components'),
'_db': path.resolve(__dirname, 'src','_db'),
'context': path.resolve(__dirname, 'src','context'),
'styles': path.resolve(__dirname, 'src','styles'),
},
webpackConfig: {
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{ //This code prevents errors with font-awesome
test: /\.(ttf|eot|svg|gif|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'file-loader',
}]
},
],
},
},
};
I am working on a project that integrates react, redux, and firebase. react-redux-firebase seems to be a convenient tool. However, the code is not being complied successfully. Below is the error, webpack.config.js, .babelrc, and index.js. Thanks for help in advance.
Error message:
ERROR in ./~/react-redux-firebase/src/connect.js
Module parse failed:
/Users/xiqianglin/ucsdflyers/node_modules/react-redux-firebase/src/connect.js
Unexpected token (43:24) You may need an appropriate loader to handle this file type.
| }
|
| static contextTypes = {
| store: PropTypes.object.isRequired
| };
# ./~/react-redux-firebase/src/index.js 1:0-31 # ./src/index.js # multi ./src/index.js
/****And there are other similar errors, all "...appropriate loader..." ***/
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./src/index.js'
],
module: {
loaders: [
{test: /\.js$/,
exclude: /node_modules/,
loader:'babel-loader'}
]
},
resolve: {
extensions: [".js", ".jsx", ".es6"]
},
output: {
filename: "index_bundle.js",
path: __dirname + '/dist'
},
plugins: [HTMLWebpackPluginConfig]
};
.babelrc
{
"presets": ["react", "es2015"]
}
index.js
/*Other Imports...*/
import { firebaseStateReducer } from 'react-redux-firebase'; //This is the line causing error
ReactDOM.render(
<Provider>
<App/>
</Provider>,
documeng.getElementById('app')
)
Duble check that you npm install-ed all your dependencies.
Then if that doesn't work, try this:
npm install babel-preset-es2015
and add the a query for es2015 after your exclude
{
test: /\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
query: {
presets: ['es2015']
}
}
If you need to include a specific node module, try including your source directory and that specific node module folder to be parsed by babel-loader.
So instead of the exclude: /node_modules/, try
include: [
path.resolve(__dirname, "src"),
path.resolve(__dirname, "node_modules/react-redux-firebase")
]
If I add .jsx to require('./StringOption') it works but I thought the resolve section of my webpack.config.js is supposed to allow me to require with no extension. What am I doing wrong?
Also why do I need ./ infront when it resides in the same directory as index.jsx?
Error message after running webpack:
ERROR in ./src/index.jsx
Module not found: Error: Cannot resolve module 'StringOption' in /Users/Mike/packages/chrome-extension-options/src
# ./src/index.jsx 5:19-42
index.js:
'use strict'
var React = require('react')
var ReactDOM = require('react-dom')
var StringOption = require('./StringOption');
ReactDOM.render(<StringOption id="test" name="Test" />, document.getElementById('content'))
webpack.config.js file:
var path = require("path");
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve(__dirname, "dist"),
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'jsx-loader',
exclude: /node_modules/
}
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
resolve: {
extensions: ['', '*.js', '*.jsx']
}
};
Directory structure:
- src/
- index.jsx
- StringOption.jsx
- dist/
- index.js
- react.js
- react-dom.js
First of all ./StringOption says that it should search in the same directory. Unlike other places we need to specify from where we need to import a file in react jsx.
Secondly,
In resolve you need not use resolve explicitly, just use babel-loader or else use resolve as
resolve: {
extensions: ['', '.js', '.jsx']
}
or
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
include the following in your webpack.config.js so that you need not to worry about js and jsx extension.
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
// include: __dirname + '/src',
include: path.join(__dirname, '/src'),
loader: 'babel-loader',
query: {
presets: ['react','es2015']
}
}]
EDIT: Link to github repo where this example is hosted is here in case someone wants to run it
I'm getting the near exact same problem as another user (you can find the question here), in that running the webpack-dev-server does actually compile and watch files correctly (seeing the console output in the terminal), but the browser still can't view my site correctly. This is my webpack.config.js file:
var webpack = require('webpack'),
path = require('path'),
// webpack plugins
CopyWebpackPlugin = require('copy-webpack-plugin');
var config = {
context: path.join(__dirname,'app'),
entry: './index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: path.join(__dirname, 'public')
},
devServer: {
// contentBase: './public/'
},
plugins: [
// copies html to public directory
new CopyWebpackPlugin([
{ from: path.join(__dirname, 'app', 'index.html'),
to: path.join(__dirname, 'public')}
]),
// required bugfix for current webpack version
new webpack.OldWatchingPlugin()
],
module: {
loaders: [
// uses babel-loader which allows usage of ECMAScript 6 (requires installing babel-preset-es2015)
{test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015']}},
// uses the css-loader (loads css content) and style-loader (inserts css from css-loader into html)
{test: /\.css$/, loader: 'style!css', exclude: /node_modules/}
]
}
};
module.exports = config;
And this is my directory structure:
+--- webpack/
+--- app/
+--- index.html
+--- index.js
+--- styles.css
+--- package.json
+--- webpack.config.js
Currently, running webpack-dev-server outputs the following in the browser (note the lack of the public/ directory which is where webpack normally outputs my html and javascript bundle):
EDIT: Adding the devServer.contentBase property and setting it to public gets the browser to return a 403 error not found as shown here:
Okay, so I was able to reproduce the issue that you have on my project. To fix the issue I changed some things.
Here is what I have set up. I'm defining a bit less in the output and using jsx instead of js, but the results should be the same. You can replace my src with wherever your source code is.
const config = {
entry: './src/App.jsx',
output: {
filename: 'app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['add-module-exports']
}
},
{
include: /\.json$/, loaders: ['json-loader']
},
{
test: /\.scss$/,
loaders: ['style', 'css?modules', 'sass']
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=fonts/[name].[ext]'
}
]
},
plugins: [
new webpack.ProvidePlugin({
'Promise': 'exports?module.exports.Promise!es6-promise',
'fetch': 'imports?self=>global!exports?global.fetch!isomorphic-fetch'
}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],
resolve: {
root: path.resolve('./src')
},
devServer: {
contentBase: 'src'
}
};
So basically you would want this output in terminal:
webpack result is served from / - tells us that whatever we build from will be at the root
content is served from src - tells us that it's building from that directory
Hope this helps
I have this webpack.config.js:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
};
...yet I still get this error:
$ webpack -v
Hash: 2a9a40224beb025cb433
Version: webpack 1.10.5
Time: 44ms
[0] ./src/admin/client/index.jsx 0 bytes [built] [failed]
ERROR in ./src/admin/client/index.jsx
Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import AdminInterface from './components/AdminInterface';
I have:
Installed webpack globally and locally
Installed babel-loader, babel-core, and babel-runtime
Installed babel-loader globally, just in case
Why the hell is webpack seemingly ignoring babel-loader? Or does babel-loader not work with modules?
Update:
It looks like babel handles the input file just fine. When I run:
./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx
...it outputs ES5 as expected. Therefore, it seems to me like somehow webpack isn't properly loading babel-loader.
This looks like a case of operator error. My webpack.config.js structure was not correct. Specifically, I needed to put the loader details inside of a module section:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};
I fixed the same problem by including the es2015 and react presets and then adding them to the webpack.config.js file.
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
as explained in this post: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
my full webpack.config.js file:
module.exports = {
context: __dirname + "/src",
entry: './main',
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
}
],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
What is the version of your babel?If babel version is up to 6+.You need to identify the preset 'es2015' and 'react' like this
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
}
Don't forget to install these modules:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev