How to avoid "`this` has been rewritten to `undefined`" warning when bundling Scala.js file with rollup? - rollup

I'm using a Scala.js file with ECMAScript modules inside a Svelte project. When building the project with rollup I get the warning
this has been rewritten to undefined
With pointing at last line of code here
var $linkingInfo = Object.freeze({
"esVersion": 6,
"assumingES6": true,
"productionMode": true,
"linkerVersion": "1.7.1",
"fileLevelThis": this
});
and linking to this section of the documentation
Error: "this is undefined"
In a JavaScript module, this is undefined at the top level (i.e., outside functions). Because of that, Rollup will rewrite any this references to undefined so that the resulting behaviour matches what will happen when modules are natively supported.
There are occasional valid reasons for this to mean something else. If you're getting errors in your bundle, you can use options.context and options.moduleContext to change this behaviour.
In the context section I find
By default, the context of a module – i.e., the value of this at the top level – is undefined. In rare cases you might need to change this to something else, like 'window'.
Is changing the context from this to window the right thing to do in this case?
And how exactly do I add the option to rollup?
The documentation gives this info CLI: --context <contextVariable>, When adding the option like this the error persists:
[package.json]
"scripts": {
"build": "rollup -c --context window",
"dev": "rollup -c -w --context window"
...
}
When adding this line to the rollup.config file
export default {
input: ...,
output: {...},
plugins: [...],
watch: {...},
context: "window"
};
the warning vanishes - is this the right thing to do?

Related

Linting Nested Comment Erorr Vue VS Code

Developing a vue application with the eslint-plugin-vue, I am getting the following error when trying to use the comment shortcut in VS code over a template section that contains a nested comment:
Parsing error: nested-comment. eslint-plugin-vue
Is there a setting in the linter config file that I can change to allow commenting over nested comments or do I need to restart the linter somehow?
Update: it would appear if I added the following line to my .eslintrc.js file, from this site https://eslint.vuejs.org/rules/no-parsing-error.html#vue-no-parsing-error I should not be seeing this error:
'vue/no-parsing-error': ["error", {
'nested-comment': false
}]
However, it still remains. I do not have the option to run ESLint restart lint server in my command palette.
If you do have a .eslintrc.cjs file or anything alike, you could probably put that in there
/* eslint-env node */
module.exports = {
[...],
rules: {
'vue/html-comment-indent': 'off',
},
}
off is to say that you don't even want to hear about it anytime soon.
Otherwise, you can also use 'warn', if you want a warning.
Here is an official reference: https://eslint.vuejs.org/rules/html-comment-indent.html#vue-html-comment-indent

Npm workspaces: Different "main" property for development and publishing?

I've created an npm workspace with two packages "foo" and "bar".
Furthermore, I'm using typescript so both packages contain a src/index.ts.
During development, I want to have the "main" property of both packages to be src/index.ts.
But after building and publishing the packages the "main" entry has to point to the built dist/index.js.
How can I accomplish that or is my assumption wrong, that I can point to the typescript file during development?
But then I would have to rebuild the packages during development all the time.
I hope that's not necessary.
Thank you for your help in advance
UPDATE
To be more precise, I need to have "main" point to the Typescript file src/index.ts because otherwise, I can't reference "foo" inside of "foo" itself:
// foo/src/index.ts
import { something } from 'foo';
This error is thrown:
[vite:resolve] Failed to resolve entry for package "foo". The package may have incorrect main/module/exports specified in its package.json.
The above import only works, If "main" points to src/index.ts.
Otherwise I would have to use relative paths to the imported file of the same project, for example
// foo/src/index.ts
import { something } from './someotherfile.ts';
I found out, that vite needs the plugin vite-tsconfig-paths to find my main tsconfig.json to properly resolve the project:
// vite.config.ts
import tsconfigPaths from "vite-tsconfig-paths";
plugins: [
tsconfigPaths({
root: "../../",
}),
],

