Projects only work on CodePen

JavaScript
1

I developed my projects on CodePen and everything works normally. But when I export the files and try to use them on my machine or GitHub Pages it just doesn’t work.

On my machine and on GitHub Pages the HTML and CSS load normally, but the JS file doesn’t work. This problem occurred with two projects, one using jQuery and the other using jQuery and React.

CodePen exports only three files: index.html, style.css and script.js. Do I need to use some special file to make it work outside of CodePen?

On console I get:

  • Uncaught ReferenceError: $ is not defined at script.js:1:1 (Project using jQuery)
  • Uncaught SyntaxError: Cannot use import statement outside a module (Project using React and jQuery
2

Please share your GitHub repository so we can see the code. We really can’t help you much without seeing that.

  • Uncaught ReferenceError: $ is not defined at script.js:1:1 (Project using jQuery)

Have you added jQuery via a script tag before your custom scripts? jQuery declares the $ variable, so probably not.

  • Uncaught SyntaxError: Cannot use import statement outside a module (Project using React and jQuery

You can only use the import keyword in a module. You tell the browser that the script is a module by setting its type attribute to module - <script>: type attribute - HTML: HyperText Markup Language | MDN

3

Thank you so much! I was putting jQuery script at the end of the body.

I put the type="module" on the script, but now the console show Uncaught SyntaxError: Unexpected token '<' (at VM29 script.js:21:7) even though the code appears to be correct:
image

My repository on GitHub.

4

You’re using jsx so you must also include a tool called babel, which will transpile your jsx into JavaScript that the browser can interpret.

Try to follow the guide in the React docs, it tells you all the scripts you need to use (especially the " Optional: Try React with JSX" section at the bottom).

1 Like
5

Hi @adrianwilker !

Welcoem to the forum!

For future react projects, I would suggest using Vite to create new projects.
It will provide you with a basic setup you need to get started.

Also, I wouldn’t suggest mixing jquiry and react together.
I would suggest just going with react.

Hope that helps!

1 Like