I am developing an application using Svelte with Rollup and I ran into such a problem that when I compile it gives me a warning about the absence of App:
No name was provided for external module 'C:\...path...\App.svelte' in output.globals – guessing 'App'
The console displays at startup:
Uncaught ReferenceError: App is not defined
at main.js:5
My Rollup config:
Pastebin
main.js:
import App from './App.svelte';
const app = new App({
target: document.body
});
export default app;
Thanks for answers!
The issue is with the external setting in your Rollup config. You are passing a builtins function from rollup-plugin-node-builtins. Since this function returns a truthy value, Rollup assumes that every module you import is external.
The external key accepts either an array of module names, or a function which takes the module name and returns true if it should be treated as external.
See the Rollup documentation on external.
You need to pass an array here with the modules you want treated as external. Are you intending to pass a builtin-modules import here instead? I found this example in the rollup-plugin-node-resolve README.
import resolve from 'rollup-plugin-node-resolve';
import builtins from 'builtin-modules'
export default ({
input: ...,
plugins: [resolve()],
external: builtins,
output: ...
})
Related
I have a local node module, #em/inVis in my company whose index.d.ts file looks as follows:
import UWeb from "./UWeb";
import UWebParams from "./UWebParams";
export { UWeb, UWebParams };
elsewhere within the app, it's used as follows in typescript files
import { UWeb, UWebParams } from "#em/inVis";
when I try to do that in my TS file, I get the node error:
SyntaxError: Named export 'UWeb' not found. The requested module '#em/inVis' is a CommonJS module, which may not support all
module.exports as named exports. CommonJS modules can always be
imported via the default export, for example using:
import pkg from '#em/inVis'; const { UWeb, UWebParams } = pkg;
so when I try using that approach suggested above, I am getting the node error:
SyntaxError: Cannot use import statement outside a module not sure
what I am doing wrong.
We have been able to ported all the code for from JS/ES6 project to typescript 3.x but we can't seem to get the following file ported correctly.
The short version of file looks like this:
index.js (original):
export const Log = require('./src/Log');
export const OidcClient = require('./src/OidcClient');
export default {
Log,
OidcClient
};
index.ts (ported):
import Log from './src/Log';
import { OidcClient } from './src/OidcClient';
export default {
Log,
OidcClient
};
The problem appears to be with the import LOG from './src/Log' vs. the export const Log = require('./src/Log'); statement. If we change the source file to use export LOG from './src/Log'; then the Log is undefined in the calling script file, just like the problem we are seeing in the ported version.
Intellisense, for the source file, states that the exported OidcClient statement is defined as
(property) OidcClient: typeof import("c:/.../src/OidcClient").
Whereas the ported version of the OidcClient statement is defined as
(property) OidcClient: typeof OidcClient.
How do we make this work from a TypeScript file?
For completeness
We are using webpack and built the output as a library, with these output settings:
libraryTarget: 'var',
library:'Oidc'
Thus the JS client should use the module like: Oidc.Log.Error(message). But the problem was Oidc.Log is undefine.
The clue
In the browser's debugger we noticed that Oidc is defined as a Module, which is what we expected, but it had a mysterious property called default which had everything we wanted within it. Okay, how to remove the default property and apply everything in it's part object, the Oidc module?
After 4 days of trial and error, we found the solution.
Solution
The documentation, and everything we could find, stated we should use:
export default { Log, OidcClient }
Out of desperation we finally tried removing the default keyword, as in:
export { Log, OidcClient }
and guess what? It worked!!
No more mysterious default property and all the types live off of the Oidc module as expected!
I am having problems getting React and Jest to work together which seems odd as I thought they both came from a similar origin. My issue is around the way that the class I'm testing is being exported.
I have an ArticleService class which I could use happily in React when it was exporting as default:
class ArticleService {
constructor(articles) {
this.articles = articles;
if (!this.articles) {
this.articles =
[//set up default data....
];
}
}
getAll(){
return this.articles;
}
}
//module.exports = ArticleService;//Need this for jest testing, but React won't load it
export default ArticleService;// Can't test with this but React will load it.
Here is how it is being called in my React app (from my HomeComponent):
import ArticleService from './services/xArticleService';
and is being used happily as
const articles = (new ArticleService()).getAll();
However my tests will not run. Here is my test with an import of the class file:
import ArticleService from "../services/xArticleService";
it('correctly gets all summaries', () => {
var summaries = getFakeSummaryList();
var testSubject = new ArticleService(summaries);
var actual = testSubject.getAll();
expect(actual.length).toEqual(10);
});
and I get
FAIL src/tests/ArticleService.test.js
Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
U:\...\src\tests\ArticleService.test.js:2
import ArticleService from "../services/xArticleService";
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
If (in the test) I swop
import ArticleService from "../services/xArticleService";
for
const ArticleService = require('../services/xArticleService');
and edit the export in xArticleService.js to
module.exports = ArticleService;//Need this for jest testing, but React won't load it
then the tests are executed but React will not load it:
Attempted import error: './services/xArticleService' does not contain a default export (imported as 'ArticleService').
I have a default set up, creating using create-react-app. I've not changed any .babelrc.
Can anyone see where I am going wrong?
Thanks
UPDATE:
I have made the changes to .babelrc suggested in the accepted answer to the possible duplicate of this but this has made no change to the output.
I need to include a function from an external JS file in a Vue.js component. I've referenced this answer to figure out how to load the external file in my webpack config. My current setup looks like this:
webpack.dev.conf.js
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
[...]
new HtmlWebpackExternalsPlugin({
externals: [{
module: 'iframeresize',
entry: 'https://[...]/iframeResizer.min.js',
global: 'iframeresize'
}]
})
index.html
<script src="https://[...]/iframeResizer.min.js"></script>
.vue component
import { iFrameResize } from 'iframeresize'
export default {
name: 'FMFrame',
mounted () {
iFrameResize()
}
}
However, I'm getting an error from vue-router now.
[vue-router] Failed to resolve async component default:
ReferenceError: iframeresize is not defined
[vue-router] uncaught error during route navigation:
ReferenceError: iframeresize is not defined
Is there a step I'm missing in loading the function from the external file? I can use the function when loaded directly from index.html, but then I get a warning that the function is undefined as my webpack config seems to be ignored.
I believe this is happening because you are using a "named" import. (e.g. with braces)
If you are going to use braces then the the named import must contain an export.
import {foo} from 'foo'
then foo.js should contain
export const foo = ...
So in your case you need to use a default import without the braces which will automatically get included in the export default statement.
Simply use the 'default' import syntax.
import foo from 'foo'
Not really all that important but just to help understanding, a default import can actually be imported with braces by using the special name default
import { default as foo } from 'foo';
Further if a module has several named exports in it you can import them all and then refer to them by property.
import * as foo from 'bar'; // has two named exports doThis and doThat
//reference the named exports later with..
foo.doThis();
foo.doThat();
One problem could be the import expression, change with:
import iFrameResize from 'iframeresize'
UPDATE: just reproduced the problem and the above import works correctly.
NOTE Also remember to instantiate the plugin HtmlWebpackExternalsPlugin after your instance of html-webpack-plugin (see the Usage section of the docs)
this is the plugin configuration that I've used (change the global option value):
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'iframeresize',
entry: 'https://<url_path>/iframeResizer.js',
global: 'iFrameResize'
}
]
}),
I'm trying to import reveal.js with webpack 2.2 using the imports-loader but I keep getting an error:
Uncaught TypeError: Cannot set property 'Reveal' of undefined
I'm trying to import it like this:
require('imports-loader?this=>window!reveal.js');
That should inject the global window variable as this.
The part of code causing the error is this:
(function (root, factory) {
if (true) {
root.Reveal = factory();
}
})(undefined, function () {
undefined on the last line is being passed into the function as the root parameter.
This code is how webpack is importing the reveal.js library. For some reason it seems like webpack is replacing the word this with undefined when it bundles the code together.
How can I properly import this library with webpack? I've also tried script-loader and I get the same error.
In webpack configuration:
rules: [
{ parser: { amd: false }}
]
This will prevent webpack from defining AMD define variable, which is why reveal.js is triggering that condition in its factory wrapper.
After that I also am importing reveal.js and head.js via
import head from 'headjs/dist/1.0.0/head';
import Reveal from 'reveal.js/js/reveal';
// Reveal.initialize(