Problem to import a js file from `/static/js` (Uncaught Error: Cannot find module)

Phoenix Forum Questions / Help
, ,
1

Hello, I have read this post Importing js libs in files outside of main app.js and tried to import a js file and edited my webpack.config.js, but I still have this error: Uncaught Error: Cannot find module 'ckeditor'

Anyway, I tested it like these lines in app.js:

import {Ckeditor} from "ckeditor"
or
import 'ckeditor'; 
or
import {Ckeditor} from './ckeditor';
or
import "../js/ckeditor.js"

or the other way and my webpack.config.js is like this:

entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
      'ckeditor': ['./js/ckeditor.js'].concat(glob.sync('./vendor/**/*.js')),
    },

by the way, my js file is located in ‍asset/static/js‍ folder

Thanks, Please help me to import my js file.

2

Static dir is meant for files not going through webpack bundling…

Instead, You should simply add the package.

npm i ckeditor --prefix assets/
1 Like
3

I used your command in /elixir/apps/mishka_html/assets way and this is the result

/elixir/apps/mishka_html/assets # npm i ckeditor --prefix assets/
npm WARN deprecated ckeditor@4.12.1: We have renamed the @ckeditor package. New versions are available under the @ckeditor4 name.
npm WARN saveError ENOENT: no such file or directory, open '/elixir/apps/mishka_html/assets/assets/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/elixir/apps/mishka_html/assets/assets/package.json'
npm WARN assets No description
npm WARN assets No repository field.
npm WARN assets No README data
npm WARN assets No license field.

+ ckeditor@4.12.1
added 1 package from 1 contributor and audited 1 package in 8.348s
found 0 vulnerabilities

it shows me ckeditor@4.12.1, but my ckeditor version is 5 not 4 :thinking:

and now how can I load it on my app.js file

4

The --prefix assets is meant to be run from the root of the project.

If You are already inside assets, do not use the parameter…

And if You are looking for version 5, the package is ckeditor5.

2 Likes
5

Thanks I did it again

/elixir/apps/mishka_html/assets # npm i ckeditor --prefix
npm WARN invalid config prefix=true
npm WARN invalid config Must be a valid filesystem path
npm WARN deprecated ckeditor@4.12.1: We have renamed the @ckeditor package. New versions are available under the @ckeditor4 name.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ ckeditor@4.12.1
updated 1 package and audited 920 packages in 19.041s

55 packages are looking for funding
  run `npm fund` for details

found 4 vulnerabilities (3 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

now how can I load this in my app js file ?

6

after this I load it like this import {ClassicEditor} from "ckeditor" but I have this error Uncaught TypeError: Cannot read property 'create' of undefined unfortunately

7

finally Im forced to use like this import ClassicEditor from "../static/js/ckeditor" and it works for me