javascript - Uncaught ReferenceError: define is not defined typescript

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I am new to typescript, knockout and requirejs. I have created some demo using this files. Now, I want to implement some minor logic using typescript and knockoutjs.

I have created 4-5 typescript files, which are imported internally. When I run the html file. I am getting the error stating. as Titled

Can somebody help me on this error. What I am missing in this code.

have search on google and spend quite a good time but didn't find the proper solutions. It must be related to requireJS to define all modules. But, as new in requireJS not able to catch up with that. I have also search stackoverflow for the similar error, but it doesn't help me out.

Waiting for the solution

Here your TypeScript has compiled happily, to code that will work in a requireJS environment (technically, an AMD environment). That means it generates output that assumes that define/require etc all already exist.

The overall answer is that you need to include RequireJS before you depend on your compiled code.

Notably the error suggests you've made a separate mistake though: you're depending directly on the RequireJS module scripts (i.e. you have a <script src="my-compiled-code.js"></script> tag in your HTML). That's not how require modules work. Instead, once you've made RequireJS available, you should have a single top-level startup script (either inline in your HTML or as a separate file) that configures RequireJS and then require() 's the top-level files of your application to start everything off. You can load this file either by hand, or with RequireJS's "data-main" attribute.

For example, a minimal HTML looks something like:

<!DOCTYPE html>
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    </body>
</html>
This loads RequireJS from 'scripts/require.js' and then tells it to load the script at 'scripts/main.js' to start off the loading process (you'll probably want to update both paths - note that data-main doesn't need a .js extension). 
The main script should then be something very simple like:
// Set up any config you need (you might not need this)
requirejs.config({
  basePath: "/scripts"
// Tell RequireJS to load your main module (and its dependencies)
require("mainmodule");
Generally, it's not TypeScript problems you're fighting here, it's RequireJS. I'd try spending a bit more time playing with just Require (maybe in pure JavaScript, so it's clearer) and looking at working examples for that, so you can get that bit working first, then add in the rest.
                Yup, You were correct. Issue is solved. Mistake was that I have included both require.js file and other two files which are already declare in require.js file. Problem was in the demotest.htm  Thanks for the help
– Prashant Kankhara
                Aug 8, 2016 at 17:07
I want to add this fix in case someone else has this issue in React.  For me all I had to do is update the .eslintrc.js file at the root of my project. I fixed this in a previous project then forgot how I did it.
I believe adding env.amd: true solves this issue.
module.exports = {
env: {
    browser: true,
    es6: true,
    amd: true,
    node: true
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.