In the server.js the assets are imported like this
import assets from './assets';
If I understood it correctly this path maps to build/public/assets which is generated through the webpack configuration here:
output: {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: '/assets/',
sourcePrefix: ' ',
pathinfo: isVerbose,
},
Or am I mistaken on that? When I run webpack I still run into:
ERROR in ./src/server.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets
Basically the question here is not how to get it run, but why can the line import assets from './assets'; in the React Starter Kit be resolved even though there is no assets.js inside src.
you need to build the project first:
npm run build
this creates the build folder with the assets.js file in it.
Check out the webpack.config.js file in the /tools folder.
It's using assets-webpack-plugin to bundle assets into namespaced client and vender modules.
After running npm run build, webpack outputs the resulting builds to the build/public/assets folder. Since the src/server.js is referencing ./assets as a relative, not fixed path, it will work once it's bundled and you run server.js from the build/public dir.
This ReadMe is also helpful: Build Automation Tools.
Related
I have a Webpack-templated Vue project, initiated through vue-cli.
I have created a simple 'vue.config.js' file stored in the root folder (where package.json is at) containing the following:
// vue.config.js
module.exports = {
productionSourceMap: false
}
Though when building the project using "npm run build" it ignores it.
I have tried different configurations to check if the problem is with the file or the setting, and the problem is with the file.
I am using webpack#3.12.0, vue#2.6.11, #vue/cli 4.2.3 and npm#6.9.0.
Make sure your build confiuration (in your case the webpack build configs) include your file.
Generally, you will have a source folder (often src) and the builder will build all the files in that dir only. Then you have your destination directory (often dist or build) where your build files will be stored.
Two solutions:
add your conf file to the build source.
move your vue.conf.js file into your source directory
For some reason, I did not manage to get vue.config.js to work.
Alternatively, I edited my webpack config, which as my build files mentioned was located at /config/index.js
Then, I proceeded to pass my build configurations to the build parameter which already appears on the file.
build: {
...
}
And it worked. I assume it may be because I used npm run dev instead of the vue-service-cli, so webpack did not go through the vue.config.js file.
I have Node.js project and the following structure of folders:
lib
awesome-formatter.js
FrontEndApp
prettify.js
node_modules
awesome-parser
BackEndApp
...
I use awesome-parser module and awesome-formatter.js library in prettify.js script like this:
require('awesome-parser')
require('../lib/awesome-formatter.js')
awesome-formatter.js, in turns, should use awesome-parser too:
require('awesome-parser')
My FrontEndApp has been configured to use Webpack, and I'm trying to run it in dev mode using npm run dev command. However, I got the following error:
ERROR Failed to compile with 1 errors
These dependencies were not found:
* awesome-parser in /home/user/dev/lib/awesome-formatter.js
I don't want to move awesome-formatter.js inside the FrontEndApp because I also use it in BackEndApp project (and probably in some other projects) and I don't want to create separate "node_modules" in "lib" for it just not to duplicate installed modules on disk.
So, my question is, how to make Webpack use project's "node_modules" in js scripts located outside the project folder?
P.S. Of course there are workarounds like symlinks or making a full-featured module (with package.json etc.) from lib/awesome-fromatter and installing it into FrontEndApp/node_modules, but is there a direct way to solve this problem?
I've found a solution: resolve.modules sould be added to Webpack configuration file.
module.exports = {
...
resolve: {
...
modules: [
'node_modules',
resolve('node_modules')
]
},
...
}
This means that Webpack is searching modules in 'node_modules' as a relative subfolder (and it's the usual behavior), and at the absolute path to the project's 'node_modules' as well: resolve('node_modules'), so that scripts in folders outside the project (like lib in my structure) can find and use it.
I am trying to use this with my webpack project
https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
but I get this error
ReferenceError: __meteor_runtime_config__ is not defined
Here are the steps I did
create a new meteor project
then I run the client bundler like this
meteor-client bundle —source=./ —destination=./meteor-client.bundle.js —config=meteor-client.config.json
and here is the config
{
"runtime": {
"DDP_DEFAULT_CONNECTION_URL": "http://localhost:3000"
},
"import": [
"meteor-base#1.3.0",
"mongo#1.4.2",
"reactive-var#1.0.11",
"jquery#1.11.10",
"tracker#1.1.3",
"shell-server#0.3.1",
"react-meteor-data"
]
}
then I copy my meteor-client.js to my webpack project node_modules
and import it like this
import 'meteor-client'
then I bundle webpack and run dev-server and I get the above mentioned error.
I had the same issue, and fixed that by putting my meteor-client.js to node_modules and exclude node_modules from processing by babel-loader with webpack (or you could just exclude meteor-client.js). Raw loading will workaround that.
In case someone still searching.
I have a Nodejs project for which I want to create an executable, but I also want to use it as a module that I can import in other projects.
I'm using Webpack to bundle everything and create the executable and it works well IF i'm running the script from the project directory. If I try to run the script from another path, then I get a ENOENT: no such file or directory error.
My project structure:
project_root
|
|-- lib
|-- dependent_library.js
|-- dependent_library_2.js
|-- index.js
|-- cli.js
|-- some_script.sh
|-- webpack.config.js
My webpack.config.js
const webpack = require('webpack')
module.exports = {
entry: './cli.js',
target: 'node',
node: {
__dirname: true
},
output: {
path: __dirname,
filename: 'my_executable'
},
plugins: [
new webpack.BannerPlugin({
banner: '#!/usr/bin/env node\n',
raw: true
})
]
}
I have a fs.readFileSync(__dirname + '/../some_script.sh') in my dependent_library.js file. This file is imported in the cli.js file, which is the entry point for webpack. I run webpack, it bundles my executable, all is good.
The problem arises when I want to run the executable from ../project_root or some other path in the system, which is something that I would obviously like to do.
e.g. My project is in /home/my_user/workspace/project_root/. I cd to
/home/my_user/workspace/ and run project_root/my_executable
This is where I get the following error:
Error: ENOENT: no such file or directory, open 'lib/../some_script.sh'
My sure there's a way to configure Webpack for this scenario to work, but I haven't figured out how yet. Anyone have any idea?
I ended up using a combination of #Keith's answer with some code change
I've set:
node: {
__dirname: false
}
And I've also changed the dependent_library.js to check wether the script exists in the current directory or not. So if __dirname + /some_script.sh exists, then it will just read it - and this is what happens when you run the executable. The difference is that with the webpack node.__dirname option set to false, the __dirname returns the absolute path to the executable.
If __dirname + /some_script.sh doesn't exist, then it tries to read __dirname + /../some_script.sh - we assume the project is imported as a module. Because the library where this code runs is in project_root/lib, we need to go back one level.
I am importing fluent-ffmpeg with: import ffmpeg from 'fluent-ffmpeg' in one file.
After running webpack, I receive this error:
Uncaught Exception: ReferenceError: fluent is not defined
I looked inside the transpiled file and I found fluent-ffmpeg included like so:
function(e,t){e.exports=fluent-ffmpeg}
After changing the line to read: function(e,t){e.exports=require("fluent-ffmpeg")} the programs work.
Is there a way to configure webpack to correctly require fluent-ffmpeg when transpiling?
Edit: I am using this electron react webpack boilerplate to build a desktop application - https://github.com/chentsulin/electron-react-boilerplate
Update:
I've created a repo to show the bug - https://github.com/the4dpatrick/congenial-barnacle. The difference between electron-react-boilerplate and this repo can be seen in a single commit
To see bug:
npm i
packaging the electron app (npm run package)
opening the app which is under the release dir.
Alert opens with error
I was able to solve the issue by simply setting the output.libraryTarget setting within webpack.config.electron.js file to commonjs2.
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
libraryTarget: 'commonjs2'
},
For further details read: chentsulin/electron-react-boilerplate#232