I'm using node.js (the last version) and webpack to create a bundle. From what I've read, node.js should contain fs module for managing files. However when I call require("fs") I get an Cannot find module "fs" error. I've stuck with 'require is not defined ' in my console after adding "target: 'node' ". Any help will be usefull, thx.
var webpack = require('webpack');
module.exports = {
entry: "./client/main.js",
output: {
path: __dirname + '/public/build/',
publicPath: "build/",
filename: "bundle.js"
},
node: {fs: "empty"},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel",
exclude: [/node_modules/, /public/]
},
{
test: /\.css$/,
loader: "style-loader!css-loader!autoprefixer-loader",
exclude: [/node_modules/, /public/]
},
{
test: /\.less$/,
loader: "style-loader!css-loader!autoprefixer-loader!less",
exclude: [/node_modules/, /public/]
},
{
test: /\.gif$/,
loader: "url-loader?limit=10000&mimetype=image/gif"
},
{
test: /\.jpg$/,
loader: "url-loader?limit=10000&mimetype=image/jpg"
},
{
test: /\.png$/,
loader: "url-loader?limit=10000&mimetype=image/png"
},
{
test: /\.svg/,
loader: "url-loader?limit=26000&mimetype=image/svg+xml"
},
{
test: /\.jsx$/,
loader: "react-hot!babel",
exclude: [/node_modules/, /public/]
},
{
test: /\.json$/,
loader: "json-loader"
}
]
},
target: 'node',
}
By setting node: {fs: "empty"}, you are telling webpack that when importing fs an empty object should be returned. Remove that and it should work fine. https://webpack.js.org/configuration/node/#node
Instead of marking "fs" as empty, try to decorate it like this:
externals:{
"fs": "commonjs fs"
}
That should tell webpack to load it as a module instead of considering it an environment object/ variable.
Ref:
Node cannot find module "fs" when using webpack
Related
I'm using webpack programmatically, with typescript, ESM, and jest. In a jest test I'm getting errors for not including a .js file extension when importing ES modules. For example:
Module not found: Error: Can't resolve 'modulename' in '/path/components'
Did you mean 'modulename.js'?
BREAKING CHANGE: The request 'modulename' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
The module in question does indeed have "type": "module" set in its package.json. I have tried adding .js to the import, and it doesn't help.
I'm invoking jest with:
node --experimental-vm-modules --experimental-specifier-resolution=node node_modules/jest/bin/jest.js
as is recommended in the docs (everything else works except webpack). Note that I have tried with and without --experimental-specifier-resolution=node (this has helped in other similar circumstances).
Any thoughts on how to get webpack to work? Thanks in advance!
Note: everything was working until it was all converted to ESM! Now only programmatic webpack isn't working.
Webpack config:
{
entry,
target: 'web',
output: {
path: outputDir,
filename: '[name].js',
},
mode: process.env.NODE_ENV as 'development' | 'production' | 'none' | undefined,
resolve: {
extensions: [
'.ts',
'.tsx',
'.js',
'.jsx',
'.ttf',
'.eot',
'.otf',
'.svg',
'.png',
'.woff',
'.woff2',
'.css',
'.scss',
'.sass',
],
},
module: {
rules: [
{
test: /\.(ttf|eot|otf|svg|png)$/,
loader: 'file-loader',
},
{
test: /\.(woff|woff2)$/,
loader: 'url-loader',
},
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
sourceType: 'unambiguous',
presets: [
[
'#babel/preset-env',
{
corejs: '3.0.0,',
useBuiltIns: 'usage',
},
],
'#babel/preset-react',
'#babel/preset-typescript',
],
plugins: [
'css-modules-transform',
[
'babel-plugin-react-scoped-css',
{
include: '.scoped.(sa|sc|c)ss$',
},
],
'#babel/plugin-proposal-class-properties',
],
},
},
{
test: /\.(sc|c|sa)ss$/,
use: [
'style-loader',
'css-loader',
'scoped-css-loader',
'sass-loader',
],
},
],
},
}
Ok so I found the solution here.
Basically, had to add 2 things to the webpack config under module.rules:
{
test: /\.m?js/,
type: "javascript/auto",
},
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
},
#nerdlinger answer worked for me. I had this webpack.config.js
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
],
}
...
}
and i changed it to this
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
resolve: {
fullySpecified: false,
}
}
],
}
...
}
I have been following various tutorials on importing semantic-ui-less into a webpack project.
However, whenever I have completed the different tutorials I am getting the same error:
Module build failed:
module.exports = __webpack_public_path__ + "static/media/reset.b0bc6c14.less";
^
Unrecognised input
in /Users/benflowers/Projects/candidate/candidate-ui-cra/node_modules/semantic-ui-less/definitions/globals/reset.less (line 1, column 15)
Is this an issue with my webpack config - I have an ejected create-react-app webpack config with some additional loaders:
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}),
exclude: [/[\/\\]node_modules[\/\\]semantic-ui-less[\/\\]/]
},
// for semantic-ui-less files:
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{
loader: 'semantic-ui-less-module-loader',
// you can also add specific options:
options: { siteFolder: path.join(__dirname, 'src/site') }
}
]
}),
include: [/[\/\\]node_modules[\/\\]semantic-ui-less[\/\\]/]
},
// loader for static assets
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 10240,
absolute: true,
name: 'images/[path][name]-[hash:7].[ext]'
}
},
include: [path.join(__dirname, 'src'), /[\/\\]node_modules[\/\\]semantic-ui-less[\/\\]/]
}
as per https://github.com/gadyonysh/semantic-ui-less-module-loader
I had the similar issue.
I just added to webpack config
ALIAS
resolve: {
...
alias : {
'../../theme.config$': path.join( __dirname, '../src/assets/theme/theme.config' )
}
},
LESS LOADER
{
test: /\.less$/,
use : ExtractTextPlugin.extract( {
fallback: [ {
loader: 'style-loader',
} ],
use : [ 'css-loader', 'resolve-url-loader', 'less-loader', 'postcss-loader' ]
} )
},
and exclude
{
exclude: [
/\.(config|overrides|variables)$/,
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
/\.scss$/,
],
loader: require.resolve( 'file-loader' ),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
please pay attention to line
/.(config|overrides|variables)$/,
Adding this to your less exclude should do the trick :
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(less|config|variables|overrides)$/],
I`ve finished configuring my eslint rules and refactoring project files according to my rules. Thing is that I have some warnings that I may want to leave there for a while. But my problem is that warnings are being shown on browser console, what makes development impossible.
Below, my webpack config:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const context = path.resolve('.');
module.exports = {
context: context,
entry: './src/client.js',
output: {
path: path.join(context, 'build/client'),
publicPath: '/static/',
filename: '[name]-[hash].js'
},
module: {
preLoaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
],
loaders: [{
test: /(?:node_modules).+\.css$/,
loader: 'style!css'
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract([
'css-loader',
'postcss-loader',
'sass-loader',
'sass-resources'
])
}, {
test: /\.js$/,
loader: 'babel',
exclude: /(node_modules)/
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}, {
test: /\.json$/,
loader: 'json'
}]
},
postcss: function() {
return [
require('autoprefixer')
];
},
sassResources: [
path.resolve(__dirname, '../src/stylesheets/base/_variables.scss'),
path.resolve(__dirname, '../src/stylesheets/base/_mixins.scss')
],
devServer: {
watchOptions: {
aggregateTimeout: 1000
}
},
plugins: [
new ExtractTextPlugin("[name]-[hash].css"),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'local')
})
],
devtool: "cheap-module-source-map"
};
I have no problem with errors being displayed on browser console, but is there a way to suppress warnings ONLY on browser console and not on the node terminal?
https://devhub.io/repos/coryhouse-eslint-loader
In my webpack.config.js I have options setup:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['es2015', {modules: false}],
'react'
],
plugins: [ 'react-hot-loader/babel' ]
}
}, {
loader: 'eslint-loader',
options: {
quiet: true
}
}
]
}
]
}
The last line is quiet: true, which is how it suppresses the warnings.
Use
clientLogLevel: "none"
in the devServer config
Doc: https://webpack.js.org/configuration/dev-server/#devserverclientloglevel
devServer.clientLogLevel
string: 'none' | 'info' | 'error' | 'warning'
When using inline mode, the console in your DevTools will show you messages e.g. before reloading, before an error or when Hot Module Replacement is enabled. Defaults to info.
devServer.clientLogLevel may be too verbose, you can turn logging off by setting it to 'none'.
webpack.config.js
module.exports = {
//...
devServer: {
clientLogLevel: 'none'
}
};
Usage via the CLI
webpack-dev-server --client-log-level none
I am attempting to make a React application that I am developing isomorphic. One of the known problems with doing this is that webpack loaders allow import/require of non-javascript assets such as CSS files. e.g.
// ExampleComponent.jsx
import Select from 'react-select';
import 'react-select/dist/react-select.css';
If building an application with Express then node will get to this import and fail because it can not process a CSS file, it is expecting javascript only (and thanks to babel-register JSX).
One of the ways around this is to use the target: 'node' option in webpack when building the server application (which includes all the common parts such as the components as it is an isomorphic app) to build the server side code. This should result in a server.js being built that can then be run by node.
Note: I know that there are other ways around this particular problem (such as not using import/require to include anything that isn't javascript, but that isn't practical at this stage of development in this application.
// webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = [
// Client build
{
entry: {
'bundle.min': [
'bootstrap-webpack!./bootstrap.config.js',
'babel-polyfill',
'./client/index.jsx'
],
'bundle': [
'bootstrap-webpack!./bootstrap.config.js',
'babel-polyfill',
'./client/index.jsx'
]
},
output: {
path: './dist',
filename: '[name].js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
})
],
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{ test: /\.png$/,
loader: "url-loader?limit=100000"
},
// Bootstrap
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.json']
}
},
// Server build
{
entry: './server/server.jsx',
target: 'node',
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
output: {
path: './dist',
filename: 'server.js',
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0']
}
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{ test: /\.png$/,
loader: "url-loader?limit=100000"
},
// Bootstrap
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.json']
}
}
];
The problem is then that the style-loader makes use of window which obviously does not exist in the node environment.
$ node dist/server.js
/Users/dpwrussell/Checkout/ExampleApp/dist/server.js:25925
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
^
ReferenceError: window is not defined
From here in style-loader.
It feels like I am very close to making this work so any thoughts would be welcome.
The answer is not to use style-loader in your server build: its sole purpose is to take CSS, turn it into a <style> element, and insert it into the DOM. Most people seem to use the ExtractTextPlugin to collect their CSS for inclusion on the server side.
I'm importing two libraries in the exact same way (lodash and aframe):
The first one exports successfully:
error no-unused-vars "_" is defined but never used
E:\alex\istaging-viewer\src\components\Pano\PanoList.vue:10:8
import _ from 'lodash'
(Lodash is defined.)
For the second one, Webpack (or npm?) tells me there's no file or directory with that name:
ERROR in ./~/aframe/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./package in E:\alex\istaging-viewer\node_modules\aframe
# ./~/aframe/index.js 3:10-30
ERROR in ./~/aframe/~/aframe-core/src/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../package in E:\alex\istaging-viewer\node_modules\aframe\node_modules\aframe-core\src
# ./~/aframe/~/aframe-core/src/index.js 16:10-31
ERROR in ./~/aframe/elements/templates/index.html
Module parse failed: E:\alex\istaging-viewer\node_modules\aframe\elements\templates\index.html Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <!doctype html>
| <meta charset="utf-8">
|
# ./~/aframe/elements/index.js 7:0-33
Why is this?
NOTE: This is my Webpack setup:
var path = require('path')
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist/static'),
publicPath: '/static/',
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue', 'styl'],
alias: {
'src': path.resolve(__dirname, '../src')
}
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
exclude: /node_modules/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash:7]'
}
},
{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
{ test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" }
]
},
eslint: {
formatter: require('eslint-friendly-formatter')
}
}
According to error message and aframe source code you should specify appropriate loader for html files in your webpack config.
Not shure, but this can be suitable - https://github.com/webpack/html-loader or you can try url-loader
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
... skipped ...
{
test: /\.html$/,
loader: 'html'
},