Publish a node module written in ES6 without providing the transpiled ES5 version b/c it is targeted for the latest browser

My team will publish a node module written in ES6, targeted for the latest browsers. All the ES6 features we use, like async/await, import/export are supported by our target browsers. So I believe providing the transpiled ES5 version does not make sense (Our targeted audiences assure us they will only use the latest Chrome).
But I found without the transpiled ES5 version when they use our module, they got SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' even though their gulpfile already set
return browserify({ ... })
.transform(babelify.configure({
presets: ["es2015"]
}))
...
If they just include our module source codes in their own codes they can import my module without any error. That makes me believe there should be some setting in my module so I can just provide ES6 version only.
BTW, I have read How to publish a module written in ES6 to NPM?
and SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Wait what?
They were not my question and the answers there didn't fix the SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' my clients got.
I spent a whole day solving it so I would like to share my experience.
First of all, it is browserify's parser that complained SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' so what I need to do is to let the client's browserify transform my module and the solution turned to be quite simple!
Why aren't files in node_modules being transformed?
A possible solution is to add:
{ "browserify": {
"transform": ["babelify"] } } to the root of all your modules package.json that you want to be transformed.
So adding "browserify": { "transform": [ "babelify" ] } to my module's package.json and the the problem is solved!
It is easy to verify that, e.g. in my module's .babelrc I particularly set "modules":false (b/c defaults to "commonjs")
{ "presets": [[
"env",
{
"modules":false,
"debug": true
}
]]}
Then I got SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' again!
PS,
I got more than one comments/answers said <script type="module". Of course I knew script has type="module" but that is the wrong answer!
Because we are talking using node module in browser environment, type="module" can't solve the problem of import module from node_modules

Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

