Let me describe my problem. I have developed a Node.js application with ES6, it is a REST API using several Node modules especially from google-cloud because I am using Google Cloud Vision and Translate APIs.
Until now there is no problem, everything works as expected, but things got wrong when I wanted to run it as a service on a Windows Server. I found a way to do it here using the Node module "node-windows".
I made the service script like in that post and the service got installed and shown in the Windows services list, but when I click to start it stops immediately.
After some analyzing I remembered that I am using ES6 that needs to be transpiled to ES5 to work like a standard Node script, so I thought that building my whole app with webpack will solve that for me, but not exactly, I got my bundle.js generated with webpack without any error (just some warnings), then when I try to run it with node ./bundle.js it returns errors like :
Error: The include '/protos/google/cloud/vision/v1/image_annotator.proto' was not found.
Though I made a rule in my webpack config file to support .proto files.
This is my webpack.config.js :
module.exports = {
target: "node",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.json$/,
exclude: /node_modules/,
use: {
loader: "json-loader"
}
},
{
test: /\.proto$/,
use: {
loader: "pbf-loader"
}
},
{
test: /\.html$/,
use: {
loader: "html-loader"
}
}
]
}
};
At this level, I have no idea how to make those google-cloud .proto files to be integrated in my bundel.js, can someone please guide me ? thanks.
This is the code from grpc.js inside the #google-cloud module that tries to resolve the .proto files paths:
GoogleProtoFilesRoot.prototype.resolvePath = function (originPath, includePath) {
originPath = path.normalize(originPath);
includePath = path.normalize(includePath);
// Fully qualified paths don't need to be resolved.
if (path.isAbsolute(includePath)) {
if (!fs.existsSync(includePath)) {
throw new Error('The include `' + includePath + '` was not found.');
}
return includePath;
}
if (COMMON_PROTO_FILES.indexOf(includePath) > -1) {
return path.join(googleProtoFilesDir, includePath);
}
return GoogleProtoFilesRoot._findIncludePath(originPath, includePath);
};
Related
I am trying to deploy this site to netlify: https://github.com/Koda-Pig/joshkoter.com
But I am getting this error:
10:02:31 AM: Module not found: Can't resolve '../styles/home.module.css' in '/opt/build/repo/pages'
10:02:31 AM: > Build failed because of webpack errors
My next.config.json file looks like this:
module.exports = {
reactStrictMode: true
}
const withVideos = require('next-videos')
module.exports = withVideos()
According to Next.js website, there is built-in support for CSS modules, and Netlify doesn't seem to have a problem with any of the other CSS modules I've created, so I don't understand why there is a a webpack error.
I have tried specifying a CSS loader in next.config.js like this:
module.exports = {
reactStrictMode: true,
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
const withVideos = require('next-videos')
module.exports = withVideos()
I also tried with this config:
module.exports = {
reactStrictMode: true,
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
}
const withVideos = require('next-videos')
module.exports = withVideos()
But I got the same error message. This is my first time deploying a next.js site to Netlify, so forgive me if I am missing something obvious.
Any help would be greatly appreciated.
Changing your .css file name might fix your problem.
It seems like a file name problem, I got the same error and fixed it by doing following changes.
I used construction.js and imported Construction.module.css in styles folder.
I changed name from Construction.module.css to ConstructPage.module.css and formated all the .css file.
Therefore it worked for me and I fixed the problem.
Hope it will work for you too.
I have a couple of files that are defined as workers using the webpack worker-loader module as such:
{
test: /\.worker\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
'worker-loader',
],
},
When I put a breakpoint to debug the worker in VSCode, it catches the file with the path to the bundle.worker.js instead of the source file:
export default function Worker_fn() {
return new Worker(__webpack_public_path__ + "bundle.worker.js");
}
So is there a way in VSCode to map bundle.worker.js to the source files to debug properly?
I am currently using Emscripten to compile our C++ Code into Wasm. By doing so I output two files *.js and *.wasm. Later I use our implementation to write more Javascript code on top of that which leads us to 3 files:
index.js
wasmFile.js
wasmFile.wasm
I am trying to use webpack to create a single file that will package everything at build time rather than runtime with this piece of code:
function loadScript(url = "wasmFile.js") {
var script = document.createElement( "script" );
script.src = url;
document.getElementsByTagName( "head" )[0].appendChild( script );
await new Promise<void>((res) => {
Module.onRuntimeInitialized = () => res();
});
}
I have looked into https://github.com/ballercat/wasm-loader However, it looks like i would need to create a WebAssembly.Instance for all my function - and the Wasm file has a lot of functions to create an instance for each.
This is how our WebPack config looks like at the moment:
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.ts$/,
enforce: 'pre',
loader: 'tslint-loader',
options: {
emitErrors: true
}
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
}
};
Is there something we are missing on this? Or another package i could use to accomplish this? Any help would be wonderful.
Thanks!
You can build your app as a single JS file using -s SINGLE_FILE=1
Note: This answer is probably not exactly what you want but it solved similar problem for me.
Try out the --bind option. It will output a js and wasm file, the js file loads wasm files and exports the functions to be used in js.
Embind doc
Emcc doc search for bind
Been trying to build a MERN app with Webpack, and can't seem to load any images in React.
React component render method:
const logo = require('./images/sample.png');
<img src={logo}'/>
Webpack
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
{ test: /\.css$/, use: ['style-loader','css-loader']},
{test: /\.(jpg|png|svg)$/, loader: 'url-loader'}
] }
ouputs bundle.js into src folder, file structure below
File structure
app
|......src
.........|components
....................|component.js
.........|images
....................|sample.png
It doesn't matter how I change the path in require, and even if I put the sample.png image in the same folder as component.js I get the error that it can't be resolved. I'm thinking it must be a webpack error, but no matter how many tutorials and forums I read I can't fix it.
Ideally I would dynamically load images rather than declaring specific requires like this, so if theres a better way please tell me.
UPDATE:
I changed src={logo} to src={require("${logo}")}, and no longer get a server-side error. Instead, I get an error in the developer console (using Chrome) that seems to be returning the img URI (react problem?):
Uncaught Error: Cannot find module 'data:image/png;base64...'
In your web.config.js you need
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
};
and add it here
module: {
rules: [
...
imageLoaderConfiguration,
...
],
},
I've inherited a web app that uses webpack. In my app, I have a directory called "pub", which looks like this:
./pub
/styles
app.css
/images
brand.png
I have been trying unsuccessfully all morning to use these via webpack. In my webpack.config.js file, I have the following:
const path = require('path');
const projectRoot = path.resolve(__dirname, '../');
module.exports = {
entry: {
app: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
};
Then, in my index.js file, I have the following:
import logoImage from './public/images/brand.png';
require("css!./public/css/app.css");
When I run webpack, I receive an error that says:
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'css-loader' instead of 'css',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
I don't really understand this error. When I look at it, and then I look at my webpack.config.js file, it looks to me like I'm using css-loader. Beyond that though, how do I use a style in my webpage once the require statement is working. I'm just trying to use webpack with a web app and want to import my brand and CSS and I can't figure it out.
You don't need the css! in your require statement
require("css!./public/css/app.css");
You can just use
require("./public/css/app.css");
Because you are testing files with:
{
test: /\.css$/, // <-- here
loader: "style-loader!css-loader"
},
Or without the rule in your webpack config
// No test in rules matched but you tell webpack
// explicitly to use the css loader
require("style-loader!css-loader!./public/css/app.css");
Your hierarchy is pub/styles/app.css but the location you use in your require is public/css/app.css. It looks like you're trying to call your css from the wrong location.
If this doesn't solve your issue, check out this link https://webpack.github.io/docs/stylesheets.html
The first step on that page is to install css-loader and configure it, this might be a good place to start.