Webpack fails rendering express import - javascript

NodeJS/Express: Webpack fails transpiling src/server/app.js to dist/server/app.js, after me adding import express from 'express' to the src-file (src/server/app.js).
The error messages look like:
ERROR in ./~/express/lib/request.js
in detail:
Module not found: Error: Can't resolve 'net'
in '/Users/timo/Desktop/Eggs/node_modules/express/lib'
or
ERROR in ./~/express/lib/view.js
in detail:
Module not found: Error: Can't resolve 'fs'
in '/Users/timo/Desktop/Eggs/node_modules/express/lib'
Do I have to change something in my webpack.config.babel.js-file?
here it is:
export default [
{
entry: './src/server/app.js',
output: {
path: './dist/server',
filename: 'app.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015', 'react'] }
}]
}
},
{
entry: './src/client/app.js',
output: {
path: './dist/client',
filename: 'app.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015', 'react'] }
}]
}
}
]

Try setting the "node" target for your server-side code:
{
entry : './src/server/app.js',
target : 'node',
...
}
By default, Webpack will compile for usage in a web browser, which doesn't support a lot of modules that only make sense to run server-side (like net and fs).

are you config .babelrc?webpack1 has no query option in module.loaders.if the problem even occurs.you can delete node_modules and reinstall npm install.May be something you link some dependencies from global repository via npm link,I have met.

Related

Webpack build Failed, Throws Unexpected Token Error JSX syntax

ERROR in ./client/index.js
Module build failed: SyntaxError: Unexpected token (31:4)
const Root = () => {
return (
<ApolloProvider client={client}>
^
<Router history={hashHistory}>
My Webpack config file below:
const path = require('path'),
webpack = require("webpack"),
clientPath = path.join(__dirname, 'client'),
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(clientPath, 'index.js'),
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
}
],
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'client/index.html'
})
]
};
I am not able to build , it throws Unexpected token error while I have no syntactical mistake in code, Its just not able to recognise react code style
I have tried changing js to jsx inside webpack config at this place
{
use: 'babel-loader',
test: /\.jsx$/,
exclude: /node_modules/
}
Then it throws different error like
Module parse failed: /client/index.js Unexpected token (31:4)
You may need an appropriate loader to handle this file type.
It was my mistake only, ".babelrc" file was missing in my directory so I have created a file inside my app directory at root level and put this content into that file
.babelrc
{
"presets": ["env", "react"]
}
And tried with npm run-script build....succeeded!!!!
I see two possible causes:
1) loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
] will do nothing as loaders should be specified in module.rules so nothing is handling jsx files. This can be done to handle both js and jsx files using regex /\.jsx?/
2) The babel loader has no presets so unless they are specified in a .babelrc ypou arent showing, then you need to add the necessary presets to the loader
These should both be remedied by...
npm install babel-preset-react babel-preset-es2015
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
//...
}

Possible to have separate src from modules and webpack config?

I have an app that is in a different folder structure than the modules installed from the package.json and I cannot find a way to make it work:
Structure:
includes
build
build stuff
src
shared assets
js
...APP (the app is a few folders down still)
How can I specify that the modules are somewhere and the app is in another place? Is this even possible? as If I set up the src of my app in the place where the build setup is, everything work as expected.
Where is my very simple webpack config.
var getters = require('./../gulpfile.js/config/getters');
var path = require('path');
var appRoot = path.resolve(__dirname, '../src');
var appRoot2 = path.resolve(__dirname, '../../main/jcr_root/etc/designs/fit/includes/shared_assets/js/vueapps/chat_app/src');
module.exports = {
context: appRoot2,
entry: './main.js',
output: {
filename: 'app.js',
path: getters.js.vue.apps.chatapp.dist
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/
},
{
test: /\.js$/,
loaders: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
modules: [
'node_modules'
]
}
};
I this you can see I have appRoot and appRoot2, appRoot works as expected, appRoot2 fails giving me this error.
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in ...
EDIT: Forgot to mention I'm using :
"vue-loader": "^9.4.0".
"webpack": "^2.2.0".
"babel-loader": "^6.3.2".
EDIT2: Got it working, had to specify with another option:
resolveLoader: {
modules: [
nodeRoot
],
}
Also in the loader had to add this option:
{
test: /\.js$/,
loaders: 'babel',
exclude: /node_modules/,
query: {
presets: [nodeRoot + '/babel-preset-es2015'],
}
}
With the path to the preset.

angular2-template-loader: Error: Can't resolve './' in \#angular\compiler\src

