I am trying to use react-music (https://github.com/FormidableLabs/react-music), after npm start i get this error message
ERROR in Cannot find module './_Stack'
# multi main
webpack: bundle is now VALID.
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
'./demo/index',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
],
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
}, {
test: /\.css$/,
loader: 'style!css!postcss',
}],
},
};
Related
I'm using VueJS and within my scoped SCSS I have a background image pointing to an SVG file and that works fine... but when I try to use a loader like file-loader/url-loader/svg-url-loader to configure the ouput, it is being chunked and unable to be read. I have no idea what could be causing the conflict.
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
main: path.resolve(__dirname, 'src/index.ts'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
publicPath: '/assets/',
},
devServer: {
host: '0.0.0.0',
static: path.join(__dirname, 'dist'),
compress: false,
port: 7000,
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
},
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.svg$/,
exclude: /node_modules/,
use: {
loader: 'svg-url-loader',
},
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'assets/css/[name].css',
chunkFilename: '[id].css',
}),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: path.join(__dirname, './dist/index.html'),
minify: false,
}),
],
devtool: 'source-map',
resolve: {
extensions: ['.tsx', '.ts', '.js', '.vue'],
},
};
the chunked output is something like:
module.exports = "data:image/svg+xml,blahblahblah"
I figured it out myself by upgrading all my NPM packages and using Webpack's Asset Modules instead of any of the previous loaders and it works perfect.
This code is my webpack.config.js file.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "./dist"),
publicPath: '/dist/',
filename: "index_bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
devServer: {
publicPath: '/dist/'
}
};
Attached is my error message.
I've tried reinstalling some packages and modifying this config file from the starterkit but to no avail.
Thanks in advance!
I am using Webpack4 to build my react app and the webpack.config.js looks as following:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
entry: ['#babel/polyfill', './src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
},
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader
}, {
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["./node_modules"]
}
}]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
Try to compile the app, the compiler complains:
ERROR in ./src/index.scss
Module build failed: ReferenceError: window is not defined
at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:23:2)
at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:12:46)
at module.exports (webpack:///./node_modules/style-loader/lib/addStyles.js?:77:88)
at eval (webpack:///./src/index.scss?./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js??ref--6-3:16:134)
at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js??ref--6-3!./src/index.scss (/Volumes/Develop/react-reason/cockpit/node_modules/style-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/css-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/sass-loader/lib/loader.js??ref--6-3!/Volumes/Develop/react-reason/cockpit/src/index.scss:104:1)
at __webpack_require__ (/Volumes/Develop/react-reason/cockpit/node_modules/style-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/css-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/sass-loader/lib/loader.js??ref--6-3!/Volumes/Develop/react-reason/cockpit/src/index.scss:21:30)
at /Volumes/Develop/react-reason/cockpit/node_modules/style-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/css-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/sass-loader/lib/loader.js??ref--6-3!/Volumes/Develop/react-reason/cockpit/src/index.scss:70:18
at Object.<anonymous> (/Volumes/Develop/react-reason/cockpit/node_modules/style-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/css-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/sass-loader/lib/loader.js??ref--6-3!/Volumes/Develop/react-reason/cockpit/src/index.scss:73:10)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at exec (/Volumes/Develop/react-reason/cockpit/node_modules/mini-css-extract-plugin/dist/loader.js:54:10)
# ./src/index.js 9:0-23
# multi (webpack)-dev-server/client?http://localhost:8080 #babel/polyfill ./src/index.js .
the content of index.scss file looks as following:
#import './font-awesome/scss/fontawesome.scss';
#import 'bootstrap/scss/bootstrap';
What do I am window missing?
I removed style-loader and resolve my issue
rules: [
{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
//'style-loader',
'css-loader',
'sass-loader'
]
}]
What's wrong with my configuration , It serves the index.html with no react output.Been tooling with this for weeks , is there a simpler way to do this?
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:[
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index.js'
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:
{
presets:['es2015', 'react']
}
}]
},
resolve:{
extensions :['.js','.jsx']
},plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase:'./dist/',
compress: true,
hotOnly: true
}
};
AFter building my typescript-react application, I am getting a 'module is not defined'error after running in browser.
Note that I am targeting the electron-renderer. Everything seems to work fine when running using èlectron ., but when I serve it in the browser, it starts showing this error.
var path = require("path")
var webpack = require("webpack")
module.exports = {
debug: true,
devtool: "inline-source-map",
entry: {
index: ["index.tsx", "babel-polyfill", "ts-helpers"]
},
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].js",
libraryTarget: "commonjs2"
},
resolve: {
root: [
path.resolve(__dirname, "src")
],
extensions: ["", ".ts", ".tsx", ".js", ".jsx"]
},
module: {
loaders: [
{
test: /\.tsx?$/,
loaders: [
"babel-loader",
"ts-loader"
]
},
{
test: /\.jsx?$/,
loaders: [
"babel-loader"
]
},
{
test: /\.json$/,
loaders: [
"json-loader"
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
target: "electron-renderer"
}