I am using rollup to bundle my project.
At the start, everything was working fine, but I do not know what I changed in my config, I started getting this error on running rollup -c.
[!] Error: "version" is a required argument.
Error: "version" is a required argument.
at Object.getArg (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:14625:11)
at SourceMapConsumer$1.BasicSourceMapConsumer (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:15763:22)
at new SourceMapConsumer$1 (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:15491:7)
at Module.getOriginalLocation (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:16925:16)
at Module.error (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:16942:26)
at CallExpression.bindNode (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:12326:17)
at CallExpression.bind (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:11415:8)
at eachChild.child (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:11433:34)
at keys.forEach.key (/home/programmersedge/.nvm/versions/node/v6.11.1/lib/node_modules/rollup/dist/rollup.js:11450:5)
at Array.forEach (native)
Here is my rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import filesize from 'rollup-plugin-filesize'
import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import postcss from 'rollup-plugin-postcss-modules'
import autoprefixer from 'autoprefixer'
import sass from "node-sass"
const preprocessor = (content, id) => new Promise((resolve, reject) => {
sass.render({
file: id,
sourceMap: "string",
sourceComments: true,
sourceMapContents: true,
outputStyle: "compressed"
},(err, result) => {
if (err) {
return reject(err);
}
resolve({code: result.css.toString()});
});
});
export default {
input: 'src/index.ts',
output: {
file: 'lib/index.js',
format: 'umd',
globals: {
...
},
sourcemap: true,
},
external: [
...
],
plugins: [
resolve(),
postcss({
preprocessor,
plugins: [
autoprefixer(),
],
extensions: ['.scss'],
writeDefinitions: true,
postcssModulesOptions: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}),
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: true,
moduleResolution: "node"
}
},
rollupCommonJSResolveHack: true,
abortOnError: false,
typescript: require('typescript'),
}),
commonjs(),
babel({
exclude: 'node_modules/**'
}),
filesize()
],
watch: {
include: 'src/**'
}
};
I am not able to figure out where the version argument should go in my setup
or
what's wrong with my setup. Can anyone help me out here?
Anyways I fixed the issue.
Here the explanation for the issue
The reported error is an error that occurs when trying to use a source
map when reporting another error. The actual error that occurs is
probably CANNOT_CALL_NAMESPACE, which from my understanding means that
you're trying to call a variable to which you bound * in an import.
and Here's the GitHub Issue you can refer to.
For anyone who encounters this, there is now a PR open with a fix:
https://github.com/rollup/rollup/pull/2012
Also, for many people once this is fixed, it will reveal the real issue: Cannot call a namespace.
I found a fix for that in its own Rollup issue (happens with TypeScript):
import * as something_ from 'something';
const something: typeof something_ = something;
// Now you can use `soemthing` as usual
This only happens when using TypeScript through Rollup, not when running tsc directly.
Related
I am working on a project which is set up with lerna mono repo, we have multiple stencilJS projects for an individual component inside packages of monorepo.
My project sructure is:
I am new to the storybook, now I have to set up the storybook at the root level which all the packages storybook.
I followed an article on the internet and I have set up something which works only for a single package component, due to the current style of setup.
Due to defineCUstomElements in preview.js it is loading the first project package loader I am able to see only the first project stories. Css is not loading for second project stories.
Can someone help me to set up a storybook at the root level which works for all packages?
My example
storybook/main.js
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../packages/plugin-*/src/components/plugin-*/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-viewport',
'#storybook/addon-notes',
'#storybook/addon-docs'
]
}
storybook/preview.js
import { defineCustomElements } from '../packages/stencilProj1/loader';;
defineCustomElements();
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
package/stencilProj1/component1.stories.ts
import readme from './readme.md'
import React from 'react';
import ComponentButton from '../../../dist/collection/components/ComponentButton /ComponentButton';
export default {
title: 'Button',
component: ComponentButton,
argTypes: {
label: { control: 'text' },
type: { type: 'select', options: ['primary'] },
disabled: { control: 'boolean' }
},
parameters: {
markdown: readme
},
};
const Template = ({ label, type, disabled = false }) => {
return <component-button type={type} disabled={disabled}>{label}</component-button>;
};
export const Primary = Template.bind({});
Primary.args = {
type: 'primary',
label: 'Primary Button',
};
After a couple of months of attempts, I finally solved this puzzle :) And want to share my solution with community
I have a lerna v4 monorepo for react v17 + mui v5 components written in typescript and flavored with storybook v6 and webpack v5
mui has its wrappers in preview.js, that's why I added the path to .storybook in babel-loader
module.exports = {
core: {
builder: "webpack5",
},
framework: "#storybook/react",
stories: ["../components/**/*.stories.#(ts|tsx)"],
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
{
name: "#storybook/preset-create-react-app",
options: {
craOverrides: {
fileLoaderExcludes: ["less"],
},
},
},
],
webpackFinal: config => {
const {
module: {
rules: [, , , , , { oneOf }],
},
} = config;
const babelLoader = oneOf.find(({ test }) => new RegExp(test).test(".ts"));
babelLoader.include = [/components\/(.*)\/src/, /.storybook/];
babelLoader.options.sourceType = "unambiguous";
return config;
},
};
it is also worth to mention my tsconfig has these lines
"rootDirs": [
"./src",
],
Have you tried to import project 2's defineCustomElement with "as" to rename it and use it?
(something along the line of following inside preview.js)
import { defineCustomElements } from '../packages/stencilProj1/loader';
import { defineCustomElements as defineSecondProject } from '../packages/stencilProj2/loader';
defineCustomElements();
defineSecondProject();
This is very manual and even if this works, if you have many repo might not be good solution but I've done something similar to load multiple component loaders and that seem to work OK for my use case in the past.
I am using next-compose-plugins and when I try to build nextjs app, it throws error:
Runtime error: Uncaught Error: Module parse failed: The keyword 'interface' is reserved.
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
const nextConfig = {
distDir: "../../build",
async headers() {
return [
{
source: '*',
headers: [
{
key: 'x-custom-header',
value: 'my custom header value',
},
{
key: 'x-another-custom-header',
value: 'my other custom header value',
},
],
},
]
},
}
module.exports = withPlugins(
[withCSS], [withSaas], [withImages], [nextSourceMaps], [withTM],
{
webpack: (config, { isServer }) => {
config.optimization.minimizer = [];
config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
if (!isServer) {
config.resolve.alias["#sentry/node"] = "#Sentry (Legacy)/browser";
}
return config;
},
}, nextConfig);
I am using react-jss and I think this is what I am missing configuration for. I am not sure what's wrong in my configuration. Any help would be greatly appreciated. Thanks.
I have a weird thing happening when my css modules are exported with the * as styles becomes inaccessible when I bundle my code and use it in other repo's.
The response from styles when bundled:
{default: {... my class names} }
When I change my code to import styles from '...' it works when bundled because styles is the default but fails the tests because styles does not have access to the named exports.
rollup config.js
import resolve from '#rollup/plugin-node-resolve'
import commonjs from '#rollup/plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import { terser } from 'rollup-plugin-terser'
import postcss from 'rollup-plugin-postcss'
import postCssConfig from '#cinch-labs/postcss-config'
import pkg from './package.json'
import { designTokens, toJSON } from './src/tokens'
const extensions = ['.ts', '.tsx']
// stylelint does work but the postcss one needed to be removed
const postcssPlugins = postCssConfig(toJSON(designTokens)).filter(
({ postcssPlugin }: { postcssPlugin: string }) => postcssPlugin !== 'stylelint',
)
export default [
{
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs',
},
{
file: pkg.module,
format: 'es',
},
],
plugins: [
postcss({
modules: true,
extract: false,
syntax: 'postcss-scss',
plugins: postcssPlugins,
use: ['sass'],
}),
resolve({
extensions,
}),
commonjs(),
typescript({ tsconfig: 'tsconfig.rollup.json' }),
terser(),
],
external: ['react', 'react-dom'],
},
]
test.component.tsx
import React from 'react'
import classNames from 'classnames'
// I expected the bundler to resolve this for me...
import * as styles from './text.module.scss'
import { TextProps } from './text.types'
export const Text: React.FC<TextProps> = ({
children,
fontSize = 'm',
fontWeight = 'medium',
fontStyle = 'normal',
lineHeight = 'body',
element = 'p',
className,
...props
}) => {
const HtmlEl = element
const classes = classNames(
{
[styles[`textSize${fontSize.toUpperCase()}`]]: fontSize,
[styles[`textWeight${fontWeight.toUpperCase()}`]]: fontWeight,
[styles[`textLineHeight${lineHeight.toUpperCase()}`]]: lineHeight,
[styles[`textFontStyle${fontStyle.toUpperCase()}`]]: fontStyle,
},
className,
)
// classes returns undefined when bundled because of commonjs format.
return (
<HtmlEl className={classes} {...props}>
{children}
</HtmlEl>
)
}
I know this is due to the way common JS works however I would expect for the import * as styles to work. When I change it to import styles from './text.module.scss' it works fine when bundled but does not work in tests.
Using import * as styles from './text.module.scss' you are importing the styles as a named export.
Since this also returns {default: {... my class names} }, you can use styles.default instead, or, perhaps, assign it to a new variable like
const style = styles.default
Fixing this issue was by doing import styles from 'path name' and then installing jest-css-modules to map the styles object in my test.
https://www.npmjs.com/package/jest-css-modules
for me to compile and include with rollup.js the scss into the bundle/build worked adding:
plugins: [
postcss({
modules: true,
extract: false,
syntax: 'postcss-scss',
use: ['sass'],
}),
],
Hope this will help someone else in this journey :)
I am using Symfony + Vue.js, and I would like to import my _variables.sccs file in all the vue components. I want to use the scss variables in the style blocks of all of my components
I know how to do it in a vue app created with vue-cli (using vue.config.js config file), but i've tried to replicate this in different ways in the webpack.config.js used by Encore... and there is no way to make it work.
This is my webpack.config.js file:
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app/app.js')
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
.enableSassLoader()
// enable Vue.js
.enableVueLoader()
.configureWatchOptions(function (watchOptions) {
watchOptions.poll = 250;
})
;
module.exports = Encore.getWebpackConfig();
Any idea?
This is how i get it working with Vue 3 and AdonisJS 5
// webpack.config.js
Encore.enableVueLoader(() => { }, {
version: 3,
runtimeCompilerBuild: false,
useJsx: false,
})
Encore.configureLoaderRule('scss', loaderRule => {
loaderRule.oneOf.forEach(rule => {
rule.use.forEach(loader => {
if (loader.loader.indexOf('sass-loader') > -1) {
loader.options.additionalData = '#import "./resources/css/_import-everywhere.scss";'
}
})
});
});
fuxinko's answers works fine, but it'll give a warning:
WARNING Be careful when using Encore.configureLoaderRule(), this is a low-level method that can potentially break Encore and Webpack when not used carefully.
You should get the same result (without warning) by using using a callback in enableSassLoader:
.enableSassLoader(options => {
options.additionalData = '#import "./resources/css/_import-everywhere.scss";'
})
Note that the semicolon is not allowed in sass files, so if you need both scss and sass compiled, things could get more difficult: I've added a possible solution for this to a similar question: https://stackoverflow.com/a/68914128/1370000
I'm also curious about this one. I found on the web the following piece of code that should be added into the Symfony Webpack's file :
.enableVueLoader(function(options) {
options.loaders.scss.forEach(loader => {
if(loader.loader === 'sass-loader') {
loader.options = {
sourceMap: true,
data: `
#import "./assets/css/common/variables";
`
}
}
});
})
But in my case this doesn't work as options is empty in the callback function.
You can make this work by using sass-resources-loader. Install this loader first by using npm for example.
npm install sass-resources-loader
And than use the .configureLoaderRule method Webpack Encore ships with.
.configureLoaderRule('scss', (loaderRule) => {
loaderRule.oneOf.forEach((rule) => {
rule.use.push({
loader: 'sass-resources-loader',
options: {
resources: [
// Change this to your _variables.scss path
path.resolve(__dirname, './assets/css/_variables.scss'),
]
},
})
})
})
I've tried to make this work myself with LESS and it took me too much time to find out how it worked. Anyway for the people using LESS you can use a different loader like the: style-resources-loader
I have used this a couple of times. To get it to work I enable the vueLoader and add the vue-style-loader :
Encore
//...
.enableVueLoader()
.addLoader({
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
data: `
#import "./assets/scss/_variables.scss";
#import "./assets/scss/_mixins.scss";
`,
includePaths: [__dirname]
},
},
]
})
I have app.ts
import moment from 'moment/moment';
import $ from "jquery";
import 'fullcalendar/fullcalendar';
$('#calendar').fullCalendar();
But having the error that $(...).fullCalendar is not a function.
Hope some one can guide me to solve this.
thanks!
I had difficulty, not via angular/node, but client-side.
Ended up getting it to work via
System.config({
map: {
fullcalendar: "/js/app/fullcalendar-3.3.1/fullcalendar.min.js"
},
meta: {
fullcalendar: {
deps: [
// not sure why, but moment.js needs placed under "globals"
],
format: "global",
globals: {
moment: "/js/app/fullcalendar-3.3.1/lib/moment.min.js"
}
}
}
});
System.import("fullcalendar").then(function(){
// tada fullcalendar is loaded
$("#calendar").fullCalendar({});
});