Trying to bundle my angular2 app with webpack2 and angular2-template-loader, but getting this error:
ERROR in ./~/#angular/compiler/src/compile_metadata.js
Module not found: Error: Can't resolve './' in 'C:\Users\eagor\Documents\work\node_modules\#angular\compiler\src'
# ./~/#angular/compiler/src/compile_metadata.js 393:22-35
# ./~/#angular/compiler/index.js
# ./~/#angular/platform-browser-dynamic/src/platform-browser-dynamic.js
# ./~/#angular/platform-browser-dynamic/index.js
# ./src/login/index.js
Without the angular2-template-loader it bunldes just fine.
src/login/index.js:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { LoginModule } from './src/login.module';
document.addEventListener('DOMContentLoaded', function() {
platformBrowserDynamic()
.bootstrapModule(LoginModule);
});
src/login/src/login.module.js
export class LoginModule {
// make empty for example.
}
webpack.config.js:
var path = require("path");
module.exports = {
entry: {
login: "./src/login/index.js"
},
output: {
path: path.resolve(__dirname, "wwwroot/bundles"),
filename: "[name].min.js"
},
module: {
loaders: [
{
test: /\.js$/, exclude: /node_modules/,
loader: "babel-loader"
},
// adding this loader breaks
{
test: /\.js$/,
loaders: ['angular2-template-loader'],
exclude: [/\.(spec)\.js$/]
},
{
test: /\.(html|css)$/,
loader: 'raw-loader'
}
]
}
};
You should exclude the node_modules folder:
{
test: /\.js$/,
loaders: ['angular2-template-loader'],
exclude: [/node_modules/, /\.(spec)\.js$/]
}
Otherwise webpack tries to pipe also .js files that are located somewhere in the node_modules folder through your pipeline, which is something you don't want and breaks things in your case.

Webpack is not parsing the jsx file

I have this jsx file.
//react code
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
and this is my webpack.confg.js file
//webpack config
module.exports = {
entry: __dirname + '/assets/app/components/test/test.jsx',
output: {
path: __dirname,
filename: '/assets/app/components/test/test.min.js'
},
module: {
loaders: [
{
test: '/\.jsx?/',
exclude: '/node_modules/',
loader: 'babel',
query: {
presets:['es2015', 'react']
}
}
]
}
}
on running the web pack its giving the error as
/assets/app/components/test/test.jsx
Module parse failed: /Users/joseph.antony/workspace/sloop/assets/app/components/test/test.jsx Unexpected token (6:11)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:11)
I'm fairly sure that your issue is due to the regex tests not being expressed correctly:
This:
test: '/\.jsx?/',
exclude: '/node_modules/',
Should be:
test: /\.jsx?/,
exclude: /node_modules/,
Regex literals are not wrapped in strings.
Here is my module config I used for all React projects I create. You will need to npm install the packages I have specified below.
module: {
loaders: [
{
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
exclude: __dirname + "/node_modules",
loader: require.resolve("babel-loader"),
query: {
presets: [
require.resolve('babel-preset-es2015'),
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react')
]
}
}
]
},

Use Babel with JavaScript

I am trying to write my first babel program and kind of stuck.
I wrote script 1
var message = "Hello World";
module.exports = message;
and script2
var message = require('./script1');
document.write(`This is formatted with ES6 ${message}`);
my webpack.config.js looks like
module.exports = {
entry: {
main: [
'./script1.js',
'./script2.js'
]
},
output: {
filename: "./public/[name].js"
},
loaders: {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}
}
The above code works and I am able to see the output but now if I modify script2 to
import message from './script1';
document.write(`This is formatted with ES6 ${message}`);
then when I run webpack it says
ERROR in ./script2.js
Module parse failed: /Users/a.c/MyProjects/ReactTutorial/script2.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import message from './script1';
| document.write(`This is formatted with ES6 ${message}`);
# multi main
My understanding is that because I am using babel, I should be able to use the new ES6 way of importing stuff into my code easily.
Try add resolve.extensions to config file (in order to avoid always write extensions when you import .js or .jsx files) also if you are using babel 6 you need install couple packages babel-preset-es2015 and babel-preset-react
module.exports = {
entry: {
main: [
'./script1.js',
'./script2.js'
]
},
output: {
filename: "./public/[name].js"
},
loaders: {
test: /\.jsx?$/, // or /\.(js|jsx)$/
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
resolve: {
extensions: ['', '.js', '.jsx']
}
}
Most likely you have forgotten to specify es2015 preset for babel.
Make sure it's installed:
> npm i -D babel-preset-es2015
You have two options to specify this preset for babel.
Create .babelrc file and specify the preset there:
{
"presets": ["es2015"]
}
Specify the preset using query property:
module: {
loaders: [
{
test: /\.jsx?$/,
include: /src/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}

Categories