I was trying to run webpack-4 first time
webpack ./src/js/app.js ./dist/app.bundle.js
it shows warning / error :
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in multi ./src/js/app.js ./dist/app.bundle.js
Module not found: Error: Can't resolve './dist/app.bundle.js' in 'D:\wamp64\www\webpack-4'
# multi ./src/js/app.js ./dist/app.bundle.js
Then i tried to change the mode
webpack --mode development
it shows :
ERROR in Entry module not found: Error: Can't resolve './src'
Resolved
Spent a lot of time to find out the solution.
Solution: Add index.js file into src folder.
That's it!.. solved :)
During Research, I found some facts about webpack 4 :
webpack 4 doesn’t need a configuration file by default!
webpack 4 there is no need to define the entry point: it will take ./src/index.js as the default!
Met this problem when deploying on now.sh
Solution: Use Default Behavior
Move entry point to src/index.js.
This leverage webpack#4 default value for entry:
By default its value is ./src/index.js, but you can specify a
different (or multiple entry points) by configuring the entry property
in the webpack configuration.
Solution: Be Specific
As #Lokeh pointed out, if you don't want to change your JS file location you can always use path.resolve() in your webpack.config.js:
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
Adding a context explicitly in webpack.config.js fixed issue for me. Adapt the following piece of code in your project:
context: __dirname + '/src',
entry: './index.js',
webpack ./src/js/app.js --output ./dist/app.bundle.js --mode development
This worked for me. I had the same trouble, it is because of a new version of webpack
webpack version 4.46.0
Perhaps someone gets stuck during migration from webpack 4 to 5.
in case of multiple webpack config files and if anyone uses merge:
Say webpack.common.js relies on some variables passed from cli eg:
module.export = (env) => {
const {myCustomVar} = env;
return {
// some common webpack config that uses myCustomVar
}
}
When you require common config in say webpack.prod.js:
const { merge } = require('webpack-merge'); // <-- `merge` is now named import if you are using > v5
const common = require('./webpack.common.js');
const getProdConfig = () => {....}
module.exports = (env) => {
return merge(common(env), getProdConfig()); // <-- here, `call` common as its exported as a fn()
};
I had a similar error and was able to resolve it with the command webpack src/index.js -o dist/bundle.js the -o did the trick. The issue wasn't the location of index.js it was missing the operator for defining the output path location.
See https://webpack.js.org/api/cli/
Version of webpack was 4.44.1
Other solutions didn't work. I solved this by adding this to package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //this
},
Then npm run build and it works. At first i've tried with npx webpack. Would love to know why it works.
Just leaving this here, incase someone is not paying attention to the details like me, I had the same error, but because my webpack config file was named webpack.config instead on webpack.config.js, so my custom configurations were never picked and webpack was falling back to the defaults entry "src/index.js"
As of webpack ^4.29.6 you don't need any configuration file so instead of giving path in package.json we need to write simply "build": "webpack" and keep index.js as entry point in src folder. However if you want to change entry point you can do so in webpack config file
For Rails 6 application this steps worked for me:
1) bundle exec rails webpacker:install
system will reinstall webpacker but will rewrite few files:
modified: config/webpack/environment.js
modified: config/webpacker.yml
modified: package.json
modified: yarn.lock
2) Return configs to initial state:
git checkout config/webpack/environment.js
git checkout config/webpacker.yml
package.json and yarn.lock you can leave as they are
Spent a lot of time similarly to others to get around this annoying problem. Finally changed webpack.config.js as follows:-
output: {
path: path.resolve(__dirname, './src'), //src instead of dist
publicPath: '/src/', //src instead of dist
filename: 'main.js' //main.js instead of build.js
}
...as Edouard Lopez and Sabir Hussain mentioned that you don't need to mention an entry point, removed that also and the app compiled after a long frustration.
So my problem, which I would wager is a lot of people's problem is that I set the entry path based on my whole app root. So in my case, it was /client/main.ts. But because my webpack.config.js file was actually inside /client, I had to move into that folder to run webpack. Therefore my entry was now looking for /client/client/main.ts.
So if you get this error you need to really look at your entry path and make sure it is right based on where you are running webpack and where your webpack.config.js file is. Your entry path needs to be relative to where you are running webpack. Not relative to your app root.
I had this problem when changing between React/Rails gems. Running rails webpacker:install restored me to the Rails webpacker defaults, but also overwrote all of my config files. Upon closer inspection, the culprit turned out to be my webpack/development.js file, which in a previous gem version had gotten modified from this Rails webpacker default:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
Once I restored the file to those contents, this error went away. Specifically I had been missing the module.exports = environment.toWebpackConfig() line, which apparently is pretty important for those who want to avoid Rails webpacker thinking it needs a src/index.js file (it doesn't)

How do you spin up a new spine app using the spine.app cli?

I'm attempting to use the spine.app cli and I'm encountering a couple of errors and I'm uncertain what the root cause actually is.
The guide found at: http://spinejs.com/docs/started gives these steps
spine app my-app
cd my-app
npm install .
hem server
following these steps, initially yields this error on the terminal:
Cannot find module: es5-shimify. Have you run `npm install .` ?
Investigating, it seems es5-shimify has been deprecated in favor of es5-shim, so my initial inclination was to replace the dependency to es5-shim. So I updated setup.coffee to require('es5-shim'), and I updated the referenced slug.json module and restarted the server. This seems to get me a little further, but still produces an error ( though not in the terminal, instead in the chrome console )
Uncaught TypeError: Property 'jQuery' of object [object Object] is not a function
This appears to be occurring on line 8 of public/index.html. I did some debugging here and it appears that require('jqueryify') is returning undefined, and I'm not certain what the expected result is. Any guidance on the right way to approach this process or perhaps information on what the root issue might be would be greatly appreciated.
Use the latest version try again.
The package.json as following
{
"name": "app",
"version": "0.0.1",
"dependencies": {
"spine": "~1.3.0"
}
}
all others dependencies has been removed,and it works for me.