Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths and do not contain invalid characters #250
Comments
|
related ecadc6c |
|
🎉 This issue has been resolved in version 2.4.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
fixed at |
|
@himself65 @SASUKE40 This issue is back in v2.8.1. |
Use v2.6.4 for rollup v1. |
|
@SASUKE40 I'm using Rollup v2.6.1. |
|
🎉 This issue has been resolved in version 2.8.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
I just released a new version |
Thank you! It almost solved it. Previously I had more control on where the outputted file goes. Now it seems to be created in I tried passing |
I did ignore relative paths like this, let me see how to fix that. |
Same for me with v2.8.2, I'm getting the error with this snippet in my rollup.conf postcss({
plugins: postcssPlugins(!dev),
extract: path.resolve(__dirname, './static/global.css'),
} ),The issue should be re-opened until fixed no? |
|
|
There is no plan to support anything else in the future as e.g. paths leaving the bundle root would violate the assumption that Rollup will only ever modify the target directory. Related issue: rollup/rollup#3507 |
|
This comment by @lukastaegert provides the full solution. What I had to do was: 13c05ebd 2020-04-29 | Fix issues with rollup-plugin-postcss (HEAD -> charge-purchase-history) [Austin Ziegler]
diff --git a/assets/rollup.config.js b/assets/rollup.config.js
index 1e976e0f..f1a365a1 100644
--- a/assets/rollup.config.js
+++ b/assets/rollup.config.js
@@ -60,13 +60,14 @@ const plugins = [
]
function postcssPlugin(appType) {
- return postcss({ extract: `${destination}/css/${appType}-app.css`, plugins: [autoprefixer] })
+ return postcss({ extract: `css/${appType}-app.css`, plugins: [autoprefixer] })
}
const employee = {
input: 'src/employee-app.js',
output: {
- dir: `${destination}/js`,
+ dir: destination,
+ entryFileNames: 'js/[name].js',
format: 'iife',
sourcemap: !isProduction ? 'inline' : false,
},
@@ -76,7 +77,8 @@ const employee = {
const customer = {
input: 'src/customer-app.js',
output: {
- dir: `${destination}/js`,
+ dir: destination,
+ entryFileNames: 'js/[name].js',
format: 'iife',
sourcemap: !isProduction ? 'inline' : false,
},This works perfectly. |
Hi @halostatue aka Austin, so I figure you're on v3.1.1 with this patch added or are you still on v2.9.0 like I am because v3.1.1 is broken like mentioned here #264 @SASUKE40 what do you think, is this patch working for v3.1.1 so one could upgrade from v2.9.0? |
The way to generate asset files between rollup v1 and rollup v2 is different. |
|
I’m on v3.1.1 and it’s working with the changes I described above. |
|
Can't figure it out for some reason, here's my rollup.conf in my Sapper project that works with v2.9 but not v3.1.1 The extract line is line 186 in the server section import { terser } from 'rollup-plugin-terser'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import config from 'sapper/config/rollup.js'
import environmentVariables from './config/env'
import getPreprocessor from 'svelte-preprocess'
import getTime from 'date-fns/getTime'
import json from '@rollup/plugin-json'
import pkg from './package.json'
import postcss from 'rollup-plugin-postcss'
import replace from '@rollup/plugin-replace'
import resolve from 'rollup-plugin-node-resolve'
import svelte from 'rollup-plugin-svelte'
import visualizer from 'rollup-plugin-visualizer'
const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD
const onwarn = ( warning, onwarn ) => ( warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test( warning.message ) ) || onwarn( warning )
const dedupe = importee => importee === 'svelte' || importee.startsWith( 'svelte/' )
const appConfig = Object.keys(environmentVariables).reduce((acc, n) => {
acc[`${n}`] = environmentVariables[n]
return acc
}, {})
const svelteExtractor = ( content ) => {
const regExp = new RegExp(/[A-Za-z0-9-_:/]+/g)
const matchedTokens = []
let match = regExp.exec(content)
while (match) {
if (match[0].startsWith('class:')) {
matchedTokens.push(match[0].substring(6))
} else {
matchedTokens.push(match[0])
}
match = regExp.exec(content)
}
return matchedTokens
}
const postcssPlugins = ( purgecss = false ) =>
[
require('postcss-import')(),
require('postcss-url')(),
require('tailwindcss')({ config: 'tailwind.config.js' }),
require('autoprefixer')({
overrideBrowserslist: 'last 1 version',
}),
// Do not purge the CSS in dev mode to be able to play with classes in the browser dev-tools.
purgecss &&
require('@fullhuman/postcss-purgecss')({
content: [
'src/**/*.html',
'src/**/*.svelte',
'src/**/*.css',
'static/**/*.css',
],
extractors: [
{
extractor: svelteExtractor,
// Specify the file extensions to include when scanning for class names.
extensions: [ 'svelte', 'css', 'html' ],
},
],
fontFace: true,
// Whitelist selectors to stop Purgecss from removing them from your CSS.
whitelist: [ 'html', 'body' ],
whitelistPatterns: [/svelte-/]
}),
purgecss &&
require('cssnano')({
preset: 'default',
}),
].filter(Boolean)
const preprocess = getPreprocessor({
transformers: {
postcss: {
plugins: postcssPlugins(), // Don't need purgecss because Svelte handles unused css for you.
},
},
})
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
// eslint(),
visualizer( { filename: 'visualizer_stats/client.json', title: 'Client Bundle', json: true } ),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify( mode ),
ROLLUP_DEV_OR_PROD_URL: ( dev ? '.': appConfig.EDM_URL ),
ROLLUP_EDM_UPDATE_TIMESTAMP: getTime( new Date() ),
ROLLUP_GOLIVE_DATE: appConfig.GOLIVE_DATE,
ROLLUP_RECAPTCHA_SITE_KEY: appConfig.RECAPTCHA_SITE_KEY,
}),
svelte({
dev,
hydratable: true,
emitCss: false,
preprocess,
}),
resolve({
browser: true,
dedupe,
}),
commonjs(),
legacy &&
babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [
[
'@babel/preset-env',
{
targets: '> 0.25%, not dead',
},
],
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
[
'@babel/plugin-transform-runtime',
{
useESModules: true,
},
],
],
}),
!dev &&
terser({
module: true,
}),
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
// eslint(),
visualizer( { filename: 'visualizer_stats/server.json', title: 'Server Bundle', json: true } ),
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify( mode ),
ROLLUP_DEV_OR_PROD_URL: ( dev ? '.': appConfig.EDM_URL ),
ROLLUP_EDM_UPDATE_TIMESTAMP: getTime( new Date() ),
ROLLUP_EXPRESS_SESSION_COOKIE_SIGNING_SECRET: appConfig.EXPRESS_SESSION_COOKIE_SIGNING_SECRET,
ROLLUP_IPREGISTRY_KEY: appConfig.IPREGISTRY_KEY,
ROLLUP_IPREGISTRY_URL: appConfig.IPREGISTRY_URL,
ROLLUP_RECAPTCHA_SCORE_IS_BOT: appConfig.RECAPTCHA_SCORE_IS_BOT,
ROLLUP_RECAPTCHA_SCORE_IS_HUMAN: appConfig.RECAPTCHA_SCORE_IS_HUMAN,
ROLLUP_RECAPTCHA_SECRET_KEY: appConfig.RECAPTCHA_SECRET_KEY,
ROLLUP_RECAPTCHA_VERIFY_URL: appConfig.RECAPTCHA_VERIFY_URL,
}),
svelte({
generate: 'ssr',
dev,
preprocess,
}),
resolve({
dedupe,
}),
commonjs(),
postcss({
plugins: postcssPlugins(!dev),
extract: 'static/global.css',
}),
json()
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules ||
Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
// eslint(),
visualizer( { filename: 'visualizer_stats/service-worker.json', title: 'Service Worker Bundle', json: true } ),
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify( mode || 'production'),
}),
commonjs(),
!dev && terser(),
],
onwarn,
}
}I'd be very greatful if somebody could maybe spot an obvious mistake I'm making for it not to work with v3.1.1. |
|
Still getting this with version 3.1.1. It is not clear from this thread what the solution (other than rolling back to version 2.9.0) should be for users on version 3.1.1. Perhaps a new issue would be in order? |
|
The changes I put in my comment resolved this perfectly for me. I’m doing this by exporting an array of configurations ( @evdama, your comment I can’t quite figure out what the output of your |
|
@halostatue Ah I see what you did, I was looking at @evdama example because they are working in the same system as me (Sapper.js). I will mess around a bit more with the configuration and see if I can get it to work within the build configuration that works for Sapper.js |
Hi @jhoffmcd, Hi @halostatue and thanks for asking, my They are imported into the above rollup.conf with Below is the file with the 'use strict';
var __chunk_3 = require('./chunk3.js');
const sourcemap = __chunk_3.dev ? 'inline' : false;
var rollup = {
dev: __chunk_3.dev,
client: {
input: () => {
return `${__chunk_3.src}/client.js`
},
output: () => {
let dir = `${__chunk_3.dest}/client`;
if (process.env.SAPPER_LEGACY_BUILD) dir += `/legacy`;
return {
dir,
entryFileNames: '[name].[hash].js',
chunkFileNames: '[name].[hash].js',
format: 'esm',
sourcemap
};
}
},
server: {
input: () => {
return {
server: `${__chunk_3.src}/server.js`
};
},
output: () => {
return {
dir: `${__chunk_3.dest}/server`,
format: 'cjs',
sourcemap
};
}
},
serviceworker: {
input: () => {
return `${__chunk_3.src}/service-worker.js`;
},
output: () => {
return {
file: `${__chunk_3.dest}/service-worker.js`,
format: 'iife',
sourcemap
}
}
}
};
module.exports = rollup;
//# sourceMappingURL=rollup.js.map |
|
I don’t use Sapper, so I can’t really answer on this one. Based on what I see, the CSS directory will be: `${__chunk_3.dest}/client/static/global.css` |
|
Hi @evdama that's now separated and this template is now using svelte-preprocess instead of compiling postcss with rollup-plugin-postcss. Take a look at https://github.com/nhristov/sapper-template-rollup/blob/master/rollup.config.js. |
Or reopen this one because I'd agree, there's no solution yet as far as I can tell... |
|
Unless I've misunderstood what you need, the quick fix is to use a path like If you want to use a relative path (e.g. outside of the I've not tried this for rollup-plugin-postcss, but if that suits your use case, it might be worth giving it a go. |
|
@jhoffmcd I tried https://www.apostrof.co/blog/getting-tailwind-css-to-integrate-nicely-with-svelte-sapper/ which didn't work for me because bundle build times went up to about 3-5 Minutes and even then some custom tailwind classes were missing from the bundle. @MichaelAnd You're right, and I've already done so as you can see from the extract line ( @halostatue yes, you're right with Still, the issue remains, my setup as can be seen above from the rollup.conf and the Sapper config works with rollup-plugin-postcss v2.9.0 but not with v3.1.1. With v3.1.1 |
|
fixed my issue: |
|
@evdama good suggestion, although I am not sure why there is no way to specify the path in this plugin. I had to do similar hacks of: |
|
Another thing that works to copy to the correct path is using rollup-plugin-copy: postcss({
plugins: [
require('autoprefixer'),
require('cssnano')
],
extract: 'dist/css/shepherd.css'
}),
copy({
targets: [
{ src: 'dist/js/dist/css/*', dest: 'dist/css' }
]
}), |
|
@rwwagner90 do you know how to move rather than copy a file with rollup-plugin-copy? For deleting all I found so far was https://github.com/vladshcherbin/rollup-plugin-delete |
|
didn't work outside the bundle root so I ended up using one predeploy script const fs = require('fs-extra');
fs.remove('./functions/__sapper__').then(() => {
fs.moveSync('./__sapper__/build/server/global.css', './static/global.css'); // <-- here is where I do the move now
fs.copySync('./__sapper__', './functions/__sapper__');
}); |
|
@evdama this was all I needed to copy to the path I wanted: copy({
targets: [
{ src: 'dist/js/dist/css/*', dest: 'dist/css' }
]
}),It moved it from the incorrect path nested under the js bundle root, to the correct path of As for removing the extra file, I was just using |
|
I have just tried 4.0.2 which is the latest version at the moment and it is still broken. Any plans to fix this issue? |
|
It has not been fix this issue for 100 years |
|
I came here with the hope of seeing this being fixed, and yet after 2 years still not fixed, unbelievable!!! Here is my config and yet didn't work;
As per the config above, added the "dist" directory with the hope of producing a single stylesheet for both ESM and CJS but not lucky, instead, both ESM and CJS ended up with their own stylehseet.css but in a nested folder, the "dist", like so;
This is absolutely shocking! |
I share the same |
|
I've done this workaround using export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
},
],
plugins: [
peerDepsExternal({
includeDependencies: true,
}),
resolve(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' }),
postcss({
extract: true,
modules: true,
minimize: true,
}),
terser(),
visualizer(),
],
},
{
input: 'dist/esm/types/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: 'esm' }],
plugins: [
copy({
targets: [{ src: 'dist/cjs/index.css', dest: 'dist/styles' }],
verbose: true,
hook: 'buildStart',
}),
del({
targets: ['dist/cjs/index.css', 'dist/esm/index.css'],
verbose: true,
hook: 'buildEnd',
}),
dts(),
],
external: [/\.(css|less|scss)$/],
watch: false,
},
]; |
|
For me this works perfectly and you don't need to copy / delete anything - #250 (comment) |
|
I had the same error on version 4.0.2. What worked for me was using path.resolve:
As it says in the docs |
Not work for me if I use output.file other than output.dir |
I'm getting an error when I try to define a filename for the extract option.
v2.4.0:
[!] (plugin postcss) Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths and do not contain invalid characters, received "../test.css".
Works on v2.3.0.
The text was updated successfully, but these errors were encountered: