I'm using webpack encore with symfony 5 and i'm trying to add datatables to my project :
.addEntry('pdfmake', './assets/scripts/pdfmake.min.js')
.addEntry('vfs-fonts', './assets/scripts/vfs_fonts.js')
.addEntry('datatables-min', './assets/scripts/datatables.min.js')
.addEntry('datatables-buttons', './assets/scripts/datatables.buttons.min.js')
.addEntry('buttons-html5', './assets/scripts/buttons.html5.min.js')
.addEntry('buttons-print', './assets/scripts/buttons.print.min.js')
.addEntry('buttons-bootstrap', './assets/scripts/buttons.bootstrap.min.js')
.addEntry('datatables-bootstrap4', './assets/scripts/datatables.bootstrap4.min.js')
.addEntry('datatable-script', './assets/scripts/datatable.js')
I called libraries inside the webpack config file and inside my twig
The data tables work fine but in my main js file i have an i18next config function :
// init i18n and load language file
i18next.use(XHR).init({
debug: false,
fallbackLng: "en",
backend: {
loadPath: "build/{{lng}}.json"
},
returnObjects: true
},
function (err, t) {
// resources have been loaded
jqueryI18next.init(i18next, $);
}
);
the local path inside the config is build/en.json for the english language but i'm using the datatable in http://localhost/admin/user/ so i'm getting this error in my console :
/admin/user/build/en.json:1 Failed to load resource: the server responded with a status of 404 (Not Found)
how to fix this error ?
You have declared a relative path.
You should be using an absolute path.
Just add a preceding forward slash "/":
loadPath: "/build/{{lng}}.json"
https://medium.com/#colinlmcdonald/absolute-vs-relative-paths-7ffd8e31d49c
Related
In some popular NodeJS libraries, e.g. ssh2 or node-pty, there is natively compiled code as part of the library.
Creating the project with
vue create my-project
vue add electron-builder
yarn add ssh2
then importing and using ssh2's Client in the background process results in following errors during
electron:build
ERROR Failed to compile with 1 errors 5:29:10 PM
error in ./node_modules/cpu-features/build/Release/cpufeatures.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./node_modules/cpu-features/lib/index.js 1:16-60
# ./node_modules/ssh2/lib/protocol/constants.js
# ./node_modules/ssh2/lib/client.js
# ./node_modules/ssh2/lib/index.js
...
This error occurs with many other libs or transitive dependencies and the reason for it is absence of native-ext-loader on Webpack chain. I understand why it is not included by default, and I would like to see what is the best way to add it.
One solution I found is this:
Add yarn add -D native-ext-loader (my version is 2.3.0 and electron is at 13.x)
Adjust vue.config.js and add the chainWebpackMainProcess like this:
const path = require('path')
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
// options placed here will be merged with default
mac: {
target: 'dmg',
icon: 'build/icon.icns',
asar: true
}
},
preload: 'src/preload.ts',
chainWebpackMainProcess(config) {
config.module
.rule("node")
.test(/\.node$/)
.use("native-ext-loader")
.loader("native-ext-loader")
.options(
process.env.NODE_ENV === "development"
? {
rewritePath: path.resolve(__dirname, "native"),
}
: {}
)
}
}
}
}
Both, electron:build and electron:serve are now working and ssh2 client is happily delivering the stdout to renderer via ipcMain. Not sure it is the most elegant way of solving it, though.
I have a problem with serving next js app using keystonejs. I want to achive something similar like in to do nuxt example which you can choose while creating keystone project. I used code from this link https://www.keystonejs.com/keystonejs/app-next/ in index.js file, but I get an error while trying to run the app:
ReferenceError: distDir is not defined at Object.
What should I do?
this is what I have in my setup
create app folder (next js code)
create next.config.js in app folder
my next.js.config file has following code
const distDir = 'dist';
module.exports = {
distDir: `../${distDir}/www`,
env: {
SERVER_URL: process.env.SERVER_URL || 'http://localhost:4000',
},
publicRuntimeConfig: {
// Will be available on both server and client
// staticFolder: '/static',
},
};
it export the build artifacts in dist/www in root of keystone project.
I am working on a node express api which is building a view via react and CSS modules (one CSS file within each component imported directly into the component). The react output is serialised with renderToStaticMarkup() which will be sent back to the requester in the JSON response. I also intend to send the compiled CSS in this response too.
I have a working build process via webpack which bundles my server app to one file. I am also currently bundling my CSS (modules) into one file (with the intention of reading this in later).
I am using webpack with its watch facility as follows (can't use webpack-dev-server as the api requires POST and there is no 'page' to update anyway):
cross-env NODE_ENV=development webpack -w --colors
My issue however is that whilst this all works fine on first compile, as soon as I change any file, I get a webpack error stating that I need an appropriate loader for the imported CSS file.
ERROR in ./src/app/components/Suggestions/Suggestions.css
Module parse failed: /home/me/myproject/src/app/components/Suggestions/Suggestions.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .suggestions {
| background: blue;
| color: orange;
# ./src/app/components/Suggestions/Suggestions.js 11:19-47
# ./src/app/components/Suggestions/index.js
# ./src/server/middleware/buildSuggestions.js
# ./src/server/routes/index.js
# ./src/server/server.js
# multi babel-polyfill ./src/server/server.js
I have simplified my webpack config as much as possible and still get the issue. My simplified config (not extracting css to file and no PostCSS) is as follows:
webpack.config.babel.js
import path from 'path';
import nodeExternals from 'webpack-node-externals';
import PATHS from './config/paths';
// Host and port settings to spawn the dev server on
const HOST = 'localhost';
const PORT = 3000;
const LOCAL = `http://${HOST}:${PORT}`;
const DEV = process.env.NODE_ENV === 'development';
let serverConfig = {
entry: [
"babel-polyfill",
path.resolve(PATHS.src, 'server/server.js'),
],
output: {
filename: 'server.js',
path: PATHS.dist,
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
include: PATHS.src,
use: {
loader: 'babel-loader',
options: {
// babelrc at project root only for compiling this webpack
babelrc: false,
presets: [
'env',
'react'
],
plugins: [
'transform-object-rest-spread',
'syntax-dynamic-import',
'transform-class-properties',
]
}
}
},
{
test: /\.css$/,
use: [
{
loader : 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]-[hash:base64]',
sourceMap: DEV
},
}
]
}
],
},
plugins: [
],
target: 'node',
externals: [nodeExternals()]
};
export default serverConfig;
So my question is, why does this work okay on first compile but not on a recompile after a change?
Stranger than fiction!
So I realised that if I run my build without the watcher...
cross-env NODE_ENV=development webpack --colors
and that process had ended, if I edited a file I still saw the error!!! Even though there was supposedly no watcher running. I left that terminal window alone with no running process, opened another terminal and edited a file within my src directory using vi (closed WebStorm in case it had some odd watcher running). Incredibly, the error popped up again in the original terminal window!!!
So it seems my issue was caused by a rogue webpack watch process that hadn't been killed properly. Couldn't find the process to manually kill it so had to do reboot. Literally hours lost on this bizzare issue. At least my whole build process is working again.
I am trying to convert my Google Closure Library used web app to Electron. I've used grunt-electron to package the application but it seems it doesn't change the default app of the Test.app. In Test.app/Contents/Contents/app/ there exist my application, but it doesn't load my app, but indeed loads default app.
My file hierarchy:
www: index.js (Electron config file), index.html, css/, fonts/, js/**
My grunt task:
electron: {
osxBuild: {
options: {
name: 'Test App',
dir: 'www',
out: 'build',
version: '0.25.3',
platform: 'darwin',
arch: 'x64'
}
}
}
Check if package.json file exists in your www directory and has main js set inside.
It should be something like:
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
I am using grunt-protractor-runner plugin and in the protractor target I want to send the specs param containing the test to run.
In the grunt file my target looks as follows:
testIntegration:
{
options:
{
args: {
specs: ['test1.js'],
browser: 'firefox'
}
}
The protractor parent task option contains setting of the protractor config file.
When running this target I get this error:
$ grunt protractor:testIntegration
Running "protractor:testIntegration" (protractor) task
Starting selenium standalone server...
Selenium standalone server started at ...
Warning: pattern t did not match any files.
Warning: pattern e did not match any files.
Warning: pattern s did not match any files.
Warning: pattern t did not match any files.
Warning: pattern 1 did not match any files.
Warning: pattern j did not match any files.
Warning: pattern s did not match any files.
and then some more errors.
the same line works well in Protractor config file.
Tried a few other variation but no success.
What am I missing? Any ideas?
Try this configuration:
module.exports = function(grunt) {
// Project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
protractor: {
options: {
keepAlive: true,
singleRun: false,
configFile: "PROTRACTOR_CONFIG_FILE.js"
},
run_firefox: {
options: {
args: {
browser: "firefox"
}
}
}
});
// load grunt-protractor-runner
grunt.loadNpmTasks('grunt-protractor-runner');
// register tasks
grunt.registerTask('default', 'Run Protractor using Firefox',
['protractor:run_firefox']);
};
Funny, if you read every error message, it spells out "test1.js". Looks like it's not reading in the config file correctly, probably because you're not using grunt.file.readJSON('FILENAME.json')