SyntaxError: Cannot use import statement outside a module

Get Help and Help Others
1

I ran ‘yarn rw test’ and i output from the testing

called “SyntaxError: Cannot use import statement outside a module”

image

So on stackoverflow a common solution to this is adding “type”:“module” to the package.json

as such
image

However this broke Apollo and I don’t understand why.


Compiled with problems:X

ERROR in ./src/App.js 7:0-62

Module not found: Error: Can't resolve '@redwoodjs/web/apollo' in 'E:\HalmetsRedWood\Hamlet\web\src'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@redwoodjs/web/apollo' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.


ERROR in ./src/App.js 8:0-67

Module not found: Error: Can't resolve './pages/FatalErrorPage/FatalErrorPage' in 'E:\HalmetsRedWood\Hamlet\web\src'
Did you mean 'FatalErrorPage.js'?
BREAKING CHANGE: The request './pages/FatalErrorPage/FatalErrorPage' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.


ERROR in ./src/App.js 9:0-30

Module not found: Error: Can't resolve './Routes' in 'E:\HalmetsRedWood\Hamlet\web\src'
Did you mean 'Routes.js'?
BREAKING CHANGE: The request './Routes' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

image

2

I found one solution however I have a feeling it will break redwood

image
image1206×716 44.6 KB

3

At the top of this example they specify the .js extension in their import, did you try that?

4

let it give it a shot

5

image
image753×406 20.7 KB

it still appears but the test past so shrug, So apparently looking deeper that JEST and modules are expeirmental so I don’t think it will past Jest testing

6

Remove the "type": "module" and import 'three/examples/js/loaders/GLTFLoader' instead of the jsm

7

maybe

const GLTFLoader = require(‘three/examples/js/loaders/GLTFLoader’)

8

This error can happen in different cases depending on whether you’re working with JavaScript on the server-side with Node.js , or client-side in the browser. There are several reasons behind “Cannot use import statement outside a module” error, and the solution depends on how you call the module or script tag.

Add type=“module” inside the script tag

When working with ECMAScript modules and JavaScript module import statements in the browser, you’ll need to explicitly tell the browser that a script is module. To do this, you have to add type=“module” onto any ‹script› tags that point to a JavaScript module. Once you do this you can import that module without issues.

<script type="module" src="./index.js"></script>

If you are working on Node.js or react applications and using import statements instead of require to load the modules, then ensure your package.json has a property “type”: “module” as shown below.

{
  // ...
  "type": "module",
  // ...
}
1 Like