/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:80
return originalRequire.apply(this, arguments);
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/taliink1/public_html/frontend/app.js from /opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js not supported.
app.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename app.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/taliink1/public_html/frontend/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
at Module.require (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:80:25)
at loadApplication (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:243:2)
at setupEnvironment (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:214:2)
at Object.<anonymous> (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:133:1) {
code: 'ERR_REQUIRE_ESM'
}
Related
Maybe I didn't understand correctly how to use vite.
I am working with Laravel 9. I have created a package in "packages/mypackage" for my project, and I would like to use vite separately for this subfolder.
When I run "npm run build", It works correctly, generating a public folder in the package, with its own manifest.json.
The main problem is when I want to load those files in a blade view.
My public/build/manifest inside the package:
{
"themes/custom/scss/styles.scss": {
"file": "assets/styles-9b1f12cb.css",
"src": "themes/custom/scss/styles.scss",
"isEntry": true
},
"themes/custom/js/scripts.js": {
"file": "assets/scripts-4ed993c7.js",
"src": "themes/custom/js/scripts.js",
"isEntry": true
}
}
But when I use vite in blade with
#vite(['themes/custom/js/scripts.js', 'themes/custom/scss/styles.scss'])
Chrome shows an exception:
Unable to locate file in Vite manifest: themes/custom/js/scripts.js.
Could someone help me to figure out what I'm doing wrong?
Thanks!
I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules
I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).
vue.config.js:
module.exports = {
// So we can use the template syntages in vue components (correct me if am wrong)
runtimeCompiler: true,
// CSS settings
css: {
loaderOptions: {
sass: {
// Load in global SASS file that we can use in any vue component and any sass file
data: `
#import "#/assets/css/variables.scss";
`
}
}
}
};
Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.
Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.
Anyone experience with this?
Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.
mix.options({
globalVueStyles: `resources/assets/css/variables.scss`
});
And install the dependency sass-resources-loader
npm install --save-dev sass-resources-loader
It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.
To have more control over "vue-loader" you can use the undocumented function mix.override
mix.override(webpackConfig => {
// iterate and modify webpackConfig.module.rules array
})
As in Material Component Web's example, I want to be able to import SCSS from my node_modules like this:
#import '#material/elevation/mdc-elevation';
However, I'm getting this error message when trying to run the webpack build:
File to import not found or unreadable: #material/elevation/mdc-elevation.
#import './~/#material/elevation/mdc-elevation.scss'; doesn't work either.
I'm pretty sure the issue is somewhere in my webpack config, but I can't figure out where.
What did they do in Material Components Web's Vue.js example in order to make it work?
Here's my npm-debug.log in case you need it.
And here's the corresponding Git repository: sk22/spg-tinf-sem03/proj01
Thanks in advance!
Edit: I want to be able to import the scss files, not the compiled css.
Got it.
here's a part of my webpack 2 config's module.rules:
{
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve(__dirname, 'node_modules')],
},
},
],
},
So what did I do wrong?
My options object was placed in the rule directly, not the loader.
The old webpack config rule looked like this:
{
test: /\.(sass|scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
options: { includePaths: [path.resolve(__dirname, './node_modules')] },
},
See the difference? Instead of the 'sass-loader' string, I extended it to an object, containing the loader name and the options object, because the options only apply to the sass-loader.
(You could also drop the path.resolve and only write 'node_modules', but it might be safer to leave it.)
Check out this documentation page for further information. https://webpack.js.org/configuration/module/#rule-use
Without that loader, you must prefix each import with a ~, which webpack converts to the node_modules folder, at least with my previous configuration.
But this will break 3rd party SCSS frameworks like Material Components Web, because they use #import statements without a leading ~ themselves, for example here.
Inside .vue files
This will not work in .vue files, as vue-loader just uses sass-loader without any options by default.
So if you want that to work, you probably need to make use of vue-loader's own options, as described in its documentation.
(I'm unable to get it to work for some reason I don't know...)
EDIT: Webpack has a section on sass-loader now: https://webpack.js.org/loaders/sass-loader/ also mentioning includepaths.
I had the same issue with #material and Vue. I managed to resolve the problem without adjusting the use property directly.
Solution
Step 1: First create a default Vue 2.1 project using the CLI.
Your file structure will have a ./build directory.
Step 2: Open the file 'utils' you will see a cssLoaders() function which returns an object/map for the languages vue-loader supports.
You will see both sass and scss in that map.
Step 3: Change the values of sass and scss to:
sass: generateLoaders('sass', {
indentedSyntax: true,
includePaths: [path.resolve(__dirname, '../node_modules')]
}),
scss: generateLoaders('sass', {
includePaths: [path.resolve(__dirname, '../node_modules')]
}),
Step 4: Go to the .vue file you're using and change the lang attribute in your <style> element to either sass or scss.
Step 5: After you've done that go to the terminal/console and install sass-loader with:
npm install sass-loader node-sass webpack --save-dev
Step 6: Then run npm run dev and it should work.
Why does this work?
Libraries
I dug around a bit and it turns out sass-loader uses node-sass which has some options such asincludePaths one mentioned by #22samuelk. IncludePaths tells node-sass or rather the underlying library LibSass to include sass files from that directory/path.
Vue
Sass-loader options
By default Vue expects your assets to be in your projects src/assets folder (correct me if I'm wrong). You can however use ~ to indicat you want to start at your projects root which would look like `~/node_modules/#material/smth/mdc-smth.scss.
Now if you want your sass-loader to use something other than those options you need to explicitly tell them.
Hence path.resolve(__dirname, '../node_modules' since the utils file is in ./build and you need to use an absolute path for sass-loader to understand where to look.
Vue-loader config
This is not really specific to the question but the vue-loader config defined in vue-loader.conf.js works as follows:
It uses the map returned by cssLoaders() to build the loaders expected by webpack.
The returned map ({key:value}) is then used by providing key as a file extension used in test: for a loader object. The value is used as the loader object.
Which would like like this:
{
test: /\.(key)$/,
use: [
{
loader: '//ld//-loader',
options: {
/*Options passed to generateLoaders('//ld//', options)*/
},
},
],
}
Where key is the file extention. In this case that would be either sass or scss. And //ld//is the loader you which to use. Which is shown in Step 3 as 'sass'.
Hopefully this clears up some stuff. Took me a while because I just started using Vue.
I'm creating a modular Laravel 5.2 app, which consists of a number of proprietary packages loaded on a Laravel installation using composer.
Each of the packages are responsible of managing its own assets (copy to public folder, compress, versioning, etc). To accomplish this, I have a gulpfile that uses elixir for each package, and then, they are loaded on the main gulpfile of the laravel installation.
This is the main gulpfile.js on the laravel installation:
var filesystem = require("fs");
var gulp = require('gulp');
var elixir = require('laravel-elixir');
gulp.task('default', function() {
runPackagesGulpFiles();
});
function runPackagesGulpFiles() {
var packagesPath = 'vendor/my-organization/';
filesystem.readdirSync(packagesPath).forEach(function (file){
try {
var gulpFilePath = packagesPath + file + '/resources/assets/gulpfile.js';
var fileStat = filesystem.statSync(gulpFilePath);
require('./' + gulpFilePath);
} catch (error) {
if (error.message.indexOf('no such file or directory') < 0) {
console.error(error.stack);
}
}
});
}
All the main gulpfile.js does, is execute the packages gulpfiles if they exist using a require() function.
The following is an example of a package gulpfile:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.copy('vendor/my-organization/store-manager/resources/assets/js/', 'public/assets/js/elixir_components/store-manager/');
mix.version([
//Store structure versioning
'assets/js/elixir_components/store-manager/stores/store.js',
'assets/js/elixir_components/store-manager/stores/views.js',
'assets/js/elixir_components/store-manager/stores/models.js',
'assets/js/elixir_components/store-manager/stores/controllers.js',
//Store resources versioning
'assets/js/elixir_components/store-manager/resources/resources.js',
'assets/js/elixir_components/store-manager/resources/views.js',
'assets/js/elixir_components/store-manager/resources/models.js',
'assets/js/elixir_components/store-manager/resources/controllers.js',
//Store structure resources versioning
'assets/js/elixir_components/store-manager/structures/structure.js',
'assets/js/elixir_components/store-manager/structures/views.js',
'assets/js/elixir_components/store-manager/structures/models.js',
'assets/js/elixir_components/store-manager/structures/controllers.js',
]);
});
In a normal case scenario this works just fine. A normal case scenario being that the packages are loaded using composer.
However, for the development of the packages, I create a symbolic link in the vendor folder that points to the package folder in my local machine.
When I try to execute gulp in the development environment, I get a Cannot find module 'laravel-elixir' error:
[22:27:03] Using gulpfile ~/supermarket-cms/gulpfile.js
[22:27:03] Starting 'default'...
Error: Cannot find module 'laravel-elixir'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (/home/vagrant/Code/store-manager/resources/assets/gulpfile.js:1:76)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
[22:27:03] Finished 'default' after 12 ms
Problem that I solved by installing laravel-elixir globally. But after I do so, the gulp task ends and my assets are not being copied.
[21:25:02] Using gulpfile ~/supermarket-cms/gulpfile.js
[21:25:02] Starting 'default'...
[21:25:02] Finished 'default' after 3.78 ms
No error whatsoever appears. Hope someone can help me. Thank you.
I think you're going about this the wrong way. This requires a level of knowledge about the workings of each vendor package, which goes against the purpose of package managers.
Instead, you should be allowing all of the assets from your vendor package to be published.
You'll start by making sure that in your boot method you publish your assets accordingly:
$this->publishes([
__DIR__.'/path/to/assets' => resource_path('vendor/my-organization/'.$package_name),
], 'public');
//make sure to replace '/path/to/assets' with your packages asset path.
Then when executing
php artisan vendor:publish
Now all of your JavaScript and CSS will be pushed into it's respective location in your resource_path
resources/
vendor/
my-organization/
<package_name>
js/
Now just have your Gulp task watch concatenate and load all scripts from within /my-orginazation/**/js. So now you can just do something like this:
elixir(function(mix){
'vendor/my-organization/**/js/*.js',
}, 'public/js/outputfile.js, 'resources');
Do, npm install --global laravel-elixir before you say gulp
I have the following wiredep task:
gulp.task('wiredep', function () {
log('Installing Bower Components in HTML files...)
return gulp
.src('./Views/Shared/_Layout.cshtml')
.pipe(wiredep({
bowerJson: require('./bower.json'),
directory: './bower_components/',
ignorePath: '../..'
}))
.pipe(gulp.dest('.'));
});
The goal is to convert the
<!-- bower:js -->
<!-- endbower -->
to actual JavaScripts as specified in my bower.json:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "3.0.0",
"hammer.js": "2.0.4",
"jquery": "2.1.4",
"knockout": "3.3.0"
}
}
When I run the task I get the following output:
[15:53:06] Starting 'wiredep'...
[15:53:06] Installing Bower Components in HTML files...
events.js:72
throw er; // Unhandled 'error' event
^
Error: Error: bootstrap is not installed. Try running `bower install` or remove the component from your bower.json file
I do see the packages in wwwroot/lib, so I think Bower is actually installing it.
Can anyone help me solve this?
this part of your script:
directory: './bower_components/',
is using the wrong path /bower_components/ is the default install folder for bower components (actually in beta 4 VS 2015 RC it used to put files there) but in the latest VS project template there is a file .bowerrc in the root of the app that tells it to put bower components under wwwroot/lib instead of the default folder name. so directory needs to be ./wwwroot/lib/' I think.