Develop Reference

Getting "Uncaught TypeError: path.parse is not a function" in Webpack project

I am trying to setup a React project using Webpack. It's a simple app that loads an mdx file and parses it. When I try to run the app it returns 'Uncaught TypeError: path.parse is not a function'
I have tried importing parse from 'path' and importing parse from 'path-browserify' but it's still not working
index.js:
import React, { lazy, Component, Suspense } from "react";
import { importMDX } from "mdx.macro";
import ReactDOM from "react-dom";
// import path from "path";
// import { parse } from "path";
import path from "path-browserify";
// import { parse } from "path-browserify";
const Content = lazy(() => importMDX("./index.mdx"));
class App extends Component {
render() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<Content />
</Suspense>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.mdx?$/,
use: ["babel-loader", "#mdx-js/loader"]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
})
],
node: {
fs: "empty",
module: "empty"
}
};
package.json:
{
"name": "doc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"#mdx-js/loader": "^1.4.0",
"babel-loader": "^8.0.6",
"fs": "0.0.1-security",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"path": "^0.12.7",
"path-browserify": "^1.0.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
},
"dependencies": {
"#mdx-js/react": "^1.4.0",
"mdx.macro": "^0.2.8",
"react": "^16.9.0",
"react-dom": "^16.9.0"
}
}
Error:
Uncaught TypeError: path.parse is not a function
at Function.module.exports.sync (index.js:28)
at Function.module.exports.sync (index.js:8)
at module.exports (index.js:17)
at eval (mdx.macro.js:11)
at Object../node_modules/mdx.macro/mdx.macro.js (main.js:11066)
at __webpack_require__ (main.js:20)
at eval (index.js:4)
at Module../index.js (main.js:97)
at __webpack_require__ (main.js:20)
at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:2:18)

You don't need to include extra dependency for path. path is global dependency of node js.
npm remove path or yarn remove path
and
npm remove path-browserify or yarn remove path-browserify
and clear node cache
npm clear cache
can you try this?

How to use reactstrap via webpack

how do I write my config, so I can run successfully?
I do not know what's wrong with my webpack.config.js
or wrong code in other files?
can someone tell me what's wrong with my code?
webpack.config.js
var path = require('path');
module.exports = {
entry: './project/frontend/src/index.js',
output: {
path: path.join(__dirname, 'project/frontend/static/frontend/'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
],
rules:[
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
}
};
package.json
{
"name": "django-drf-react-quickstart",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"weak-key": "^1.0.1",
"webpack": "^4.32.0",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"bootstrap": "^4.3.1",
"css-loader": "^2.1.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.9",
"react-dom": "^16.8.6",
"reactstrap": "^8.0.0",
"style-loader": "^0.23.1"
}
}
index.js
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
import App from "./components/app";
app.js
import React, { Fragment, Component } from "react";
import ReactDOM from "react-dom";
import DataProvider from "./DataProvider";
import Table from "./Table";
import Form from "./Form";
import { Button } from 'reactstrap';
class App extends Component {
constructor (props) {
super(props);
}
render () {
console.log('----- in App render -----')
return(
<Fragment>
<DataProvider
endpoint="api/lead/"
render={data => <Table data={data} />} />
<Form endpoint="api/lead/" />
<Button color='danger'>Danger!</Button>
</Fragment>
);
}
}
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(<App />, wrapper) : null;
the error messages when i npm run dev
ERROR in ./project/frontend/src/components/app.js 18:6
Module parse failed: Unexpected token (18:6)
You may need an appropriate loader to handle this file type.
| console.log('----- in App render -----')
| return(
> <Fragment>
| <DataProvider
| endpoint="api/lead/"
# ./project/frontend/src/index.js 2:0-35
I do not know what's wrong with my webpack.config.js
or wrong code in other files?

how to run run --history-api-fallback inside of webpack

let path = require('path')
module.exports = {
entry:path.resolve('public/src/index.js'),
output: {
path:__dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
exclude: /(node_modules)/,
loader:'babel-loader',
query:{
presets: ['es2015', 'react']
}
}]
},
watch:true
};
I am using reactjs router and in tutorials, they majority tell you to write
--history-api-fallback for the router to work
let path = require('path')
module.exports = {
entry:path.resolve('public/src/index.js'),
output: {
path:__dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
exclude: /(node_modules)/,
loader:'babel-loader',
query:{
presets: ['es2015', 'react']
}
}]
},
watch:true
};
{
"name": "pr_v1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server/index.js & webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.16.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.18.2",
"dotenv": "^4.0.0",
"express": "^4.15.4",
"moment": "^2.18.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"request": "^2.82.0",
"webpack": "^3.5.5"
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import Reducer from './Reducer/';
import {Router, Route, browserHistory} from 'react-router';
import App from './Components/App.jsx';
const store = createStore(Reducer, applyMiddleware(thunk));
ReactDOM.render(
<Router history={browserHistory}>
<Route path='/user' component={App}/>
</Router>
,document.getElementById('root'));
I am new to react-router and i am trying to get the --history-api-fallback to work. Tutorials say to put it in the build of the json file, but i do not have a build script. I am thinking that maybe it should be somewhere is the webpack config file. I am not sure. My question is where can i insert --history-api-fallback so that it works.

For webpack dev sever, you just need to add webpack dev config. This is going to work in your dev environment.
devServer:
{
historyApiFallback: true
},

ReactJS ,Webpack : You may need an appropriate loader to handle this file type

I am able to bundle react app with webpack.
ERROR
ERROR in ./src/routes.js
Module parse failed: /home/vivek/Desktop/prismo-front/src/routes.js
Unexpected token (7:2)
You may need an appropriate loader to handle this file type.
|
| var Routes = (
| <Router history={browserHistory}>
| <Route path='/' component={Gallery} />
| </Router>
# ./src/index.js 3:0-30
Routes.js
import React from 'react';
import {Router,Route,browserHistory} from 'react-router'
import Gallery from './pages/gallery'
var Routes = (
<Router history={browserHistory}>
<Route path='/' component={Gallery} />
</Router>
)
export default Routes
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var BUILD_DIR = path.resolve(__dirname, '/build');
var APP_DIR = path.resolve(__dirname, '/src');
var config = {
entry:'./src/index.js',
output:{
path:BUILD_DIR,
filename:'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?$/,
include : APP_DIR,
exclude:path.resolve(__dirname, '/node_modules'),
loader : 'babel-loader',
query : {
presets:['react', 'es2015']
}
}
]
}
}
module.exports = config;
package.json
{
"name": "prismo-front",
"version": "0.1.0",
"private": true,
"dependencies": {
"path": "^0.12.7",
"range-function": "^0.1.1",
"react": "^15.6.1",
"react-bootstrap": "^0.31.1",
"react-dom": "^15.6.1",
"react-router": "^3.0.5"
},
"devDependencies": {
"react-scripts": "1.0.10",
"webpack": "^3.3.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I have been trying this for a week now.
I have read docs clearly and everything is written accordingly.
I have the devDependencies in place.
Please Help!!

Issue is with how APP_DIR is declared. Change it to
var APP_DIR = path.resolve(__dirname, 'src');
and webpack will start loading jsx files with babel and you won't have this issue anymore. This is because path.resolve had set APP_DIR to /src because it evaluates it's arguments from right to left, stopping at the first encounter of an absolute path. Relevant docs here. Look at the second example there.
path.resolve('/foo/bar', '/tmp/file/');
// Returns: '/tmp/file'
However, I can see more issues.
Same applies for BUILD_DIR
You are using create-react-app. You don't need to configure webpack and babel separately. CRA does it for you.

After deploying [react-router] "did not match any routes"

I´m currently developing a React-Redux Appliaction using Webpack & npm.
While development I run "start": "node server.js" (from my package.json) and my app is then reachable on localhost:3000/myApp.
But I would like to make this App available to other users. I have a linux server running apache, where some of my previously jQuery Apps are running that work fine.
However, to bundle my React App I run "production": "webpack -p" and the output of this is /dist/bundle.js. Afterwards, I created a html file, included the bundle.js on put both on the server
<!DOCTYPE html>
<html>
<head>
<title>Urlaub-planer</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--<link rel="stylesheet" href="./Urlaubspalner/css/daterangepicker.css" type="text/css">-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<!-- Auth0Lock script -->
<script src="//cdn.auth0.com/js/lock-9.0.min.js"></script>
</head>
<body>
<div class="todoapp" id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
When trying to access I got the following error:
browser.js?26d3:49Warning: [react-router] Location "/test/index.html" did not match any routes
This is the File where my Routes are defined
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import {Router, Route, IndexRoute, browserHistory} from 'react-router'
import createLogger from 'redux-logger'
import App from './containers/App'
import VacationSummary from './containers/vacation/VacationSummary'
import VacationRequest from './containers/vacation/VacationRequest'
import VacationRequestSummary from './containers/vacation/VacationRequestSummary'
import Home from './containers/Home'
import Demo from './components/Demo'
import rootReducer from './reducers/reducers'
import thunkMiddleware from 'redux-thunk'
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
const logger = createLogger();
let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, logger) (createStore)
let store = createStoreWithMiddleware(rootReducer)
let rootElement = document.getElementById('root')
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('./reducers', () => {
const nextRootReducer = require('./reducers').default
store.replaceReducer(nextRootReducer)
})
}
render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="Home" component={Home}/>
<Route path="VacationSummary" component={VacationSummary}/>
<Route path="VacationRequest" component={VacationRequest}/>
<Route path="VacationRequestSummary" component= {VacationRequestSummary}/>
</Route>
</Router>
</Provider>,
rootElement
)
I have found several Questions on SO with a similar purpose, but they are mostly having problems, when running this with the webpack-dev-server.
I want it as I said on my traditional apache server.
What do I have to do, to make this work outside of my development Environment?
Sorry if that Q is to basic, but it is my first project using all this new npm, webpack, node ... stuff and so on.
Finally my package.json
{
"name": "Urlaubsplaner",
"version": "0.0.1",
"main": "index.js",
"scripts": {
"server": "node server/server.js",
"start": "node server.js",
"watch": "webpack --watch",
"production": "webpack -p"
},
"author": "Auth0",
"license": "MIT",
"dependencies": {
"classnames": "^2.2.5",
"css-loader": "^0.23.1",
"material-ui": "^0.15.2",
"moment": "^2.13.0",
"react": "^15.1.0",
"react-bootstrap-daterangepicker": "^3.1.0",
"react-dom": "*",
"react-redux": "*",
"react-router": "*",
"react-tabs": "^0.7.0",
"react-tap-event-plugin": "^1.0.0",
"react-yearly-calendar": "^1.1.4",
"redux": "*",
"redux-form": "^5.2.5",
"redux-logger": "^2.6.1",
"redux-thunk": "*",
"style-loader": "^0.13.1"
},
"devDependencies": {
"babel-core": "^5.6.18",
"babel-loader": "^5.1.4",
"babel-plugin-react-transform": "^1.1.0",
"express": "^4.13.3",
"webpack": "^1.9.11",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.2.0"
}
}
And my webpack.config
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
{test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
}]
}
}
Greetings.

According to your current react router paths following links would work:-
/
/VacationSummary
/VacationRequest
/VacationRequestSummary
I cannot find /test/home.html route anywhere in your react-router. So it would throw error for sure. Also you dont need to specific .html in the end for links.
Also I would suggest you to make your /Home Index Route instead of Route.
Now are you localhost:3000/myApp this working, because it should not as myApp is not there in your router urls.
So you home page(or index.html) should be accessible at localhost:3000 from the code you have shared above.